Minor bug found in Webgl2 instancing example

[greggman]

Discussed in #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

[greggman]

I don't know if I'd call it a bug but I get that it might be confusing so I took your suggestion and switched the vertices.

4258b95

[ArcanePython]

It is VERY minor, but it took me 2 hours to find the cause for the silly difference... anyway please keep an eye on my little typescript repository, maybe you can find a good use for it. Thanks for the help on SO earlier. I wish you good holidayzz