GWT ปลดล็อก Augmented Reality ในเบราว์เซอร์ของคุณอย่างไร

ในโพสต์ก่อนหน้าของเราเกี่ยวกับ GWT Web Toolkit เราได้พูดถึงจุดแข็งและคุณลักษณะของ GWT ซึ่งเพื่อเป็นการระลึกถึงแนวคิดทั่วไป ทำให้เราแปลงซอร์สโค้ด Java เป็น JavaScript และผสมผสานไลบรารี Java และ JavaScript ได้อย่างลงตัว เราสังเกตว่า JavaScript ที่สร้างโดย GWT นั้นได้รับการปรับให้เหมาะสมอย่างมาก

ในโพสต์ของวันนี้ เราอยากจะเจาะลึกลงไปอีกเล็กน้อยและดูการทำงานของ GWT Toolkit เราจะสาธิตวิธีที่เราสามารถใช้ประโยชน์จาก GWT เพื่อสร้างแอปพลิเคชันเฉพาะ: เว็บแอปพลิเคชัน Augmented Reality (AR) ที่ทำงานแบบเรียลไทม์ใน JavaScript ในเบราว์เซอร์

ในบทความนี้ เราจะเน้นที่วิธีที่ GWT ช่วยให้เราสามารถโต้ตอบกับ JavaScript API ต่างๆ ได้อย่างง่ายดาย เช่น WebRTC และ WebGL และช่วยให้เราควบคุมไลบรารี Java ขนาดใหญ่ NyARToolkit ที่ไม่เคยมีเจตนาให้ใช้ในเบราว์เซอร์ได้ เราจะแสดงให้เห็นว่า GWT อนุญาตให้ทีมของฉันและฉันที่ Jooink รวบรวมชิ้นส่วนเหล่านี้ทั้งหมดเข้าด้วยกันเพื่อสร้างโครงการสัตว์เลี้ยง Picshare ซึ่งเป็นแอปพลิเคชัน AR ที่ใช้เครื่องหมาย ซึ่งคุณสามารถลองใช้ในเบราว์เซอร์ของคุณได้ทันที

โพสต์นี้จะไม่ใช่คำแนะนำอย่างครอบคลุมเกี่ยวกับวิธีสร้างแอปพลิเคชัน แต่จะแสดงการใช้ GWT เพื่อเอาชนะความท้าทายที่ดูเหมือนล้นหลามอย่างง่ายดาย

ภาพรวมโครงการ: จากความเป็นจริงสู่ความเป็นจริงยิ่ง

Picshare ใช้ความเป็นจริงเสริมตามเครื่องหมาย แอปพลิเคชัน AR ประเภทนี้จะค้นหาฉากสำหรับ เครื่องหมาย : รูปแบบทางเรขาคณิตที่จำเพาะเจาะจงและจดจำได้ง่ายเช่นนี้ เครื่องหมายให้ข้อมูลเกี่ยวกับตำแหน่งและการวางแนวของวัตถุที่ทำเครื่องหมายไว้ ทำให้ซอฟต์แวร์สามารถฉายภาพทิวทัศน์ 3 มิติเพิ่มเติมลงในภาพได้อย่างสมจริง ขั้นตอนพื้นฐานในกระบวนการนี้คือ:

