Minor bug found in Webgl2 instancing example

[greggman]

Discussed in https://github.com/gfxfundamentals/webgl2-fundamentals/discussions/183

^{Originally posted by ArcanePython December 24, 2022} I submit this bug here, because for some reason your bug report does not submit (grey button)

Describe the bug

Minor inconsistency found while porting your Instanced Drawing example.

When running the sample and porting it to TypeScript, it performed fine. When embedding the sample code in a different context, each spoke of each cross was shown as a single triangle ! See screenshots

My "context" where I want to use/modify your code is a scene container I wrote. In its rendering method, I do the following preparation:

    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);
   

Your triangles won't survive this. To solve the issue, I swapped a few points in your array,

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -0.1, 0.4, -0.1, -0.4, 0.1, -0.4, 0.1, -0.4, -0.1, 0.4, 0.1, 0.4, 0.4, -0.1, -0.4, -0.1, -0.4, 0.1, -0.4, 0.1, 0.4, -0.1, 0.4, 0.1], gl.STATIC_DRAW);

...into

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -0.1, 0.4, -0.1, -0.4, 0.1, -0.4, -0.1, 0.4, // sw1 0.1, -0.4, // sw1 0.1, 0.4, -0.4, -0.1, // sw2 0.4, -0.1, // sw2 -0.4, 0.1, -0.4, 0.1, 0.4, -0.1, 0.4, 0.1], gl.STATIC_DRAW);

The second version works in both contexts.

To Reproduce This issue is not visible in your lesson code example. But it is an inconsistency in the data, that will cause an issue when re-using the code elsewhere. Reversing the triangle signs solved it for either case.

Expected behavior Each cross should look like a cross, not 2 perpendicular triangles, preferably in any context

Screenshots

(https://github.com/ArcanePython/arcanepython.github.io/blob/main/example_context.png.jpg) https://github.com/ArcanePython/arcanepython.github.io/blob/main/scene_context.png.jpg

Desktop (please complete the following information): Browser: Edge in Windows

Smartphone (please complete the following information): Not tested