แมงกะพรุนทะเลลึกสีทอง

สร้างเว็บเพจแมงกะพรุนแบบอินเทอร์แอกทีฟด้วย Three.js โดยมีฉากหลังเป็นมหาสมุทรที่สว่างตรงกลางและสีน้ำเงินเข้มบริเวณขอบ แสดงแมงกะพรุนโปร่งแสงสีทอง 6–10 ตัว หมุนช้า ๆ และหด-คลายตัวพลางลอยขึ้นด้านบน โดยต้องมองเห็นอย่างน้อย 3 ตัวตลอดเวลา และแมงกะพรุนที่ข้ามขอบบนต้องกลับเข้ามาจากด้านล่าง แมงกะพรุนแต่ละตัวมีลายรัศมีสีส้มและสีขาวครีม จุดเรืองแสงภายใน และขอบโปร่งแสงคมชัด โดยมองเห็นแขนปากแบบระบายผ่านร่มได้ เมื่อร่มหดตัว ขอบร่มต้องบานออกอย่างเห็นได้ชัด

แมงกะพรุนแต่ละตัวประกอบด้วยชั้นร่มด้านในและด้านนอก กระโปรงนุ่ม ๆ หนวดเส้นเล็กเท่าเส้นผม 20 เส้น และแขนปากแบบระบาย 4 แขน ร่มหดตัวเป็นระยะ ขณะที่กระโปรง หนวด และแขนปากเคลื่อนไหวตามด้วยระบบฟิสิกส์สปริง Verlet ที่เสถียร — ห้ามใช้แอนิเมชันที่บันทึกไว้ล่วงหน้า การเคลื่อนไหวทั้งหมดต้องใช้เวลาฟิสิกส์ร่วมกันเพียงชุดเดียว จำกัดช่วงเวลาระหว่างเฟรมที่ยาวเกินไป และใช้ substep ให้เพียงพอเพื่อไม่ให้การจำลองคลาดเคลื่อนหรือเลื่อนตำแหน่งเมื่อทำงานต่อเนื่องเป็นเวลานาน

เพิ่มลวดลายแสงคอสติกนุ่ม ๆ ม่านแสงเชิงปริมาตรจำลอง และแพลงก์ตอนระยิบระยับในฉากหลัง เรนเดอร์ด้วย soft bloom และ ACES tone mapping เพื่อให้ได้บรรยากาศแสงใต้ทะเลลึก จัดการการเรียงลำดับชั้นโปร่งใสและ anti-aliasing ให้เหมาะสม เพื่อให้หนวดต่อเนื่องและคมชัด เมื่อเมาส์เข้าใกล้แมงกะพรุน จังหวะหด-คลายต้องเร็วขึ้น แสงเรืองต้องเข้มขึ้น และหนวดได้รับแรงผลักเล็กน้อย รองรับการลากเมาส์เพื่อหมุนมุมมองและใช้ล้อเลื่อนเพื่อซูม โดยจำกัดระยะมองและมุมก้มเงย เปลี่ยนแมงกะพรุนสีทองเป็นปลาน้ำร้อนเรืองแสงสีเขียวอมฟ้า 15–20 ตัว คงฟิสิกส์สปริง Verlet สำหรับการเคลื่อนไหวของหางและครีบ และให้ฝูงปลาว่ายวนช้า ๆ ผ่านฉากพร้อมหลบหลีกการชนกัน ใช้ WebGL2 กับโมเดลและวัสดุที่สร้างแบบ procedural ห้ามใช้ WebGPU โมเดลภายนอก เสียง แผงควบคุม และการสลับหลายฉาก ส่งมอบเป็นเว็บเพจแบบสแตติกที่รันได้โดยตรง โดยรวม dependencies ไว้ในเครื่อง ปฏิบัติตามแนวทางด้านภาพและฟิสิกส์ของ Aurelia และเก็บข้อมูลระบุแหล่งที่มาและหมายเหตุสัญญาอนุญาตสำหรับโค้ดและอัลกอริทึมทั้งหมดที่ใช้ หากนำผลงานต้นฉบับหรืออัลกอริทึมคอสติกของ Dave Hoskins มาใช้ซ้ำ ให้คงการระบุแหล่งที่มาตามสัญญาอนุญาตไว้ด้วย

