โลกไซไฟด้วยเชเดอร์

สร้างหน้าแลนดิ้งเพจไซไฟที่ขับเคลื่อนด้วยเชเดอร์ โดยนำเสนอเป็นการสาธิต raymarching แบบเรียลไทม์: หน้านี้ไม่ใช้เท็กซ์เจอร์ เมช หรือแอสเซ็ตใด ๆ — ฉากจักรวาลทั้งสี่คำนวณขึ้นทั้งหมดด้วยคณิตศาสตร์ของ fragment shader และค่อย ๆ เปลี่ยนผ่านอย่างต่อเนื่องเมื่อผู้เข้าชมเลื่อนหน้าจอ ฉากแรก Singularity: หลุมดำพร้อมจานพอกพูนมวล โดยอินทิเกรตแสงตามเส้นจีโอเดสิกประมาณ 200 ขั้น ทำให้ด้านไกลของจานโค้งพับข้ามขึ้นมาด้านบน พร้อมเอฟเฟกต์ Doppler beaming เชิงสัมพัทธภาพที่ทำให้ด้านหนึ่งสว่างขึ้น ฉากที่สอง Nebula: สนามความหนาแน่น fBm 4 อ็อกเทฟ ซึ่งได้รับแสงจากตัวอย่าง single-scattering แบบหน้าไปหลังราว 44 จุด ฉากที่สาม Tides: heightfield ของมหาสมุทรจากคลื่นแทรกสอด 8 อ็อกเทฟที่หาได้ด้วยวิธีแบ่งครึ่ง สะท้อนแบบ Fresnel จากท้องฟ้าแสงออโรรา 32 ชั้น ฉากที่สี่ First Light: ภูมิประเทศ multifractal แบบสันนูนที่ sphere trace ไปจนถึงเส้นขอบฟ้ายามรุ่งอรุณ แต่ละบทจับคู่พาดหัวเชิงกวีหนึ่งบรรทัดกับรายการพารามิเตอร์ทางเทคนิคสั้น ๆ (จำนวนตัวอย่าง ขั้นตอนการอินทิเกรต) แถบด้านซ้ายติดตามบทต่าง ๆ พร้อมแถบแสดงความคืบหน้า; HUD ที่มุมจอแสดงฉากปัจจุบัน render buffer อัตราเฟรม และความลึกในการเลื่อน; แถบด้านบนระบุว่า WebGPU · เรียลไทม์ ใช้ตัวอักษรแบบ monospace โทนสีขาวดำตัดด้วยสีส้มเพียงสีเดียว และโอเวอร์เลย์เกรนฟิล์ม การเปลี่ยนผ่านที่ขับเคลื่อนด้วยการเลื่อนต้องทำงานได้จริงและลื่นไหลในทุกเบราว์เซอร์ที่รองรับ WebGPU แทนที่สี่จักรวาลด้วยป่าที่เปลี่ยนผ่านฤดูใบไม้ผลิ ฤดูร้อน ฤดูใบไม้ร่วง และฤดูหนาว โดยคงโครงสร้างการเปลี่ยนผ่านแบบ cross-fade ตามการเลื่อนหน้าจอไว้ กำหนดพาเลตสีและอนุภาคเฉพาะให้แต่ละฤดู (กลีบดอกไม้ หิ่งห้อย ใบไม้ร่วง หิมะ) และเขียนข้อความใหม่ในธีมธรรมชาติ 

สร้างหน้าแลนดิ้งเพจไซไฟที่ขับเคลื่อนด้วยเชเดอร์ โดยนำเสนอเป็นการสาธิต raymarching แบบเรียลไทม์: หน้านี้ไม่ใช้เท็กซ์เจอร์ เมช หรือแอสเซ็ตใด ๆ — ฉากจักรวาลทั้งสี่คำนวณขึ้นทั้งหมดด้วยคณิตศาสตร์ของ fragment shader และค่อย ๆ เปลี่ยนผ่านอย่างต่อเนื่องเมื่อผู้เข้าชมเลื่อนหน้าจอ ฉากแรก Singularity: หลุมดำพร้อมจานพอกพูนมวล โดยอินทิเกรตแสงตามเส้นจีโอเดสิกประมาณ 200 ขั้น ทำให้ด้านไกลของจานโค้งพับข้ามขึ้นมาด้านบน พร้อมเอฟเฟกต์ Doppler beaming เชิงสัมพัทธภาพที่ทำให้ด้านหนึ่งสว่างขึ้น ฉากที่สอง Nebula: สนามความหนาแน่น fBm 4 อ็อกเทฟ ซึ่งได้รับแสงจากตัวอย่าง single-scattering แบบหน้าไปหลังราว 44 จุด ฉากที่สาม Tides: heightfield ของมหาสมุทรจากคลื่นแทรกสอด 8 อ็อกเทฟที่หาได้ด้วยวิธีแบ่งครึ่ง สะท้อนแบบ Fresnel จากท้องฟ้าแสงออโรรา 32 ชั้น ฉากที่สี่ First Light: ภูมิประเทศ multifractal แบบสันนูนที่ sphere trace ไปจนถึงเส้นขอบฟ้ายามรุ่งอรุณ แต่ละบทจับคู่พาดหัวเชิงกวีหนึ่งบรรทัดกับรายการพารามิเตอร์ทางเทคนิคสั้น ๆ (จำนวนตัวอย่าง ขั้นตอนการอินทิเกรต) แถบด้านซ้ายติดตามบทต่าง ๆ พร้อมแถบแสดงความคืบหน้า; HUD ที่มุมจอแสดงฉากปัจจุบัน render buffer อัตราเฟรม และความลึกในการเลื่อน; แถบด้านบนระบุว่า WebGPU · เรียลไทม์ ใช้ตัวอักษรแบบ monospace โทนสีขาวดำตัดด้วยสีส้มเพียงสีเดียว และโอเวอร์เลย์เกรนฟิล์ม การเปลี่ยนผ่านที่ขับเคลื่อนด้วยการเลื่อนต้องทำงานได้จริงและลื่นไหลในทุกเบราว์เซอร์ที่รองรับ WebGPU เพิ่มการปรับประสิทธิภาพสำหรับมือถือ: เมื่อความกว้างต่ำกว่า 768px ให้ลดจำนวนอนุภาคและความละเอียดการเรนเดอร์ ปิดการจัดแสงเชิงปริมาตรที่ใช้ทรัพยากรมากที่สุด และแสดงปุ่มสลับ "โหมดประสิทธิภาพสูง" ที่ผู้เข้าชมเปิดใช้เองได้