C · Creative / Hero — three.js Lab

Pattern C

เอฟเฟกต์ "wow" หน้า landing

กลุ่มงาน creative/marketing — particle หลายหมื่นจุดเขียนด้วย shader เอง แล้วทำให้เรืองแสงด้วย post-processing นี่คือสิ่งที่ทำให้เว็บดู "แพง"

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

Points + ShaderMaterial — particle ที่ขยับ/ระบายสีด้วย GLSL ของเราเอง (รันบน GPU)
EffectComposer + UnrealBloomPass — pipeline เรนเดอร์หลายชั้น ทำ bloom (เรืองแสง)
blending แบบ additive + animate ด้วย uniform uTime
gotcha: มี post-processing แล้วให้ตั้ง renderer antialias:false แล้วใส่ FXAAPass เป็น pass สุดท้ายแทน — เดโมนี้ทำแบบนั้น

ของแพง: EffectComposer ไม่ share scene ระหว่าง pass — แต่ละ pass ที่เพิ่มอาจ render ฉากใหม่ทั้งฉาก. งานจริงบน WebGL ใช้ไลบ pmndrs/postprocessing (รวม effect เป็น pass เดียว) หรือบน WebGPU ใช้ RenderPipeline (r183+)

เอาไปใช้ตรงไหน

hero section, background interactive, intro animation, data-art — ทุกที่ที่อยากได้ความว้าว

galaxy

renderer.info (สด)

draw calls–

triangles–

geometries–

textures–