search

gfxfundamentals / webgl2-fundamentals

WebGL 2 lessons starting from the basics
https://webgl2fundamentals.org
BSD 3-Clause "New" or "Revised" License
1.74k stars 220 forks source link

Minor bug found in Webgl2 instancing example #184

Open greggman opened 1 year ago

greggman commented 1 year ago

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
greggman commented 1 year ago

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.

https://github.com/gfxfundamentals/webgl2-fundamentals/commit/4258b95d6b411838e78791c2bfe0825b74effda7

ArcanePython commented 1 year ago

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