Three.js: SPE broken in 118dev

[RemusMar]

The Shader Particle Engine worked just fine in r117
Now the console it saturated with errors like:

THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog Must have an compiled fragment shader attached.
THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:254: 'texture' : function name expected
ERROR: 0:254: '=' : dimension mismatch
ERROR: 0:254: '=' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'1: #version 300 es
2:
3: #define varying in
4: out highp vec4 pc_fragColor;
5: #define gl_FragColor pc_fragColor
6: #define gl_FragDepthEXT gl_FragDepth
7: #define texture2D texture
8: #define textureCube texture
9: #define texture2DProj textureProj
10: #define texture2DLodEXT textureLod
11: #define texture2DProjLodEXT textureProjLod
12: #define textureCubeLodEXT textureLod
13: #define texture2DGradEXT textureGrad
14: #define texture2DProjGradEXT textureProjGrad
15: #define textureCubeGradEXT textureGrad
16: precision highp float;
17: precision highp int;
18: #define HIGH_PRECISION
19: #define SHADER_NAME ShaderMaterial
20: #define HAS_PERSPECTIVE true
21: #define COLORIZE true
22: #define VALUE_OVER_LIFETIME_LENGTH 4
23: #define SHOULD_ROTATE_TEXTURE…
three.min.js:83:381
WebGL warning: linkProgram: Must have an compiled fragment shader attached. three.min.js:83:143
WebGL warning: useProgram: Program must be linked successfully. three.min.js:129:247
WebGL warning: drawArraysInstanced: The current program is not linked. 30 three.min.js:36:134
WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings) three.min.js:36:134

​
@Mugen87
Michael, the backwards compatibility ?

[Mugen87]

See #19620.

Well, that's what I meant with making WebGL 2 to the default will cause shader compilation errors in existing projects.

It's actually the same problem why webgl_mirror_nodes was broken.

In GLSL 3, texture is a function name and can't be used as a variable name anymore. SPE needs a similar fix like BlurNode.

[Mugen87]

I'm not sure everybody is aware of that but when using WebGL 2 with three.js, the engine tries to ensure that existing GLSL 1 shader code works as GLSL 3. Not only for built-in materials but also for instances of ShaderMaterial (which is often used for custom materials). This is achieved with code like:

'#version 300 es\n',
'#define attribute in',
'#define varying out',
'#define texture2D texture'

However, it's quite obvious that this is not a real GLSL 1 to GLSL 3 conversion. Since the engine assumes proper GLSL 3 code when using WebGL 2, projects that do the same like SPE will break after the next three.js upgrade.

[RemusMar]

For those interested here is SPE fixed for THREE 118dev:
https://necromanthus.com/Test/html5/clouds.html

And a more complex benchmark (more particles involved):
https://necromanthus.com/Test/html5/testA_disco.html

[blaze33]

I just pushed a commit that makes SPE compatible with three.js r118
To use it, in your package.json dependencies section just write:

"dependencies": {
    ...
    "shader-particle-engine": "blaze33/ShaderParticleEngine.git#d019c8bf3766997f39dccda943fcee9586e84d94",
    ...
}

Seems like the original author no longer maintains SPE, though I haven't found a better library as of now...