WebGL · signed distance fields · sphere tracing
3D จากสมการล้วนๆ
Raymarching คือเทคนิค render 3D โดยไม่มี mesh เลย — ส่งแสงออกจากกล้อง แล้ว "เดิน" ทีละก้าวจนชนวัตถุที่นิยามด้วย Signed Distance Field (SDF) ทุกอย่างเกิดในนั้น fragment shader ทีละพิกเซล บน GPU. ขยับเมาส์บนภาพเพื่อหมุนกล้อง.
—
เบราว์เซอร์/เครื่องนี้เปิด WebGL ไม่ได้ หรือ shader compile ล้มเหลว
ลองเปิดใน Chrome/Edge/Firefox/Safari รุ่นใหม่
ลองเปิดใน Chrome/Edge/Firefox/Safari รุ่นใหม่
เลื่อนเมาส์บนภาพ = หมุนกล้อง · สลับ scene ได้ทันที · ตั้ง "ลดการเคลื่อนไหว" = ภาพนิ่ง (ไม่วนลูป)
Raymarching ทำงานอย่างไร?
แต่ละพิกเซล = 1 ray จากกล้อง → วนลูป
แต่ละพิกเซล = 1 ray จากกล้อง → วนลูป
sceneSDF(pos) คำนวณระยะจาก ray-tip
ถึงวัตถุที่ใกล้ที่สุด → เดินไปตามระยะนั้น → ทำซ้ำ ~64–80 รอบหรือจนระยะ < 0.001
→ ได้ตำแหน่งชนวัตถุ → คำนวณ normal (gradient ของ SDF) → คิด diffuse + soft shadow + AO
→ ได้สี 1 พิกเซล. ไม่มี mesh, polygon, หรือ texture เลย.