A series of WebGL tools and tutorials based around the regl WebGL library

Ricky Reusser

Hello, regl!

regl-canvas

Observable Plot + regl

Instanced WebGL Circles

Drawing Instanced Lines with regl

Regl Color Scale Selector

Contour Plots with regl Observable Plot

Selecting the Right Opacity for 2D Point Clouds

SDF Points with regl

Adaptive Contouring in Fragment Shaders

Strange Attractors on the GPU, Part 1: Implementation

Fake Transparency for 3D Surfaces

Bicubic Texture Interpolation using Linear Filtering

Regl Tools and Tutorials

WebGL

Why does backface culling remove part of the line? What determines the orientation of the faces?

Fabian Iwand

I'm drawing the geometry as a triangle strip, so—at least without duplicating *more* vertices—the winding needs to change depending on whether adjacent corners turn in the same or opposite directions. I've added a note below on this. In short, I don't think there's much value in preserving consistent winding order, so I didn't.

Here's the exact line which makes the decision: https://github.com/rreusser/regl-gpu-lines/blob/f3b0e57dacafaba9e65c2f3eff0f9b20440f8705/src/draw-segment.js#L143

This was driving me crazy, so I renumbered all of the indices. Instead of changing the geometry like I was (which flipped winding), it now repeats/doesn't repeat a vertex at the beginning of the fan to get the orientation correct. That flips winding when needed but without modifying geometry, which is way easier to work with. Culling now works more reasonably! There are still a couple stray pixels on mobile. (see: https://rreusser.github.io/regl-gpu-lines/docs/tests.html) Not sure where they're coming from, but it's still an improvement.