• เข้าถึงกล้อง: เมื่อต้องรับมือกับแอปพลิเคชันเดสก์ท็อปแบบเนทีฟ ระบบปฏิบัติการจะให้การเข้าถึง I/O กับฮาร์ดแวร์ส่วนใหญ่ของอุปกรณ์ ไม่เหมือนกันเมื่อเราจัดการกับเว็บแอปพลิเคชัน เบราว์เซอร์ถูกสร้างขึ้นเพื่อเป็น "แซนด์บ็อกซ์" สำหรับโค้ด JavaScript ที่ดาวน์โหลดจากเน็ต แต่เดิมไม่ได้ตั้งใจให้เว็บไซต์โต้ตอบกับฮาร์ดแวร์ของอุปกรณ์ส่วนใหญ่ WebRTC ทำลายอุปสรรคนี้โดยใช้คุณลักษณะการจับภาพสื่อ HTML5 ทำให้เบราว์เซอร์สามารถเข้าถึงกล้องของอุปกรณ์และการสตรีมได้
• วิเคราะห์สตรีมวิดีโอ: เรามีสตรีมวิดีโอ…แล้วไง เราต้องวิเคราะห์แต่ละเฟรมเพื่อตรวจจับเครื่องหมาย และคำนวณตำแหน่งของเครื่องหมายในโลก 3 มิติที่สร้างขึ้นใหม่ งานที่ซับซ้อนนี้เป็นธุรกิจของ NyARToolkit
• เพิ่มวิดีโอ: สุดท้าย เราต้องการแสดงวิดีโอต้นฉบับด้วยวัตถุ 3D สังเคราะห์ที่เพิ่มเข้ามา เราใช้ WebGL เพื่อวาดฉากสุดท้ายที่ได้รับการเสริมแต่งลงบนเว็บเพจ

การใช้ประโยชน์จาก API ของ HTML5 กับ GWT

การใช้ JavaScript API เช่น WebGL และ WebRTC ทำให้เกิดการโต้ตอบที่ไม่คาดคิดและผิดปกติระหว่างเบราว์เซอร์และผู้ใช้

ตัวอย่างเช่น WebGL อนุญาตให้ฮาร์ดแวร์เร่งกราฟิก และด้วยความช่วยเหลือของข้อกำหนดอาร์เรย์ที่พิมพ์ ช่วยให้เอ็นจิ้น JavaScript ดำเนินการประมวลผลตัวเลขด้วยประสิทธิภาพที่เกือบจะเป็นเนทีฟ ในทำนองเดียวกัน ด้วย WebRTC เบราว์เซอร์จะสามารถเข้าถึงวิดีโอ (และข้อมูลอื่นๆ) ได้โดยตรงจากฮาร์ดแวร์ของคอมพิวเตอร์

WebGL และ WebRTC เป็นทั้งไลบรารี JavaScript ที่ต้องสร้างขึ้นในเว็บเบราว์เซอร์ เบราว์เซอร์ HTML5 ที่ทันสมัยส่วนใหญ่มาพร้อมกับการรองรับบางส่วนเป็นอย่างน้อยสำหรับ API ทั้งสอง (ดังที่คุณเห็นที่นี่และที่นี่) แต่เราจะใช้เครื่องมือเหล่านี้ใน GWT ซึ่งเขียนด้วยภาษา Java ได้อย่างไร ตามที่กล่าวไว้ในโพสต์ก่อนหน้านี้ JsInterop ซึ่งเป็นเลเยอร์ความสามารถในการทำงานร่วมกันของ GWT (เผยแพร่อย่างเป็นทางการใน GWT 2.8) ทำให้สิ่งนี้เป็นเรื่องง่าย

การใช้ JsInterop กับ GWT 2.8 นั้นง่ายพอๆ กับการเพิ่ม -generateJsInteropExports เป็นอาร์กิวเมนต์ให้กับคอมไพเลอร์ คำอธิบายประกอบที่มีอยู่ถูกกำหนดในแพ็คเกจ jsinterop.annotations ซึ่งรวมอยู่ใน gwt-user.jar

WebRTC

ตัวอย่างเช่น ด้วยการเขียนโค้ดเพียงเล็กน้อย การใช้ getUserMedia ของ WebRTC บน Chrome กับ GWT จะกลายเป็นเรื่องง่ายๆ เหมือนกับการเขียน:

 Navigator.webkitGetUserMedia( configs, stream -> video.setSrc( URL.createObjectURL(stream) ), e -> Window.alert("Error: " + e) );

