I'm trying to modify an example from react-flow-renderer (React Flow Audio) to render a shader inside each node. For that, I have a test shader that outputs the UVs, but it doesn't look right when inside a node, because not all the spectrum of colors is visible. However, if I use that same shader (that is exported as a functional component) directly in the index.js, it does render as expected.
Here is a sandbox recreating the problem: CodeSandbox. Commenting lines 11 or 12 in index.js shows the situation. Here are some snapshots:
I've tried everything but I can't figure out the problem. I want to use that canvases for raymarching, and the results are well rendered besides that are translated off the center of the canvas.
I have also tried other libraries to render the shaders, like shadertoy-react or gl-react, but I get the error:
Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'."
Any help is appreciated.
