Sprites and WebGL problems

[pixelzoom]

This sim makes us of scenery Sprites for the B-field visualization and for animation electrons.

In Slack#DM with @jonathanolson, I discovered that WebGL will not be used for Sprites unless I also provide webgl: true to Sim. I attempted to add that option like this:

Subject: [PATCH] TODO https://github.com/phetsims/gas-properties/issues/77
---
Index: js/common/FELSim.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/common/FELSim.ts b/js/common/FELSim.ts
--- a/js/common/FELSim.ts	(revision 9c3e855ee347ca5f3d79154771edc3742c5445b7)
+++ b/js/common/FELSim.ts	(date 1710864409879)
@@ -30,6 +30,7 @@
   public constructor( titleStringProperty: TReadOnlyProperty<string>, screens: FELScreen[], hasEarthFeature = true ) {
 
     super( titleStringProperty, screens, {
+      webgl: true, // Enabled for high-performance Sprites
       credits: FELConstants.CREDITS,
       phetioDesigned: true,
       preferencesModel: new PreferencesModel( {

At startup, the sim prints this warning 7 times:

WARNING: Too many active WebGL contexts. Oldest context will be lost.
WebGLBlock.js:294 WARNING: Too many active WebGL contexts. Oldest context will be lost.
getContextFromCanvas @ WebGLBlock.js:294
rebuildCanvas @ WebGLBlock.js:128
initialize @ WebGLBlock.js:101
WebGLBlock @ WebGLBlock.js:29
createFromPool @ Poolable.ts:128
createBlock @ Stitcher.js:442
getBlockForRenderer @ GreedyStitcher.js:626
ensureUsedBlock @ GreedyStitcher.js:590
processSubBlock @ GreedyStitcher.js:416
processInterval @ GreedyStitcher.js:358
stitch @ GreedyStitcher.js:232
stitch @ BackboneDrawable.js:485
groupSyncTree @ Instance.js:1020
syncTree @ Instance.js:664
...

... then immediately failis with:

Utils.ts:430 Uncaught TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at Object.createShader (Utils.ts:430:8)
    at ShaderProgram.initialize (ShaderProgram.ts:65:31)
    at new ShaderProgram (ShaderProgram.ts:51:10)
    at SpritesWebGLDrawable.setup (SpritesWebGLDrawable.js:108:26)
    at SpritesWebGLDrawable.onAddToBlock (SpritesWebGLDrawable.js:166:10)
    at WebGLBlock.addDrawable (WebGLBlock.js:485:14)
    at SpritesWebGLDrawable.updateBlock (Drawable.js:336:31)
    at SimDisplay.updateDisplay (Display.ts:603:59)
    at Sim.ts:436:22
    at PhetioAction.execute (PhetioAction.ts:162:17)
createShader @ Utils.ts:430
initialize @ ShaderProgram.ts:65
ShaderProgram @ ShaderProgram.ts:51
setup @ SpritesWebGLDrawable.js:108
onAddToBlock @ SpritesWebGLDrawable.js:166
addDrawable @ WebGLBlock.js:485
updateBlock @ Drawable.js:336
updateDisplay @ Display.ts:603
(anonymous) @ Sim.ts:436
execute @ PhetioAction.ts:162
stepSimulation @ Sim.ts:1023
stepOneFrame @ Sim.ts:1013
runAnimationLoop @ Sim.ts:988
(anonymous) @ Sim.ts:921
setTimeout (async)
(anonymous) @ Sim.ts:899
setTimeout (async)
runItem @ Sim.ts:880
...

@jonathanolson can you please have a look?

[pixelzoom]

Slack:

@jonathanolson
it seems like there is a lot of layering going on, where we are creating a WebGL context for each screen icon (each one has a CoilBackgroundNode/ElectroncsNode?)

@pixelzoom
That’s right. Using the same to code to create the UI coils and the icons. Is there a limit on the number of Sprites instances that can be used?

@pixelzoom
Rather than make the electrons invisible, I could add an option to CoilNode telling it not to create the 2 ElectronNode (Sprites) instances in the case of icons.

In 038b14a, I eliminated the unnecessary WebGL contexts that were being created for the screen icons. After adding webgl: true to FELSim.ts, the sim will now start without the above warnings/errors.

But with webgl: true, it looks like the alpha for my SpriteInstances is not being respected. See alpha = in FieldNode.ts and ElectronsNode.ts. See comparison screenshots below for the B-field visualization. The rendering of electrons is also messed up, but more subtly.

Without webgl: true, the field vector magnitude at each needle's position is mapped to alpha:

With webgl: true, all of the needles are fully opaque:

[jonathanolson]

I was incorrectly handling premultiplied alpha (fixed above). Adding webgl:true to FELSim gives the proper appearance for the field nodes, but I saw:

The rendering of electrons is also messed up, but more subtly.

and I wasn't sure I could immediately tell the difference. @pixelzoom can you let me know if this is resolved (when the webgl flag is added), or more information on how to identify what is wrong?

[pixelzoom]

Thanks @jonathanolson, field visualization and electrons look great with webgl: true.

Closing.