WIP cube GL demo

[jcorbin]

Current attempt at minimally demonstrating an alternate rendering approach using webgl(2):

• uses a 2d canvas to create a texture sheet/atlas
• then uses an ortho-projected GL context to draw points textured by that atlas

Here's some other reference tutorials / code:

• https://webglfundamentals.org/webgl/lessons/webgl-points-lines-triangles.html
• https://dev.to/samthor/webgl-point-sprites-a-tutorial-4m6p
• too many MDN pages to reference, but those are also readily googled by function named ;-)

Next steps from minor to stellar:

• fix alpha blending arftifacts
• add per-tile rotation or at least mirroring
• switch to a 2d array texture
• switch to an offscreen canvas
• animation at some level
• implement something for drawing (back)ground fill, this can start out as a boring solid color of course, but we now have the full power of fragment shading to do procedural texturing for things like grass, water, etc
  • Marching Sqaures tileset demo
  • other factor out an autotiling system from the code inlined in the html demo
  • experiment with procedural patterning or shading for background tile style beyond solid colors
• experiment with twisting the perspective matrix and introduce a model/view transform matrix
• see how well 2.5d / pseudo-3d things work on this textured point approach
• scale up and out to planetary cube/dia scale ; whether we're able to just keep drawing transformed points in 3-space as in prior point, or whether we instead add an intermediate step where we render points onto faces of one or more cubes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cube	❌ Failed (Inspect)			Sep 29, 2023 10:46pm
forest	❌ Failed (Inspect)			Sep 29, 2023 10:46pm
jspit	❌ Failed (Inspect)			Sep 29, 2023 10:46pm

[jcorbin]

Right, so the alpha deal all comes down to handling pre-multiplied alpha (or not); which is probably why the default is "Nope, you need to set how that works, and don't get any default blending". I.E: "Not all rgba is the same"

For us part of the context is that 2d canvas contexts all work in pre-multiplied alpha, so when we scrape a texture in from a canvas, we have to deal with that, and then may have a texture that contains pre-multiplied alpha.

References:

• https://limnu.com/premultiplied-alpha-primer-artists/
• https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html