สร้างเว็บเพจแมงกะพรุนแบบอินเทอร์แอกทีฟด้วย Three.js โดยมีฉากหลังเป็นมหาสมุทรที่สว่างตรงกลางและสีน้ำเงินเข้มบริเวณขอบ แสดงแมงกะพรุนโปร่งแสงสีทอง 6–10 ตัว หมุนช้า ๆ และหด-คลายตัวพลางลอยขึ้นด้านบน โดยต้องมองเห็นอย่างน้อย 3 ตัวตลอดเวลา และแมงกะพรุนที่ข้ามขอบบนต้องกลับเข้ามาจากด้านล่าง แมงกะพรุนแต่ละตัวมีลายรัศมีสีส้มและสีขาวครีม จุดเรืองแสงภายใน และขอบโปร่งแสงคมชัด โดยมองเห็นแขนปากแบบระบายผ่านร่มได้ เมื่อร่มหดตัว ขอบร่มต้องบานออกอย่างเห็นได้ชัด

แมงกะพรุนแต่ละตัวประกอบด้วยชั้นร่มด้านในและด้านนอก กระโปรงนุ่ม ๆ หนวดเส้นเล็กเท่าเส้นผม 20 เส้น และแขนปากแบบระบาย 4 แขน ร่มหดตัวเป็นระยะ ขณะที่กระโปรง หนวด และแขนปากเคลื่อนไหวตามด้วยระบบฟิสิกส์สปริง Verlet ที่เสถียร — ห้ามใช้แอนิเมชันที่บันทึกไว้ล่วงหน้า การเคลื่อนไหวทั้งหมดต้องใช้เวลาฟิสิกส์ร่วมกันเพียงชุดเดียว จำกัดช่วงเวลาระหว่างเฟรมที่ยาวเกินไป และใช้ substep ให้เพียงพอเพื่อไม่ให้การจำลองคลาดเคลื่อนหรือเลื่อนตำแหน่งเมื่อทำงานต่อเนื่องเป็นเวลานาน

เพิ่มลวดลายแสงคอสติกนุ่ม ๆ ม่านแสงเชิงปริมาตรจำลอง และแพลงก์ตอนระยิบระยับในฉากหลัง เรนเดอร์ด้วย soft bloom และ ACES tone mapping เพื่อให้ได้บรรยากาศแสงใต้ทะเลลึก จัดการการเรียงลำดับชั้นโปร่งใสและ anti-aliasing ให้เหมาะสม เพื่อให้หนวดต่อเนื่องและคมชัด เมื่อเมาส์เข้าใกล้แมงกะพรุน จังหวะหด-คลายต้องเร็วขึ้น แสงเรืองต้องเข้มขึ้น และหนวดได้รับแรงผลักเล็กน้อย รองรับการลากเมาส์เพื่อหมุนมุมมองและใช้ล้อเลื่อนเพื่อซูม โดยจำกัดระยะมองและมุมก้มเงย ทำให้แมงกะพรุนแต่ละตัวคลิกได้ เมื่อคลิก ให้หยุดการเคลื่อนไหวและแสดงการ์ดข้อมูลที่มีชื่อชนิดพันธุ์ ความลึกของถิ่นอาศัย และเกร็ดความรู้สั้น ๆ 2 ข้อสำหรับผู้ชมทั่วไป ใช้ WebGL2 กับโมเดลและวัสดุที่สร้างแบบ procedural ห้ามใช้ WebGPU โมเดลภายนอก เสียง แผงควบคุม และการสลับหลายฉาก ส่งมอบเป็นเว็บเพจแบบสแตติกที่รันได้โดยตรง โดยรวม dependencies ไว้ในเครื่อง ปฏิบัติตามแนวทางด้านภาพและฟิสิกส์ของ Aurelia และเก็บข้อมูลระบุแหล่งที่มาและหมายเหตุสัญญาอนุญาตสำหรับโค้ดและอัลกอริทึมทั้งหมดที่ใช้ หากนำผลงานต้นฉบับหรืออัลกอริทึมคอสติกของ Dave Hoskins มาใช้ซ้ำ ให้คงการระบุแหล่งที่มาตามสัญญาอนุญาตไว้ด้วย