[p5.js 2.0 Bug Report]: Instanced p5.strands shader doesn't work after first frame if you use only it

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.1.2

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

Steps:

1. Create a model using buildGeometry so that we can draw it with an instance count
2. Create a p5.strands shader that offsets position based on the instance number
3. Draw a number of instances using the shader

It flickers showing all the instances, and then goes back to just showing one:

But weirdly, if you switch to using another shader in the same frame, e.g. by doing the instanced rendering within a push() and pop() and then drawing another shape without a custom shader, then all the instances show up like they're supposed to:

Snippet:

let instanceShader
let instance

function setup() {
  createCanvas(400, 400, WEBGL)
  
  instanceShader = baseMaterialShader().modify(() => {
    getWorldInputs((inputs) => {
      inputs.position.x += (instanceID() - 2) * 50
      return inputs
    })
  })
  
  instance = buildGeometry(() => sphere(20))
}

function draw() {
  background(220)
  
  push()
  noStroke()
  shader(instanceShader)
  model(instance, 5)
  pop()
  
  // Works when you uncomment this?
  // push()
  // sphere(20)
  // pop()
}

Live: https://editor.p5js.org/davepagurek/sketches/4pTh3thfJ

[Aayushdev18]

Hi @davepagurek I’d like to take this up and work on a fix if it’s available. I’ve been looking into instanced rendering and p5.strands shaders already. Please let me know if I can be assigned to this issue. Thanks

[Piyushrathoree]

@davepagurek super interested about new webGL issue , would love to work on it please assign

[davepagurek]

Before figuring out a fix, I think the first step is to try to identify what's going on to cause the bug, so we can then talk about what the scope of the fix should be. If anyone feels like stepping through a debugger or experimenting with the code to try to identify the cause, let us know in the comments here about your findings!

[Aayushdev18]

@davepagurek I've been investigating this issue. Here's what I found:
Key Finding:
The shader binding mechanism keeps _curShader set after unbindShader() (it only resets _bound). When the same shader is reused on subsequent frames, useProgram() may skip calling _useShader() because _curShader already matches.

Why the workaround works:
Drawing another shape without a custom shader binds a different shader, which updates _curShader and refreshes WebGL state. When the custom shader is used again, instanced rendering works.
Observations:

• Instance count is passed correctly to _drawBuffers()
• gl.drawElementsInstanced()/gl.drawArraysInstanced() are being called
• The issue appears to be WebGL state setup when the same shader is reused across frames

Next steps:
I'm planning to add debug logging to track when _useShader() is actually called and compare WebGL state between working and non-working scenarios.
Should I continue investigating in a specific direction, or do you have insights on what might be causing this?

[Piyushrathoree]

@davepagurek I've been investigating this issue. Here's what I found: Key Finding: The shader binding mechanism keeps _curShader set after unbindShader() (it only resets _bound). When the same shader is reused on subsequent frames, useProgram() may skip calling _useShader() because _curShader already matches.

Why the workaround works: Drawing another shape without a custom shader binds a different shader, which updates _curShader and refreshes WebGL state. When the custom shader is used again, instanced rendering works. Observations:

• Instance count is passed correctly to _drawBuffers()
• gl.drawElementsInstanced()/gl.drawArraysInstanced() are being called
• The issue appears to be WebGL state setup when the same shader is reused across frames

Next steps: I'm planning to add debug logging to track when _useShader() is actually called and compare WebGL state between working and non-working scenarios. Should I continue investigating in a specific direction, or do you have insights on what might be causing this?

hey @Aayushdev18 are you able to reproduce the error ? I have tried to do it in chrome and firefox as well and I'm not able to get that flicker and a single sphere. all 5 of them are being there without any flicker

[Piyushrathoree]

@davepagurek is this possible this is only happening with macos (issue is caused because of hardware ) ?

[davepagurek]

@Piyushrathoree just tried it on a different computer and also see that it works as expected. So it does seem like it's hardware related. It works correctly on my newer Macbook Pro (M1, 2021) but not on an older one from 2015.

@Aayushdev18 when you say "Drawing another shape without a custom shader binds a different shader, which updates _curShader and refreshes WebGL state" I think the key part is that we don't know what WebGL state in particular is causing the problem, as in theory there should be no difference in state after applying the same shader. Narrowing that down can also help us determine if it's worth it to try to get this to work on whatever computers show buggy behaviour, or if we just call this a browser bug and move on.

[Piyushrathoree]

@Piyushrathoree just tried it on a different computer and also see that it works as expected. So it does seem like it's hardware related. It works correctly on my newer Macbook Pro (M1, 2021) but not on an older one from 2015.

@Aayushdev18 when you say "Drawing another shape without a custom shader binds a different shader, which updates _curShader and refreshes WebGL state" I think the key part is that we don't know what WebGL state in particular is causing the problem, as in theory there should be no difference in state after applying the same shader. Narrowing that down can also help us determine if it's worth it to try to get this to work on whatever computers show buggy behaviour, or if we just call this a browser bug and move on.

okay so i think i was right this is not a problem now ?

[davepagurek]

I'm not sure how widespread of an issue this is. The fact that it works on your computer and my newer one is promising, but I'd like to see if other people also see the same issue.

[Piyushrathoree]

I'm not sure how widespread of an issue this is. The fact that it works on your computer and my newer one is promising, but I'd like to see if other people also see the same issue.

that make sense , got it

[Aayushdev18]

You're right, we need to identify the specific WebGL state causing this.
I'll add debugging to compare WebGL state between:

1. First frame (working): When instanced rendering works correctly
2. Second frame (broken): When only the custom shader is used and it fails
3. Second frame (working): When the workaround (drawing another shape) is applied

I'll capture:

• Current program (gl.getParameter(gl.CURRENT_PROGRAM))
• Vertex attribute states (enabled, size, type, stride, buffer bindings)
• Buffer bindings (ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER)
• Texture and framebuffer bindings
• Any other relevant state

This should show which state differs between working and non-working scenarios. Once we identify the specific state, we can decide if it's fixable or a browser bug.
I'll add this debugging code and report back with the findings.

[VANSH3104]

@davepagurek it work as expected on mine too but after debugging i think bug occurs because on some older hardware, WebGL drivers fail to preserve vertex attributes with divisor > 0 when the same shader is reused across frames. p5.js optimizes by skipping attribute setup when it detects the same shader is already active, but this doesn't reenable the instance attributes that get disabled on affected drivers, causing instancing to stop working after the first frame. The fix should detect instanced rendering and force reapply of vertex attributes with divisor > 0 even when reusing the same shader.
more explicit

• When p5.js creates an instanced shader with instanceID(), it sets up vertex attributes with vertexAttribDivisor(location, 1)
• on first drow Attributes are enabled and work on second _curShader() sees same shader is active and skips setup
• some vertex attributes with divisor > 0 get disabled or lose their divisor setting when not explicitly re-enabled so instancsing just stop working

whats your thoughts on this