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

