F · WebGPU + TSL — three.js Lab

Pattern F · production-ready 2026

ทิศทางที่กราฟิกเว็บกำลังไป

WebGPU = API กราฟิกรุ่นใหม่ (เร็ว/ขนานกว่า WebGL). three.js ใช้ TSL (Three Shading Language) เขียน shader เป็น "node graph" ใน JavaScript — ไม่ต้องเขียน GLSL ดิบ และ compile ออกได้ทั้ง WebGPU และ WebGL2

เทคนิคที่ได้

WebGPURenderer — เรนเดอร์ด้วย WebGPU, ถ้าเครื่องไม่รองรับ fallback เป็น WebGL2 อัตโนมัติ
TSL — แต่งสี/ผิว/ตำแหน่งด้วยฟังก์ชัน JS (color, mix, sin, time, positionLocal) ผูกกับ material.colorNode
MeshStandardNodeMaterial — วัสดุ PBR ที่ขับด้วย node

พร้อมใช้แล้วจริง (อัปเดต 2026)

WebGPU เป็น baseline ทุกเบราว์เซอร์หลักแล้ว (Chrome/Edge 2023, Firefox 141 ก.ค. 2025, Safari 26 ก.ย. 2025) — coverage ~95% ที่เหลือ fallback WebGL2 อัตโนมัติ. ตั้งแต่ r171 สลับ WebGLRenderer → WebGPURenderer แทบบรรทัดเดียว. ของหนักที่ปลดล็อก: compute shader ย้าย particle ไป GPU (สเกลล้านจุด) + RenderPipeline (r183) ทำ post-processing แบบ node. มุมล่างซ้ายบอกว่าตอนนี้รันด้วย backend ไหน

ตรวจ backend…

TSL animated material