Open Sea — มหาสมุทร WebGPU แบบเรียลไทม์
มหาสมุทร WebGPU แบบเรียลไทม์ที่เรนเดอร์ด้วย Three.js TSL: คลื่น Gerstner รายละเอียดพื้นผิวขนาดเล็กแบบ FBM ท้องฟ้าแบบสเปกตรัม การควบคุมสภาพทะเลและช่วงเวลาของวัน และโหมดล่องลอยแบบไม่ต้องควบคุม เดโมนี้สร้างโดย Kimi K3
Loading preview...
149725 views
เริ่มด้วยพรอมป์ต์นี้
เดโมมหาสมุทร WebGPU แบบครบในหน้าเดียว พร้อมการควบคุมกล้องแบบโคจร แถบเลื่อนสภาพทะเลและช่วงเวลาของวัน และโหมดล่องลอย
ลองใช้ Websites Agentสร้างเดโมมหาสมุทรแบบเรียลไทม์ที่ครบในตัวชื่อ 'Open Sea' ด้วย WebGPU และ Three.js TSL แสดงคลื่น Gerstner พร้อมนอร์มัลรายละเอียดพื้นผิวขนาดเล็กแบบ FBM และท้องฟ้าแบบสเปกตรัมที่เปลี่ยนไปตามช่วงเวลาของวัน รองรับการลากเพื่อหมุนกล้องแบบโคจรและเลื่อนเพื่อซูม มีแผง HUD พร้อมแถบเลื่อนสภาพทะเลและช่วงเวลาของวัน รวมถึงการแสดงค่า FPS แบบเรียลไทม์ และโหมดล่องลอยที่ให้กล้องเคลื่อนอย่างนุ่มนวลได้เอง ให้ทุกอย่างอยู่ในหน้าสแตติกหน้าเดียวโดยไม่ต้องมีขั้นตอน build แสดงสถานะกำลังเริ่มต้นอย่างสวยงามขณะ renderer เริ่มทำงาน และรองรับการลดความสามารถอย่างเหมาะสมเมื่อไม่มี WebGPU
เปลี่ยนให้เป็นพายุยามค่ำคืน
เปลี่ยนจากทะเลสงบยามบ่ายเป็นพายุใต้แสงจันทร์ที่มีคลื่นใหญ่ขึ้น เส้นฝน และฟ้าแลบเป็นครั้งคราว
ลองใช้ Websites Agentสร้างเดโมมหาสมุทรแบบเรียลไทม์ที่ครบในตัวชื่อ 'Open Sea — Night Storm' ด้วย WebGPU และ Three.js TSL แสดงคลื่น Gerstner พร้อมนอร์มัลรายละเอียดพื้นผิวขนาดเล็กแบบ FBM และท้องฟ้าแบบสเปกตรัมที่เปลี่ยนไปตามช่วงเวลาของวัน รองรับการลากเพื่อหมุนกล้องแบบโคจรและเลื่อนเพื่อซูม มีแผง HUD พร้อมแถบเลื่อนความรุนแรงของพายุและความสูงคลื่น รวมถึงการแสดงค่า FPS แบบเรียลไทม์ และโหมดล่องลอยที่ให้กล้องเคลื่อนอย่างนุ่มนวลได้เอง ให้ทุกอย่างอยู่ในหน้าสแตติกหน้าเดียวโดยไม่ต้องมีขั้นตอน build แสดงสถานะกำลังเริ่มต้นอย่างสวยงามขณะ renderer เริ่มทำงาน และรองรับการลดความสามารถอย่างเหมาะสมเมื่อไม่มี WebGPU
เพิ่มเรือใบที่บังคับได้
วางเรือใบขนาดเล็กบนคลื่น ให้ผู้ชมบังคับด้วยแป้นพิมพ์ได้ขณะเรือแล่นตามคลื่น
ลองใช้ Websites Agentสร้างเดโมมหาสมุทรแบบเรียลไทม์ที่ครบในตัวชื่อ 'Open Sea' ด้วย WebGPU และ Three.js TSL แสดงคลื่น Gerstner พร้อมนอร์มัลรายละเอียดพื้นผิวขนาดเล็กแบบ FBM และท้องฟ้าแบบสเปกตรัมที่เปลี่ยนไปตามช่วงเวลาของวัน เพิ่มเรือใบแบบ low-poly ที่ลอยตามคลื่นด้วยแรงลอยตัวอย่างง่าย และให้ผู้ชมบังคับด้วย WASD โดยกล้องสามารถติดตามเรือหรือหมุนแบบโคจรได้อย่างอิสระ รองรับการลากเพื่อหมุนกล้องแบบโคจรและเลื่อนเพื่อซูม มีแผง HUD พร้อมแถบเลื่อนสภาพทะเลและช่วงเวลาของวัน รวมถึงการแสดงค่า FPS แบบเรียลไทม์ และโหมดล่องลอยที่ให้กล้องเคลื่อนอย่างนุ่มนวลได้เอง ให้ทุกอย่างอยู่ในหน้าสแตติกหน้าเดียวโดยไม่ต้องมีขั้นตอน build แสดงสถานะกำลังเริ่มต้นอย่างสวยงามขณะ renderer เริ่มทำงาน และรองรับการลดความสามารถอย่างเหมาะสมเมื่อไม่มี WebGPU
เพิ่มทางเลือกสำรอง WebGL2
ตรวจสอบการรองรับ WebGPU ตั้งแต่เริ่มต้น และใช้เวอร์ชัน WebGL2 ที่เบากว่าเพื่อให้เดโมทำงานได้ในเบราว์เซอร์สมัยใหม่ทุกตัว
ลองใช้ Websites Agentสร้างเดโมมหาสมุทรแบบเรียลไทม์ที่ครบในตัวชื่อ 'Open Sea' ซึ่งตรวจสอบการรองรับ WebGPU เมื่อเริ่มต้น และสลับไปใช้ renderer WebGL2 ที่เบากว่าเมื่อไม่มี WebGPU โดยคงฉากและการควบคุมแบบเดียวกันไว้ในทั้งสองกรณี แสดงคลื่น Gerstner พร้อมนอร์มัลรายละเอียดพื้นผิวขนาดเล็กแบบ FBM และท้องฟ้าแบบสเปกตรัมที่เปลี่ยนไปตามช่วงเวลาของวัน รองรับการลากเพื่อหมุนกล้องแบบโคจรและเลื่อนเพื่อซูม มีแผง HUD พร้อมแถบเลื่อนสภาพทะเลและช่วงเวลาของวัน รวมถึงการแสดงค่า FPS แบบเรียลไทม์ และโหมดล่องลอยที่ให้กล้องเคลื่อนอย่างนุ่มนวลได้เอง ให้ทุกอย่างอยู่ในหน้าสแตติกหน้าเดียวโดยไม่ต้องมีขั้นตอน build แสดงสถานะกำลังเริ่มต้นอย่างสวยงามขณะ renderer เริ่มทำงาน และให้เลย์เอาต์บนมือถือยุบ HUD เป็นแผงด้านล่างพร้อมการหมุนกล้องด้วยการสัมผัส