ห้องทดลองเว็บ

three.js — 3D บนเว็บ

WebGL + WebGPU · กราฟิก 3D, particle, shader, compute

7 เดโม

Data viz3D ViewerCreative + Bloom CSS2D labelsFundamentalsWebGPU + TSLGPU Compute ล้านจุด

เข้าหมวดนี้

Shader Art — GLSL

WebGL fragment shader ดิบ · GPU วาดทุกพิกเซล

4 เชดเดอร์

Plasmafbm cloudsTunnelKaleidoscopemouse-reactive

เข้าหมวดนี้

Raymarching

3D จาก SDF บน GPU · sphere tracing

3 ฉาก

SDFSoft shadowsmin morphmouse orbitWebGL

เข้าหมวดนี้

3D Physics

ลูกบอลเด้งในกล่อง 3D · project เอง ไม่ใช้ lib

interactive

PerspectiveDepth sortGravityลากหมุนกล่อง

เข้าหมวดนี้

WebGL Particles

อนุภาคหลักหมื่นบน GPU · เมาส์ดูด/ผลัก

20k+

gl.POINTSAdditive blendMouse forceระเบิด

เข้าหมวดนี้

WebGPU Compute

อนุภาคหลายแสนตัว · GPU คำนวณฟิสิกส์เองด้วย compute shader

หลายแสนตัว

WGSL computecurl-noise flowstorage bufferinstanced renderpointer force

เข้าหมวดนี้

Voronoi

เซลล์ per-pixel บน GPU · สลับ distance metric 3 แบบ

WebGL2

nearest-sitefragment shaderEuclid/Manhattan/Chebyshevลากย้าย site

เข้าหมวดนี้

Generative Art

Canvas 2D · ศิลปะที่ขยับเองด้วยโค้ด

3 sketch

Flow fieldConstellationHarmonograph

เข้าหมวดนี้

Particle Physics

ลูกบอลมีแรงโน้มถ่วง + เด้ง + เมาส์ดูด/ผลัก

interactive

GravityBounceMouse forceปรับค่าสด

เข้าหมวดนี้

Game of Life

เซลล์ออโตมาตา · กฎ B3/S23 · คลิกวาดเซลล์

+ presets

GliderPulsarGlider Gunเล่น/หยุด/ก้าวปรับความเร็ว

เข้าหมวดนี้

Maze Generator

สร้าง + แก้เขาวงกต · DFS gen + BFS solve

animated

Recursive backtrackerBFS shortest pathปรับขนาดปรับความเร็ว

เข้าหมวดนี้

Boids — Flocking

ฝูงเคลื่อนพร้อมกันจาก 3 กฎ + spatial hash รันพันตัว

2500 ตัว

separationalignmentcohesionspatial hashผู้ล่า/เหยื่อ

เข้าหมวดนี้

Cloth & Rope

ฟิสิกส์ผ้า/เชือก Verlet · ลากจับ + ฉีกขาดได้

interactive

Verletdistance constraintsลากจับตัด/ฉีกลม + โน้มถ่วง

เข้าหมวดนี้

Fractal Explorer

Mandelbrot/Julia · คลิกซูมเข้าได้ไม่จบ

escape-time

MandelbrotJuliaคลิกซูมปรับ iterationsหลายโทนสี

เข้าหมวดนี้

Maps

แผนที่ procedural · pan/zoom · ไม่ใช้ tile ภายนอก

interactive

Value-noise terrainPan/ZoomPinsMinimap

เข้าหมวดนี้

Image Filters

แต่งรูปด้วย canvas pixel · ไม่มีไลบรารี

8 ฟิลเตอร์

GrayscaleInvertSepiaThresholdPixelateEdge (Sobel)

เข้าหมวดนี้

Image → ASCII

แปลงรูปเป็นตัวอักษร · luminance sampling

interactive

Char rampBlock charsInvertปรับความละเอียดสีตามรูป

เข้าหมวดนี้

Image → Vector

แปลงรูป raster เป็น SVG · marching squares

interactive

PosterizeMarching squaresContour → SVGดูโค้ด SVG

เข้าหมวดนี้

ASCII Video

เว็บแคม → ASCII real-time · มี fallback plasma

live

getUserMedialuminance → glyphcharset/สีfallback plasmainvert

เข้าหมวดนี้

Audio Visualizer

Web Audio · สร้างเสียงเอง แล้ววาดความถี่

3 สไตล์

FFT barsWaveformRadialOscillatorNode

เข้าหมวดนี้

Mic Visualizer

วิช่วลไลซ์เสียงจากไมค์จริง · getUserMedia

live

getUserMediaFFTlevel meterfallback tone

เข้าหมวดนี้

Motion Kit — a11y

ชุด animation พร้อมใช้ · เคารพ reduce-motion ทุกตัว · กดสลับ Full↔Reduce ดูได้

13 preset

Full ↔ Reduce toggleReveal + staggerCount-up SVG drawMicro-interactioncopy code

เข้าหมวดนี้

Web Animation

scroll reveal + micro-interaction · vanilla

5 ตัวอย่าง

Scroll revealNumber counterMicro-interaction3D tiltSVG draw

เข้าหมวดนี้

Smooth Scroll — Lenis

เลื่อนหน้าลื่นมี momentum · เคารพ reduce-motion ในตัว

a11y

Lenis (MIT)Full ↔ Auto ↔ ReduceNative API รอดParallaxGSAP sync

เข้าหมวดนี้

Creative CSS

เทคนิค CSS ล้วน · ไม่มี JavaScript เลย

7 ลูกเล่น

GradientGlassmorphismNeon3D flipLoaderConic

เข้าหมวดนี้

Variable Fonts

เล่นแกนฟอนต์แปรผัน · font-variation-settings

playground

wghtopszSOFT/WONKitalicanimate axescopy CSS

เข้าหมวดนี้

Kinetic Type

พิมพ์คำเอง (ไทย/อังกฤษ) → ตัวอักษรประกอบจากอนุภาค

พิมพ์ได้

pixel samplingspring physicsรองรับไทยgather/swirl/burstmouse repel

เข้าหมวดนี้

Data Charts

กราฟ SVG ทำมือ · animate + hover

6 กราฟ

BarLine + areaDonutScatterRadarHeatmap

เข้าหมวดนี้

k-means (AI)

จับกลุ่มข้อมูลอัตโนมัติ · vanilla ML ไม่มี library

interactive

Clusteringเลือก kก้าว/รันคลิกเพิ่มจุดk-means++

เข้าหมวดนี้