WebGL2 · fragment shader · nearest-site

แผนภาพVoronoi สด ๆ

แบ่งพื้นที่ตาม "จุดที่ใกล้ที่สุด" — ทุกพิกเซลเป็นสีของ site ที่อยู่ใกล้มันสุด ได้เป็นเซลล์เหมือนหนังยีราฟ/ฟองสบู่. เทคนิคตรงไปตรงมาคือให้ fragment shader วนเช็กทุก site ต่อพิกเซล บน GPU — เร็วพอจะ animate ได้แบบ real-time. ลากเพื่อย้าย site ที่ใกล้ที่สุด แล้วลองสลับ วิธีวัดระยะ ดูว่ารูปทรงเซลล์เปลี่ยนไปยังไง

28 sites · — fps · per-pixel GPU

เบราว์เซอร์ไม่รองรับ WebGL2
ลองเปิดด้วยเบราว์เซอร์รุ่นใหม่

วิธีวัดระยะ

สไตล์

จำนวน site 28

ความเร็วลอย 0.6

ความหนาเส้นขอบ 1.5

ตั้งความเร็วลอย = 0 เพื่อหยุดนิ่งแล้วลากจัด site เอง · จุดเข้ม = ตำแหน่ง site

วิธีทำงาน: ส่งพิกัด site ทั้งหมดเข้า shader เป็น uniform vec2[]. ใน fragment shader แต่ละพิกเซลวนหา site ที่ระยะน้อยสุด (d1) และอันดับสอง (d2) แล้วลงสีตามดัชนีของอันที่ใกล้สุด. เส้นขอบเซลล์เกิดตรงที่ d2 - d1 เล็ก (สองจุดใกล้พอ ๆ กัน = อยู่กึ่งกลางระหว่างเซลล์). เปลี่ยน วิธีวัดระยะ ก็แค่เปลี่ยนสูตร distance — Manhattan ให้ขอบตั้งฉาก, Chebyshev ให้เซลล์เป็นสี่เหลี่ยม.