โดยที่คลาส Navigator สามารถกำหนดได้ดังนี้:

 @JsType(namespace = JsPackage.GLOBAL, isNative = true, name="navigator") final static class Navigator { public static native void webkitGetUserMedia( Configs configs, SuccessCallback success, ErrorCallback error); }

สิ่งที่น่าสนใจคือคำจำกัดความของอินเทอร์เฟซ SuccessCallback และ ErrorCallback ทั้งสองใช้งานโดยนิพจน์แลมบ์ดาด้านบนและกำหนดใน Java โดยใช้คำอธิบายประกอบ @JsFunction :

 @JsFunction public interface SuccessCallback { public void onMediaSuccess(MediaStream stream); } @JsFunction public interface ErrorCallback { public void onError(DomException error); }

สุดท้าย คำจำกัดความของ class URL เกือบจะเหมือนกับของ Navigator และในทำนองเดียวกัน คลาส Configs สามารถกำหนดได้โดย:

 @JsType(namespace = JsPackage.GLOBAL, isNative = true, name="Object") public static class Configs { @JsProperty public native void setVideo(boolean getVideo); }

การใช้งานฟังก์ชันทั้งหมดนี้เกิดขึ้นจริงในเอ็นจิ้น JavaScript ของเบราว์เซอร์

คุณสามารถค้นหาโค้ดด้านบนบน GitHub ได้ที่นี่

ในตัวอย่างนี้ เพื่อความง่ายในการใช้งาน navigator.getUserMedia() API ที่เลิกใช้แล้วจึงถูกใช้ เนื่องจากเป็นเพียงตัวเดียวที่ทำงานได้โดยไม่ต้อง polyfilling ใน Chrome รุ่นเสถียรในปัจจุบัน ในแอปที่ใช้งานจริง เราสามารถใช้ adapter.js เพื่อเข้าถึงสตรีมผ่าน navigator.mediaDevices.getUserMedia() API ที่ใหม่กว่า อย่างสม่ำเสมอในเบราว์เซอร์ทั้งหมด แต่สิ่งนี้อยู่นอกเหนือขอบเขตของการสนทนาในปัจจุบัน

WebGL

การใช้ WebGL จาก GWT นั้นไม่แตกต่างกันมากเมื่อเทียบกับการใช้ WebRTC แต่ค่อนข้างน่าเบื่อเล็กน้อยเนื่องจากความซับซ้อนที่แท้จริงของมาตรฐาน OpenGL

แนวทางของเราที่นี่สะท้อนแนวทางที่ตามมาในส่วนก่อนหน้า ผลลัพธ์ของการตัดคำสามารถดูได้ในการใช้งาน GWT WebGL ที่ใช้ใน Picshare ซึ่งสามารถพบได้ที่นี่ และตัวอย่างผลลัพธ์ที่สร้างโดย GWT สามารถดูได้ที่นี่

การเปิดใช้งาน WebGL ด้วยตัวเองไม่ได้ให้ความสามารถด้านกราฟิก 3 มิติแก่เรา ดังที่ Gregg Tavares เขียนไว้ว่า:

สิ่งที่หลายคนไม่รู้ก็คือ WebGL เป็น 2D API ไม่ใช่ 3D API

ต้องดำเนินการเลขคณิต 3 มิติด้วยโค้ดอื่น และแปลงเป็นรูปภาพ 2 มิติสำหรับ WebGL มีไลบรารี GWT ที่ดีสำหรับกราฟิก 3D WebGL สิ่งที่ฉันชอบคือ Parallax แต่สำหรับ Picshare เวอร์ชันแรก เราดำเนินตามเส้นทาง "ทำเอง" มากกว่า โดยเขียนไลบรารีขนาดเล็กสำหรับการเรนเดอร์เมช 3 มิติอย่างง่าย ไลบรารีช่วยให้เรากำหนดกล้องเปอร์สเปคทีฟและจัดการฉากของวัตถุได้ รู้สึกอิสระที่จะตรวจสอบออกที่นี่

การคอมไพล์ไลบรารี Java บุคคลที่สามด้วย GWT

