Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'
yukosgiti opened this issue · comments
Library Version
I use React 18.
├─┬ gl-react-dom@5.2.1
│ └── gl-react@5.2.0 deduped
└── gl-react@5.2.0
Expected Behavior
const shaders = Shaders.create({
helloGL: {
frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float blue;
void main() {
gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}`
}
});
class Example extends Component {
render() {
return (
<Surface width={300} height={300}>
<ShaderCanvas shader={shaders.helloGL} />
</Surface>
);
}
}
function App() {
return (
<div style={{ width: "100vw", height: "100vh" }}>
<Example />
</div>
);
}
This code to render.
Actual behavior
I get the following error:
createSurface.js:498 TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'.
at compileShader (shader-cache.js:55:1)
at ContextCache.proto.getShaderReference (shader-cache.js:75:1)
at Object.getShaderReference [as shader] (shader-cache.js:131:1)
at Shader.proto.update (index.js:109:1)
at createShader (index.js:255:1)
at Surface._makeShader (createSurface.js:538:1)
at Surface._getShader (createSurface.js:547:1)
at Node._getShader (Node.js:764:1)
at Node._draw (Node.js:828:1)
at Surface._draw (createSurface.js:590:1)
From my limited debugging, in the compileShader
function compileShader(gl, type, src) {
var shader = gl.createShader(type)
...
}
The shader
variable is null
. Whic gives the error I think.
type
is 35633
and src
is
"attribute vec2 _p;
varying vec2 uv;
void main() {
gl_Position = vec4(_p,0.0,1.0);
uv = vec2(0.5, 0.5) * (_p+vec2(1.0, 1.0));
}
#define SHADER_NAME helloGL"
Steps to reproduce the behavior
I tried to implement the first example in the docs. I get this error in Opera, Firefox and Chrome.
A little more context: It happens on React 18 only. Just tested it with a fresh project with React 17 and it's working.
It is also failing on everything shader related thing that I tried. Even making a shader program from scratch throws the same error so it's probably not related to the library per se but if @gre or someone with more WebGL experience can check it out it'd be better.
Mmh curiously the cookbook uses React 18. I will have to recreate a basic example to try to reproduce.
But I'm using React + GL React ~ every week, making art projects of my own with it and never experienced this 👀
Was able to pinpoint this issue to this file in gl-shader
: https://github.com/stackgl/gl-shader/blob/master/lib/shader-cache.js (line 55). Guess it's out of the scope of the library though
I think this is related to React 18 Strict Mode.
If you create a fresh project with create-react-app and add gl-react and gl-react-dom you can reproduce the issue.
If you comment the out strict mode in src/index.js
the error goes away:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
- <React.StrictMode>
<App />
- </React.StrictMode>
);