สร้าง "Gummy Bears" - ไฟล์ HTML เดียวที่สมบูรณ์ในตัวเอง (ใช้ three.js จาก CDN เป็นเพียง dependency เดียว): ลูกอมเยลลี่หมีโปร่งแสงจำนวนหนึ่งวางอยู่บนโต๊ะสีขาว ที่คุณสามารถจับ ยืด บีบ ขว้าง และเทได้ ลูกอมเยลลี่หมี - รูปทรงคลาสสิกของลูกอมเยลลี่หมี: หัวกลมพร้อมหูสองข้าง จมูกสั้น ลำตัวอ้วนกลม แขนและขาสั้นตาเล็ก และจมูกที่หล่อขึ้นรูป - ทุกส่วนเชื่อมต่อกันอย่างเรียบเนียน - สร้างลำตัวเป็นพื้นผิวโดยนัย (implicit surface เช่น metaballs / marching cubes) ไม่ใช่ทรงกลมแยกชิ้น - วัสดุ: เยลลี่จริง โปร่งแสงมีการหักเหและการส่งผ่านแสง สีดูดซับลึกขึ้นในส่วนที่หนา มีเคลือบเงาใส (clearcoat) พร้อมไฮไลท์คมชัด - สี: เชอร์รี่แดง ส้ม เหลืองมะนาว เขียวแอปเปิ้ล และสับปะรดใส - เงาสีอ่อนใต้ลูกอมแต่ละตัว โดยสีเงาจะเพี้ยนตามสีของลูกอมตัวนั้นๆ ฟิสิกส์ (นี่คือจุดสำคัญทั้งหมด - ต้องให้ความรู้สึกเหมือนวุ้น ไม่ใช่พลาสติก) - ลูกอมแต่ละตัวเป็นวัตถุอ่อนตัว (soft body): จุดมวลสำหรับหัว หู จมูก ลำตัว ท้อง มือ และเท้า ซึ่งยึดกันด้วยวิธี shape matching ที่รักษาปริมาตร - แขน ขา และคอ ถูกเรนเดอร์เป็นเส้นยืดหยุ่นระหว่างจุด โดยจะบางลงเมื่อยืดออก - จับส่วนใดก็ได้แล้วดึง: มันจะยืดเหมือนยาง ส่วนที่เหลือของลูกอมจะเอียงตาม เมื่อปล่อยมือมันจะดีดกลับพร้อมการสั่นที่ค่อยๆ เบาลง - ดึงหัวขึ้น: คอยืดออก ลำตัวตามมา เมื่อปล่อยมือลูกอมจะแบนและกระโดด - กดหัวลง: ลูกอมจะแบนราด บวมออกด้านข้าง แล้วดีดตัวกลับขึ้นมา - ขว้างลูกอม: มันจะบินไป แบนเมื่อตกกระทบพื้น กระเด้ง และผลักลูกอมตัวอื่นให้พ้นทาง - ลูกอมชนกันเองและไม่ทะลุผ่านซึ่งกันและกัน - ลูกอมที่อยู่นิ่งจะกระโดดเล็กๆ แบบสุ่มพร้อมการยืดและบีบตัว - ปุ่ม "Pour more bears" จะเทลูกอมจากด้านบนลงมาทับกันเป็นกองที่โยกเยกและสั่นไหว UI - สไตล์หน้าสินค้าแบบบรรณาธิการบนพื้นหลังสีขาว ชื่อเรื่องใหญ่แบบเอียง serif "Gummy / Bears." คำโปรยสั้น การ์ดมินิมอลด้านขวาที่มีตัวอย่างสีรสต่างๆ แถบเลื่อนความโยกเยก ตัวเลขแสดง "Stretch" และ "Bounces" แบบเรียลไทม์ และปุ่ม "Pour more bears" - เคอร์เซอร์วงกลมแบบละเอียดที่จะขยายขึ้นขณะจับ - ACES tone mapping, การสะท้อนจากสภาพแวดล้อม, แสงหลักและแสงหลังแบบนุ่ม เรนเดอร์ลื่นไหลที่ 60fps