NyARToolkit เป็นพอร์ต Java ล้วนๆ ของ ARToolKit ซึ่งเป็นไลบรารีซอฟต์แวร์สำหรับสร้างแอปพลิเคชันความเป็นจริงเสริม ท่าเรือนี้เขียนโดยนักพัฒนาชาวญี่ปุ่นที่ Nyatla แม้ว่า ARToolKit ดั้งเดิมและเวอร์ชัน Nyatla จะแตกต่างกันบ้างตั้งแต่พอร์ตดั้งเดิม แต่ NyARToolkit ยังคงได้รับการบำรุงรักษาและปรับปรุงอย่างแข็งขัน

AR ที่ใช้ Marker เป็นสาขาเฉพาะและต้องใช้ความสามารถด้านการมองเห็นด้วยคอมพิวเตอร์ การประมวลผลภาพดิจิทัล และคณิตศาสตร์ ดังที่เห็นได้ชัดเจนในที่นี้:

ทำซ้ำจากเอกสารประกอบ ARToolKit

ทำซ้ำจากเอกสารประกอบ ARToolKit

อัลกอริธึมทั้งหมดที่ใช้โดยชุดเครื่องมือได้รับการจัดทำเป็นเอกสารและเข้าใจดี แต่การเขียนใหม่ตั้งแต่ต้นนั้นเป็นกระบวนการที่ใช้เวลานานและมีแนวโน้มที่จะเกิดข้อผิดพลาด ดังนั้นจึงควรใช้ชุดเครื่องมือที่มีอยู่และผ่านการพิสูจน์แล้ว เช่น ARToolKit น่าเสียดายที่เมื่อกำหนดเป้าหมายเว็บไม่มีสิ่งนั้น ชุดเครื่องมือขั้นสูงที่ทรงพลังที่สุดไม่มีการใช้งานใน JavaScript ซึ่งเป็นภาษาที่ใช้สำหรับจัดการเอกสารและข้อมูล HTML เป็นหลัก นี่คือจุดที่ GWT ได้พิสูจน์จุดแข็งอันล้ำค่าของมัน ทำให้เราสามารถแปลง NyARToolkit เป็น JavaScript และใช้ในเว็บแอปพลิเคชันที่ยุ่งยากเพียงเล็กน้อย

รวบรวมกับ GWT

เนื่องจากโปรเจ็กต์ GWT เป็นโปรเจ็กต์ Java โดยพื้นฐานแล้ว การใช้ NyARToolkit จึงเป็นเพียงแค่การนำเข้าไฟล์ต้นทางในพาธต้นทางของคุณ อย่างไรก็ตาม โปรดทราบว่าเนื่องจากการถ่ายทอดโค้ด GWT เป็น JavaScript ทำได้ที่ระดับซอร์สโค้ด คุณต้องมีแหล่งที่มาของ NyARToolkit ไม่ใช่แค่ JAR ที่มีคลาสที่คอมไพล์แล้ว

ห้องสมุดที่ใช้โดย Picshare สามารถพบได้ที่นี่ ขึ้นอยู่กับแพ็คเกจที่พบใน lib/src และ lib/src.markersystem จาก NyARToolkit build ที่เก็บถาวรที่นี่เท่านั้น เราต้องคัดลอกและนำเข้าแพ็คเกจเหล่านี้ไปยังโครงการ GWT ของเรา

เราควรแยกแพ็คเกจบุคคลที่สามเหล่านี้ออกจากการใช้งานของเราเอง แต่เพื่อดำเนินการ "GWT-ization" ของ NyARToolkit เราต้องจัดเตรียมไฟล์การกำหนดค่า XML ที่แจ้งคอมไพเลอร์ GWT ว่าจะค้นหาแหล่งที่มาได้ที่ไหน ในแพ็คเกจ jp.nyatla.nyartoolkit เราเพิ่มไฟล์ NyARToolkit.gwt.xml

 <module> <source path="core" /> <source path="detector" /> <source path="nyidmarker" /> <source path="processor" /> <source path="psarplaycard" /> <source path="markersystem" /> </module>

