Implementing Instancing with angle-instanced-array

[000.graphics]

Hi there!

Trying to implement the instancing via angle instanced arrays as shown in this post by Brandon Jones.

http://blog.tojicode.com/2013/07/webgl-instancing-with.html

with code example seen here

http://media.tojicode.com/webgl-samples/instancing.html

I would like to wrap the method in a modular javascript framework that i am using.
http://www.vvvvjs.com/

It works somehow but it shows only 2 instances of the example model instead of a lot of them as it should be from the sizet of the buffer.

My current adaption looks in the core code like this:

 var OffsetBuffer;
           OffsetBuffer = gl.createBuffer();
                    gl.bindBuffer(gl.ARRAY_BUFFER, OffsetBuffer);
                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(layer.mesh.Buffer1), gl.STATIC_DRAW);
           
           gl.bindBuffer(gl.ARRAY_BUFFER, OffsetBuffer); //gl.bindBuffer(gl.ARRAY_BUFFER, layer.mesh.Buffer1);
           gl.vertexAttribPointer(layer.shader.attributeSpecs.offset.position, 3, gl.FLOAT, false, 0, 0);
           gl.enableVertexAttribArray(layer.shader.attributeSpecs.offset.position);
           this.instanceExt.vertexAttribDivisorANGLE(layer.shader.attributeSpecs.offset.position, 1);

And later in the rendering section:

this.instanceExt.drawElementsInstancedANGLE(gl[renderState.polygonDrawMode], layer.mesh.numIndices, gl.UNSIGNED_SHORT, 0, layer.mesh.instanceCount);
           

The vertex shader looks like that.

attribute vec3 PosO : POSITION;
attribute vec2 TexCd : TEXCOORD0;
attribute vec3 NormO : NORMAL;
attribute vec3 offset : OFFSET;

void main(void) {

  mat4 tWV = tV * tW;
  mat4 tWVP = tP * tWV;
 
  LightDirV = normalize(-1.0*(tV*vec4(Light_Direction_XYZ,1))).xyz;
  NormV = normalize(tWV * vec4(NormO, 0)).xyz;
 
  vec4 PosV = tWV * vec4(PosO, 1);
  ViewDirV = normalize(-PosV).xyz;

  gl_Position = tWVP * vec4(PosO + offset, 1.0);
  vs2psTexCd = (Texture_Transform * vec4(TexCd, 0, 1)).xy;
}

Help much appreciated.
Cheers!

[Corentin Wallez]

Hey,

From what I can see the good looks correct and the only difference with Brandon's article is that you used a 0 stride to specify the vertex data is packed, whereas he uses an explicit stride. Can you try some of the following, see if any work:

 - use an explicit stride

 - try on a different browser

 - check layer.mesh.instanceCount

 - run your code on a WebGL2 context and use the core entry points instead of the extension

Hopefully this helps,

Corentin

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-list+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Andre Weissflog]

If you're suspecting that the implementation of instanced_arrays on a specific browser is broken or not supported you can use this demo to cross-check:

http://floooh.github.io/oryol/asmjs/Instancing.html

This is cross-compiled C++ code though, so not very useful as a code example.

Cheers,

-Floh.

To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.

[000.graphics]

Thank you! Now its working. It was actually everything fine and checking through the proposed points lead me to a inconsistency in the buffer.

Realy glad it works now.

[000.graphics]

Okey I wanted to improve the current instancing setup by adding multiple attribute buffers...

And unfortunately it didnt work...

The observed behaviour is the following:

I loop over the different buffers according to their attribute positions...
When everything should actually work it simply doesnt draw the objects anymore.

Here is my code for dynamically setting up the instance buffers from their respective semantics in the shader code

 for (var i=0; i<layer.mesh.semantics.length; i++) {
           var semantic = layer.mesh.semantics[i];
           gl.bindBuffer(gl.ARRAY_BUFFER, layer.mesh.instanceBuffers[i]);
          gl.enableVertexAttribArray(layer.shader.attributeSpecs[semantic].position);
           gl.vertexAttribPointer(layer.shader.attributeSpecs[semantic].position, layer.mesh.VectorSize[i], gl.FLOAT, false, 0, 0);  
           this.instanceExt.vertexAttribDivisorANGLE(layer.shader.attributeSpecs[semantic].position, 1);
        }


...

 this.instanceExt.drawElementsInstancedANGLE(gl[renderState.polygonDrawMode], layer.mesh.numIndices, gl.UNSIGNED_SHORT, 0, layer.mesh.instanceCount);

Shader should be also fine, I am just adding a second attribute.
But it works only with one attribute, with two or more I dont see nothing.

Realy wonder what could be the issue here....