ความเป็นไปได้ของภาพเคลื่อนไหวบนเว็บ
Motion Gallery
พื้นหลังที่คำนวณสด ไม่ใช่รูปภาพ
ทุกตัวอย่างในแกลเลอรีข้างล่างไม่มีไฟล์วิดีโอหรือรูปพื้นหลังเลยสักไฟล์ ทุกพิกเซลถูกคำนวณบนการ์ดจอตอนที่หน้าเว็บทำงาน หน้านี้แสดงเป็นการ์ดภาพนิ่งเพื่อให้โหลดเร็ว แล้วค่อยเปิดตัวจริงเต็มจอตอนกดเข้าไปดูทีละตัว
แกลเลอรี
28 ตัวอย่าง — กดที่การ์ดเพื่อเปิดแบบเต็มจอ
WebGPU · เอฟเฟกต์สำเร็จรูป
ประกอบเอฟเฟกต์สำเร็จรูปเป็นชั้น ๆ ด้วย JSX
Set 0101WebGPU · shaders/react
Fluted Glass over Chroma Flow
กระจกลูกฟูกหักเหสีส้มที่ไหลตาม pointer บนพื้นขาว
ดูตัวอย่างเต็มจอ
Set 0102WebGPU · shaders/react
Aurora as ambient light
ม่านแสงเหนือเป็นบรรยากาศพื้นหลังของหน้าโทนมืด
ดูตัวอย่างเต็มจอ
Set 0103WebGPU · shaders/react
Liquid Metal as a hero object
โลหะหลอมเหลวเป็นวัตถุเอกกลางจอ จุดโฟกัสเดียว
ดูตัวอย่างเต็มจอ
Set 0104WebGPU · shaders/react
Color with no pigment in it
สีรุ้งจากการแทรกสอดของแสงบนฟิล์มบาง ไม่ได้ใส่สีไว้เลย
ดูตัวอย่างเต็มจอWebGL · เขียนเอฟเฟกต์เอง
เขียนโค้ดกราฟิกเองทั้งหมด ไม่มี dependency
Set 0205Raw WebGL · เขียน GLSL เอง
Silk ribbons from pure noise
ริ้วผ้าจาก simplex noise ที่ warp สองรอบ ไม่มี dependency
ดูตัวอย่างเต็มจอ
Set 0206Raw WebGL · เขียน GLSL เอง
Caustics on the pool floor
ลายแสงใต้น้ำ จาก noise ก้อนเดียวกับ Silk คนละวิธีวาด
ดูตัวอย่างเต็มจอ
Set 0207Raw WebGL · เขียน GLSL เอง
Contour lines of the same field
สนามเดิมแต่วาดเป็นเส้นชั้นความสูง แทนการไล่สี
ดูตัวอย่างเต็มจอ
Set 0208Raw WebGL · เขียน GLSL เอง
Cells that crack where they meet
สนามแบบเซลล์ ขอบคมเกิดเองตรงรอยต่อ ไม่มีใครวาดเส้น
ดูตัวอย่างเต็มจอWebGPU · ตอบสนองเมาส์
ควันตามเคอร์เซอร์ คลื่นใต้ปลายเมาส์ และสนามแม่เหล็ก
Set 0309WebGPU · shaders/react
Colored smoke that follows you
ควันสีวิ่งตามเคอร์เซอร์ แล้วค่อย ๆ จางหายไปเอง
ดูตัวอย่างเต็มจอ
Set 0310WebGPU · shaders/react
Ripples under the pointer
ผิวน้ำกระเพื่อมตรงที่เมาส์ผ่าน บอกว่าตรงนี้กดได้
ดูตัวอย่างเต็มจอ
Set 0311WebGPU · shaders/react
Iron filings find the magnet
ผงเหล็กเรียงตัวตามสนามแม่เหล็กที่ปลายเคอร์เซอร์
ดูตัวอย่างเต็มจอ
Set 0312WebGPU · shaders/react
Ink keeps moving after you stop
หมึกที่หยดตามเมาส์ แล้วไหลต่อเองอีกหลายวินาที
ดูตัวอย่างเต็มจอWebGL2 · โครงลวด gl.LINES
ขยับที่ vertex แล้ววาดเป็นเส้น ไม่ใช่ระบายทุกพิกเซล
Set 0413WebGL2 · gl.LINES
A wireframe sheet caught mid-wave
ผืนตะแกรงเส้นที่ขยับเป็นคลื่นแบบภาพ CAD
ดูตัวอย่างเต็มจอ
Set 0414WebGL2 · gl.LINES
A wire globe that keeps breathing
ตะแกรงเดิม เปลี่ยนพิกัดเป็นทรงกลมที่หมุนช้า ๆ
ดูตัวอย่างเต็มจอ
Set 0415WebGL2 · gl.LINES
Five hundred lines finding the current
เส้น 500 เส้นไหลไปตามสนามความเร็ว ไม่มีตะแกรงแล้ว
ดูตัวอย่างเต็มจอ
Set 0416WebGL2 · gl.LINES
A ribbon tied into a knot
ตะแกรงเดิม อ่านเป็นปมทอรัสที่บรรจบตัวเองพอดี
ดูตัวอย่างเต็มจอWebGL2 · ทรงเรขาคณิตทึบ
สามเหลี่ยมทึบ + depth buffer ของที่อยู่หลังถูกบังจริง
Set 0517WebGL2 · gl.TRIANGLES
Three hundred plates breathing apart
แผ่นสามเหลี่ยมทึบแยกออกจากกันแล้วหุบกลับ มี depth จริง
ดูตัวอย่างเต็มจอ
Set 0518WebGL2 · gl.TRIANGLES
Five hundred prisms, one draw call
แท่งหกเหลี่ยม 500 ก้อนวาดครั้งเดียวด้วย instancing
ดูตัวอย่างเต็มจอ
Set 0519WebGL2 · gl.TRIANGLES
Cube, sphere, octahedron are the same equation
ทรงเรขาคณิตที่แปลงร่างไปมาด้วยตัวเลขแค่สองตัว
ดูตัวอย่างเต็มจอ
Set 0520WebGL2 · gl.TRIANGLES
One surface with only one side
แถบที่บิดครึ่งรอบ มีผิวเดียวและพาดทับตัวเองจริง
ดูตัวอย่างเต็มจอWebGPU · pass ที่ทับของจริง
ไม่ได้วาดพื้นหลังใหม่ แต่แปลงภาพของชั้นที่อยู่ข้างล่าง
Set 0621WebGPU · shaders/react
Only one band stays in focus
เบลอทุกอย่างยกเว้นแถบกลางจอ ตัวหนังสือก็โดนด้วย
ดูตัวอย่างเต็มจอ
Set 0622WebGPU · shaders/react
Two colors, any image
บีบภาพให้เหลือสองโทน สลับ mood ทั้งหน้าด้วยสองค่า
ดูตัวอย่างเต็มจอ
Set 0623WebGPU · shaders/react
Highlights bloom into discs
จุดสว่างบานเป็นวงหกเหลี่ยมแบบรูรับแสงเลนส์จริง
ดูตัวอย่างเต็มจอ
Set 0624WebGPU · shaders/react
One lens cannot focus every color
โค้งภาพแบบเลนส์ แล้วดึงช่องแดง/น้ำเงินแยกออกจากกัน
ดูตัวอย่างเต็มจอWebGPU · retro / lo-fi
สแกนไลน์ ตัวอักษร และเม็ดหมึก — ตั้งใจให้ภาพหยาบ
Set 0725WebGPU · shaders/react
Scanlines on a live terminal
จอ CRT โค้ง ๆ พร้อมสแกนไลน์ทับบรรทัดคำสั่งจริง
ดูตัวอย่างเต็มจอ
Set 0726WebGPU · shaders/react
The image becomes a character grid
แปลงความสว่างของภาพเคลื่อนไหวเป็นตัวอักษรทีละช่อง
ดูตัวอย่างเต็มจอ
Set 0727WebGPU · shaders/react
Four plates, slightly misaligned
เม็ดสกรีนสี่แม่สีเอียงคนละมุม แบบงานพิมพ์จริง
ดูตัวอย่างเต็มจอ
Set 0728WebGPU · shaders/react
Two colors pretending to be a gradient
บีบเหลือสองสี แล้วใช้ลาย Bayer หลอกตาให้เห็นระดับกลาง
ดูตัวอย่างเต็มจอ