Instance triangles

[HEAVYPOLY]

Hi, I'm trying to instance some triangles like this:

  if (stroke.sh === shapes.stamp) {
    arrays = {
      a_position: { numComponents: 2, data: stroke.pl },
      a_color: { numComponents: 3, data: stroke.pcol },

      a_triCoords: {
        numComponents: 2,
        data: [
          -1.0, -1.0,
          0.0, 1.0,
          1.0, -1.0,
        ],
        divisor: 0,
      },
      a_texCoord: {
        numComponents: 2,
        data: [
          0, 0,
          0.5, 1,
          1, 0,
        ],
        divisor: 0
      },
    }
  }
  
    let n = stroke.pl.length / 2

  const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays)

  if (stroke.sh !== shapes.stamp) {
    twgl.setBuffersAndAttributes(gl, buffer.programInfo, bufferInfo)
    twgl.setUniforms(buffer.programInfo, uniforms)
    gl.disableVertexAttribArray(gl.getAttribLocation(buffer.programInfo.program, 'a_planeCoords'))
    gl.drawArrays(triMode, 0, n)
  } else {
    twgl.setBuffersAndAttributes(gl, buffer.programInfo, bufferInfo)
    twgl.setUniforms(buffer.programInfo, uniforms)
    console.log('DRAW INSTANCED STAMP', n)
    gl.drawArraysInstanced(triMode, 0, 3, n)
  }

I am able to see the triangle drawn and vertex colors seem to be working, (each vertex has random color which I see rapidly changing if I draw many triangles in sequence)

a_position works for the first position, but stays at the first position instead of using all the positions in stroke.pl.
[.1,.4, -.1, .2, .3, .6, .5,.2, -.5,.3]

I thought divisor might help but it doesn't seem to change anything. Any help appreciated!

[greggman]

I am not sure what you're asking.

There's an instancing sample here: https://github.com/greggman/twgl.js/blob/master/examples/instancing.html

Live here: https://twgljs.org/examples/instancing.html

You need to set divisor to 1 on attributes that you want to advance only once per instance. 0 (the default) on attributes you want to advance once per vertex

[HEAVYPOLY]

Screen-2023-07-25-151549.mp4

In the bottom right corner is what I'm trying to achieve (drawing triangles along a path)
The bottom rigtht corner is using this code:

const vertexShaderSrc = /* glsl */`
  attribute vec4 aPosition;
  attribute vec3 aOffset;
  attribute float aSize;
  attribute vec4 aColor;
  attribute vec2 aTexCoord;
  attribute float aDepth;

  varying vec2 vTexCoord;
  varying vec4 vColor;
  varying float vDepth;

  void main()
  {
      vTexCoord = aTexCoord;
      vDepth = aDepth;
      vColor = aColor;
      gl_Position = vec4(aPosition.xyz * aSize/500.0 + vec3(1.0,-1.0,1.0) * aOffset/500.0, 1.0);
  }`

const fragmentShaderSrc = /* glsl */`
  precision mediump float;
  uniform vec4 uColor;

  varying vec2 vTexCoord;
  varying vec4 vColor;
  varying float vDepth;

  void main()
  {
      gl_FragColor = uColor;
  }`

let wgl = {
  gl: null,
}
let program = null
let ext
function setupInstancedWGL (gl) {
  program = gl.createProgram()
  const vertexShader = gl.createShader(gl.VERTEX_SHADER)
  gl.shaderSource(vertexShader, vertexShaderSrc)
  gl.compileShader(vertexShader)
  gl.attachShader(program, vertexShader)

  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
  gl.shaderSource(fragmentShader, fragmentShaderSrc)
  gl.compileShader(fragmentShader)
  gl.attachShader(program, fragmentShader)

  gl.linkProgram(program)

  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.log(gl.getShaderInfoLog(vertexShader))
    console.log(gl.getShaderInfoLog(fragmentShader))
  }
  gl.useProgram(program)
  setupPlane(gl)
  wgl.gl = gl
}
const modelData = new Float32Array([
  // position    texCoord
  -1, -0.7,
  0, 0.8,
  1, -0.7,
])
async function renderWGL (stroke) {
  // console.log('RENDER WGL', points.length / 2)

  const gl = wgl.gl
  // console.log('ANGLE', ext);

  const offsets = new Float32Array(stroke.pl)
  const aOffset = gl.getAttribLocation(program, 'aOffset')
  const scales = new Float32Array(stroke.ps)
  const aSize = gl.getAttribLocation(program, 'aSize')
  separateBuffers(gl, ext, stroke, offsets, scales, aOffset, aSize)
  const numInstances = stroke.pl.length / 2
  gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, numInstances)
  // ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 3, numInstances)
}
function setupPlane (gl) {
  const modelBuffer = gl.createBuffer()

  gl.bindBuffer(gl.ARRAY_BUFFER, modelBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, modelData, gl.STATIC_DRAW)
  const aPosition = gl.getAttribLocation(program, 'aPosition')
  gl.enableVertexAttribArray(aPosition)
  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
}

function separateBuffers (gl, ext, stroke, offsets, scales, aOffset, aSize) {
  let uColorLocation = gl.getUniformLocation(program, 'uColor')
  // const cl = [0, 0, 0, 1]
  // console.log(stroke.cl)
  gl.uniform4f(uColorLocation, stroke.cl[0] / 255, stroke.cl[1] / 255, stroke.cl[2] / 255, stroke.cl[3] / 255) // RGBA color

  // Offset
  const offsetBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, offsetBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, offsets, gl.STATIC_DRAW)
  gl.enableVertexAttribArray(aOffset)
  gl.vertexAttribPointer(aOffset, 2, gl.FLOAT, false, 0, 0)
  gl.vertexAttribDivisor(aOffset, 1) // this attribute changes for each instance

  // Scale
  const scaleBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, scaleBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, scales, gl.STATIC_DRAW)
  gl.enableVertexAttribArray(aSize)
  gl.vertexAttribPointer(aSize, 1, gl.FLOAT, false, 0, 0)
  gl.vertexAttribDivisor(aSize, 1) // this attribute changes for each instance
}

I am trying to do the equivalent with twgl in webgl2 mode. (which is shown in large orange viewport with rainbow colors)

[HEAVYPOLY]

..

[greggman]

I don't know how I can help. I can't really debug non-runable code and it's unreasonable to ask me to debug your whole app. If you make an minimal complete verifiable example I can see if I have time to take a look.

That said, here's a snippet using your array = code

https://jsgist.org/?src=4cc26c649256bb8022a63e7cd7d398e0

[HEAVYPOLY]

This is helpful, will study the snippet. thanks.

[HEAVYPOLY]

update: it's been solved by switching to latest twgl.js/master/dist/5.x/twgl-full.min.js .

I think I had the version in root dist folder which wasn't working.