ในแพ็คเกจหลักของเรา com.jooink.gwt.nyartoolkit เราสร้างไฟล์การกำหนดค่าหลัก GWT_NyARToolKit.gwt.xml และสั่งให้คอมไพเลอร์รวมซอร์สของ Nyatla ใน classpath โดยการสืบทอดจากไฟล์ XML:

 <inherits name='jp.nyatla.nyartoolkit.NyARToolkit'/>

ค่อนข้างง่ายจริงๆ ในกรณีส่วนใหญ่ นี่ก็เพียงพอแล้ว แต่น่าเสียดายที่เรายังไม่เสร็จสิ้น หากเราพยายามคอมไพล์หรือดำเนินการผ่านโหมด Super Dev ในขั้นตอนนี้ เราพบข้อผิดพลาดที่ระบุ ค่อนข้างน่าประหลาดใจ:

 No source code is available for type java.io.InputStream; did you forget to inherit a required module?

เหตุผลก็คือ NyARToolkit (นั่นคือไลบรารี Java ที่มีไว้สำหรับโปรเจ็กต์ Java) ใช้คลาสของ JRE ที่ Emulated JRE ของ GWT ไม่รองรับ เราได้พูดถึงเรื่องนี้สั้น ๆ ในโพสต์ก่อนหน้านี้

ในกรณีนี้ ปัญหาอยู่ที่ InputStream และคลาส IO ที่เกี่ยวข้อง เมื่อมันเกิดขึ้น เราไม่จำเป็นต้องใช้คลาสเหล่านี้ส่วนใหญ่ แต่เราจำเป็นต้องจัดเตรียมการนำไปใช้งานกับคอมไพเลอร์ เราสามารถใช้เวลามากมายในการลบข้อมูลอ้างอิงเหล่านี้ออกจากแหล่ง NyARToolkit ด้วยตนเอง แต่นั่นคงจะเป็นเรื่องที่บ้ามาก GWT ให้โซลูชันที่ดีกว่าแก่เรา: จัดเตรียมการใช้งานคลาสที่ไม่สนับสนุนของเราเองผ่านแท็ก XML <super-source>

<super-source>

ตามที่อธิบายไว้ในเอกสารอย่างเป็นทางการ:

แท็ก <super-source> สั่งให้คอมไพเลอร์ทำการรูทเส้นทางต้นทางอีกครั้ง สิ่งนี้มีประโยชน์สำหรับกรณีที่คุณต้องการใช้ Java API ที่มีอยู่ซ้ำสำหรับโปรเจ็กต์ GWT แต่แหล่งที่มาดั้งเดิมไม่พร้อมใช้งานหรือไม่สามารถแปลได้ สาเหตุทั่วไปคือการจำลองส่วนหนึ่งของ JRE ที่ GWT ไม่ได้ใช้งาน

ดังนั้น <super-source> คือสิ่งที่เราต้องการอย่างแท้จริง

เราสามารถสร้างไดเร็กทอรี jre ในโปรเจ็กต์ GWT ซึ่งเราสามารถใส่การใช้งานสำหรับคลาสที่ทำให้เรามีปัญหา:

 java.io.FileInputStream java.io.InputStream java.io.InputStreamReader java.io.StreamTokenizer java.lang.reflect.Array java.nio.ByteBuffer java.nio.ByteOrder

ทั้งหมดนี้ ยกเว้น java.lang.reflect.Array ไม่ได้ใช้งานจริงๆ ดังนั้นเราจึงต้องการการใช้งานที่โง่เขลาเท่านั้น ตัวอย่างเช่น FileInputStream ของเราอ่านดังนี้:

 package java.io; import java.io.InputStream; import com.google.gwt.user.client.Window; public class FileInputStream extends InputStream { public FileInputStream(String filename) { Window.alert("WARNING, FileInputStream created with filename: " + filename ); } @Override public int read() { return 0; } }

