Trouble with instancing

[greggman]

continued from https://webgl2fundamentals.org/webgl/lessons/webgl-instanced-drawing.html#comment-6302445421

---

I'm not seeing a repo. https://jsfiddle.net/9chaxo40/ The background is drawing.

I suspect though the issue is on your machine the attribute location used in drawing the background quad matches one of the ones for the matrixes for the particles. It seems you ignored everything I wrote in my previous reply about using a vertex array and/or setting the divisor to 0 😢

I do see a ton of other issues though

---

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

are you really trying to target IE in 2023?

---

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

Using overflow: hidden here is just hiding the real bug. The real bug is your canvas is display inline which means it's got padding. The correct CSS is

html, body {
  height: 100%;
  margin: 0;
}
#glcanvas {
  width: 100%;
  height: 100%;
  display: block;  /* removes the extra padding */
}

---

<script ... type="text/javascript">

type="text/javascript" hasn't been needed in ~15+ years

---

let width = window.innerWidth;
let height = window.innerHeight;

You shoudn't use window.innerWidth and window.innerHeight. You should rather just ask the browser what size the canvas is. See https://webgl2fundamentals.org/webgl/lessons/webgl-anti-patterns.html

---

width and height on the canvas are integers, not CSS units

  canvas.setAttribute("width", `${width * devicePixelRatio}px`);   // bad
  canvas.setAttribute("height", `${height * devicePixelRatio}px`);  // bad

  canvas.width = width * devicePixelRatio | 0;
  canvas.height = height * devicePixelRatio | 0;

Note: devicePixelRatio is NOT an integer. See https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

Similarly, this code is arguably wrong

    const oldWidth = parseInt(canvas.getAttribute("width") || `${newWidth}`, 10);   /// bad
    const oldHeight = parseInt(canvas.getAttribute("height") || `${newHeight}`, 10);  /// bad

canvas.width and canvas.height are already integers

    const oldWidth = canvas.width;
    const oldHeight = canvas.height;

---

As I mentioned before, you don't need to disable vertex arrays

const unbindVertexBuffer = (gl, attributeLocation) => {
  gl.disableVertexAttribArray(attributeLocation);   // pointless
};

This is also not "unbinding". The buffer is still bound, it's just you've turned off the attribute's use of the bound buffer. In either case though there's no reason to unbind it

---

As I mentioned in the previous reply. The most likely issue is that you're not setting the divisor back to 0.

This code, at the end of the particle drawing

    for (let i = 0; i < 4; ++i) {
      gl.disableVertexAttribArray(matrixAttribute + i);
    }

should be this

    for (let i = 0; i < 4; ++i) {
      gl.vertexAttribDivisor(matrixAttribute + i, 0);
    }

But really, you should be using vertex arrays (which I also mentioned), then you wouldn't need this code

Here's a version setting the divisor to 0: https://jsfiddle.net/greggman/4oy539j0/
Here's a version using vertex arrays: https://jsfiddle.net/greggman/Lt7xyohm/

---

You don't set the viewport based on devicePixelRatio.

    gl.viewport(0, 0, width * devicePixelRatio, height * devicePixelRatio);  // bad
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);  // good
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);  // best

---

Not a bug but a much easier way to implement colorFromHex is

const cssColorToRGBA8 = (() => {
  const canvas = document.createElement('canvas'});
  canvas.width = 1; 
  canvas.height = 1;
  const ctx = canvas.getContext('2d', {willReadFrequently: true);
  return cssColor => {
    ctx.clearRect(0, 0, 1, 1);
    ctx.fillStyle = cssColor;
    ctx.fillRect(0, 0, 1, 1);
    return Array.from(ctx.getImageData(0, 0, 1, 1).data);
  };
})();

const cssColorToRGBA = cssColor => cssColorToRGBA8(cssColor).map(v => v / 255);

Now you can also pass it any CSS color

values = cssColorToRGBA('#123456');
values = cssColorToRGBA('hsl(60, 100%, 50%)');
values = cssColorToRGBA('pink');
values = cssColorToRGBA('rgb(50, 100, 150)');
values = cssColorToRGBA('rgba(50, 100, 150, 0.5)');

etc...

[whiterook6]

Thanks for the feedback. It was the vertexAttribDivisor that did it.

for (let i = 0; i < 4; ++i) {
   gl.vertexAttribDivisor(matrixAttribute + i, 0);
}