WebGL2 Breaking Custom Shader

Questions
,
1

So, I’ve been using the SPE particle system for years now. https://github.com/squarefeet/ShaderParticleEngine

Unfortunately the author no longer maintains the project. I’ve been able to patch things here and there as three.js evolves, but it seems I’ve hit a roadblock.

Three.js 118 seems to render a webgl2 context by default. For some reason that I cannot figure out, this is breaking the SPE shader. I am getting the error:

ERROR: 0:250: 'texture' : function name expected
ERROR: 0:250: '=' : dimension mismatch
ERROR: 0:250: '=' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'

I am not awesome at debugging shaders but I have tried messing with it. No luck.

I have made a fiddle showing the error. Just switch the three.js version from 110 to 118.

https://jsfiddle.net/titansoftime/sbn9qha7/

2

The easy option is to just continue using WebGL1. You can do so by instantiating THREE.WebGL1Renderer rather than THREE.WebGLRenderer.

But if you want to use WebGL2, though, you’ll need to modify SPE. Looking here it looks like some function names were changed for WebGL2, which is causing problems. Specifically texture2D was changed to texture which is an issue when texture is used as a variable name, as it is on line 250 of the problematic shader. Renaming that uniform may fix it:

#define texture2D texture
...
vec4 rotatedTexture = texture2D( texture, vUv );

Note that three.js is automatically injecting #defines to convert the WebGL1 texture2D function to texture for WebGL2 for the sake of backwards compatibility.

3 Likes
3

Well that explains everything! Thank you SO much. Greatly appreciated.

Also thanks for the migration reference. I will keep that handy!

4

Related issue at GitHub:

5

by the way, @titansoftime as someone who worked a lot with SPE, I can guarantee that you will like particular way better. It has more functionality and runs faster. For example, you can express color and size evolution with arbitrary curves. You have soft particles out of the box, various blending modes, frustum culling (both simulation and rendering), automatic texture atlas for all your particles and a bunch of other stuff.

It’s part of meep, specifically this section:

I was greatly inspired by SPE when writing that engine, since I was migrating from SPE at the time.

2 Likes
6

Oh yea man, your’s is no doubt significantly better than SPE. My only concern is having to load in even more dependencies. Perhaps one day. Oh and glad you got your game on Steam, that is awesome!

1 Like