คำสั่ง Window.alert ในตัวสร้างมีประโยชน์ในระหว่างการพัฒนา แม้ว่าเราต้องสามารถคอมไพล์คลาสได้ แต่เราต้องการให้แน่ใจว่าไม่เคยใช้งานจริง ดังนั้นสิ่งนี้จะเตือนเราในกรณีที่คลาสถูกใช้โดยไม่ได้ตั้งใจ

java.lang.reflect.Array ถูกใช้จริงโดยโค้ดที่เราต้องการ ดังนั้นจึงจำเป็นต้องมีการใช้งานที่ไม่สมบูรณ์ นี่คือรหัสของเรา:

 package java.lang.reflect; import jp.nyatla.nyartoolkit.core.labeling.rlelabeling.NyARRleLabelFragmentInfo; import jp.nyatla.nyartoolkit.markersystem.utils.SquareStack; import com.google.gwt.user.client.Window; public class Array { public static <T> Object newInstance(Class<T> c, int n) { if( NyARRleLabelFragmentInfo.class.equals(c)) return new NyARRleLabelFragmentInfo[n]; else if(SquareStack.Item.class.equals(c)) return new SquareStack.Item[n]; else Window.alert("Creating array of size " + n + " of " + c.toString()); return null; } }

ตอนนี้ถ้าเราวาง <super-source path="jre"/> ไว้ในไฟล์โมดูล GWT_NyARToolkit.gwt.xml เราก็สามารถคอมไพล์และใช้ NyARToolkit ในโครงการของเราได้อย่างปลอดภัย!

ติดกาวทั้งหมดเข้าด้วยกันด้วย GWT

ตอนนี้เราอยู่ในตำแหน่งที่มี:

• WebRTC ซึ่งเป็นเทคโนโลยีที่สามารถรับสตรีมจากเว็บแคมและแสดงในแท็ก <video>
• WebGL ซึ่งเป็นเทคโนโลยีที่สามารถจัดการกราฟิกที่เร่งด้วยฮาร์ดแวร์ใน HTML <canvas>
• NyARToolkit ซึ่งเป็นไลบรารี Java ที่สามารถถ่ายภาพ (เป็นอาร์เรย์ของพิกเซล) ค้นหาเครื่องหมาย และหากพบ จะให้เมทริกซ์การแปลงที่กำหนดตำแหน่งของเครื่องหมายในพื้นที่ 3 มิติอย่างเต็มที่

ความท้าทายในตอนนี้คือการรวมเทคโนโลยีเหล่านี้เข้าด้วยกัน

เราจะไม่ลงรายละเอียดเกี่ยวกับวิธีการทำสิ่งนี้ให้สำเร็จ แต่แนวคิดพื้นฐานคือการใช้ภาพวิดีโอเป็นพื้นหลังของฉากของเรา (พื้นผิวที่ใช้กับระนาบ "ไกล" ในภาพด้านบน) และสร้างโครงสร้างข้อมูล 3 มิติ ทำให้เราสามารถฉายภาพนี้ขึ้นสู่อวกาศโดยใช้ผลลัพธ์จาก NyARToolkit

โครงสร้างนี้ทำให้เรามีโครงสร้างที่เหมาะสมในการโต้ตอบกับไลบรารีของ NyARToolkit สำหรับการรู้จำเครื่องหมาย และวาดแบบจำลอง 3 มิติบนฉากของกล้อง

การทำให้สตรีมของกล้องใช้งานได้นั้นค่อนข้างยุ่งยาก ข้อมูลวิดีโอสามารถวาดไปยังองค์ประกอบ <video> เท่านั้น องค์ประกอบ HTML5 <video> เป็นแบบทึบแสง และไม่อนุญาตให้เราดึงข้อมูลภาพโดยตรง ดังนั้นเราจึงถูกบังคับให้คัดลอกวิดีโอไปยัง <canvas> ระดับกลาง ดึงข้อมูลภาพ แปลงเป็นอาร์เรย์ของพิกเซล และสุดท้าย ดันไปที่วิธี Sensor.update() ของ NyARToolkit จากนั้น NyARToolkit จะทำหน้าที่ระบุตัวทำเครื่องหมายในภาพ และส่งคืนเมทริกซ์การแปลงที่สอดคล้องกับตำแหน่งในพื้นที่ 3 มิติของเรา

