How to set UV attribute when using Instanced Drawing method in WebGL

55 Views Asked by At

in this example of instanced drawing to calculate uv attribute we need 3 attribues: uv (default uv coord) uvOffset and uvScale, then inside vertex shader it calculates actual uv for current vertex. However, when I open PIXI.js engine (I know there is also awailable instanced drawing), I see this vertex shader:

precision highp float;
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
attribute vec4 aColor;
attribute float aTextureId;

uniform mat3 projectionMatrix;

varying vec2 vTextureCoord;
varying vec4 vColor;
varying float vTextureId;

void main(void){
    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

    vTextureCoord = aTextureCoord;
    vTextureId = aTextureId;
    vColor = aColor;
}

So looks like they had a chance to calculate uv before. However, when I try to do this by my own, looks like only first uv coordinate passes to each vertex (because I see mesh filled by 1 color of texture). I noticed it is because of vertexAttribDivisorANGLE method, but when I don't use it, all meshes have the same UV coordinates.

Here is my code of implementation, and the result I see on the screen (my uv correctly precalculated before passing to shader).

    gl.bindBuffer(gl.ARRAY_BUFFER, this.uvsBuffer);
    gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array(this.uvsArray),
        gl.STATIC_DRAW
    );

    gl.enableVertexAttribArray(uvLoc);
    gl.vertexAttribPointer(uvLoc, 2, gl.FLOAT, false, 0, 0);
    angleInstancedArraysExt.vertexAttribDivisorANGLE(uvLoc, 1);

enter image description here

now when I comment angleInstancedArraysExt.vertexAttribDivisorANGLE(uvLoc, 1);: enter image description here

and now how it looks if I pass 3 attributes to calculate uv inside shader: enter image description here

So I don't understand why when I am using vertexAttribDivisorANGLE for uv, it took only first vector from my array for all vertices. My uvArray has 8 floats for each instance like this:

[
    // Instance 1
    1.0, 1.0,
    0.0, 1.0,
    1.0, 0.0,
    0.0, 0.0,

    // Instance 2
    0.0, 0.5,
    0.0, 1.0,
    0.5, 0.3,
    0.7, 0.1
]
0

There are 0 best solutions below