ด้วยองค์ประกอบเหล่านี้ เราสามารถจัดวางวัตถุสังเคราะห์ไว้เหนือมาร์กเกอร์ ในแบบ 3 มิติ ในสตรีมวิดีโอสดได้! ด้วยประสิทธิภาพสูงของ GWT เราจึงมีทรัพยากรในการคำนวณมากมาย เราจึงสามารถใช้เอฟเฟกต์วิดีโอบนผืนผ้าใบได้ เช่น ซีเปียหรือเบลอ ก่อนที่จะใช้เป็นพื้นหลังสำหรับฉาก WebGL

รหัสย่อต่อไปนี้อธิบายแกนหลักของกระบวนการ:

 // given a <canvas> drawing context with appropriate width and height // and a <video> where the mediastream is drawn ... // for each video frame // draw the video frame on the canvas ctx.drawImage(video, 0, 0, w, h); // extract image data from the canvas ImageData capt = ctx.getImageData(0, 0, w, h); // convert the image data in a format acceptable by NyARToolkit ImageDataRaster input = new ImageDataRaster(capt); // push the image in to a NyARSensor sensor.update(input); // update the NyARMarkerSystem with the sensor nyar.update(sensor); // the NyARMarkerSystem contains information about the marker patterns and is able to detect them. // After the call to update, all the markers are detected and we can get information for each // marker that was found. if( nyar.isExistMarker( marker_id ) ) { NyARDoubleMatrix44 m = nyar.getMarkerMatrix(marker_id); // m is now the matrix representing the pose (position and orientation) of // the marker in the scene, so we can use it to superimpose an object of // our choice ... } ...

ด้วยเทคนิคนี้ เราสามารถสร้างผลลัพธ์เช่นนี้:

นี่คือกระบวนการที่เราเคยใช้ในการสร้าง Picshare โดยที่คุณได้รับเชิญให้พิมพ์เครื่องหมายหรือแสดงบนโทรศัพท์มือถือของคุณ และเล่นกับ AR ที่ใช้เครื่องหมายในเบราว์เซอร์ของคุณ สนุก!

ข้อสังเกตสุดท้าย

Picshare เป็นโครงการสัตว์เลี้ยงระยะยาวสำหรับเราที่ Jooink การใช้งานครั้งแรกเกิดขึ้นไม่กี่ปี และมันก็เร็วพอที่จะสร้างความประทับใจได้ ที่ลิงก์นี้ คุณสามารถดูการทดลองก่อนหน้านี้ของเรา ซึ่งรวบรวมไว้ในปี 2012 และไม่เคยแตะต้องเลย โปรดทราบว่าในตัวอย่างมี <video> เพียงรายการเดียว อีกสองหน้าต่างเป็นองค์ประกอบ <canvas> ที่แสดงผลลัพธ์ของการประมวลผล

GWT นั้นทรงพลังมากพอแม้ในปี 2012 ด้วยการเปิดตัว GWT 2.8 เราจึงได้รับเลเยอร์ความสามารถในการทำงานร่วมกันที่ปรับปรุงดีขึ้นมากด้วย JsInterop ซึ่งช่วยเพิ่มประสิทธิภาพเพิ่มเติม นอกจากนี้ เพื่อเป็นการเฉลิมฉลองให้กับหลายๆ คน เรายังได้รับการพัฒนาและสภาพแวดล้อมการดีบักที่ดีขึ้นมาก โหมด Super Dev ใช่แล้วและรองรับ Java 8

เรากำลังรอคอย GWT 3.0!