mvilledieu / shadertoy-react Goto Github PK

I tried to install and run the demo in a Next.js project, and it prompt this error:

TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.

To Reproduce
Steps to reproduce the behavior:

1. npm i shadertoy-react
2. import ShadertoyReact from "shadertoy-react";
3. Declare ```
   const fragmentShader = void main(void) { vec2 uv = gl_FragCoord.xy/iResolution.xy; vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4)); gl_FragColor = vec4(col ,1.0); };

4. Include component inside render function `<ShadertoyReact fs={fragmentShader} />`.

**Expected behavior**
Same as demo.


**Desktop (please complete the following information):**
 - MacOs Monterey
 - Chrome
 - Versión 107.0.5304.110 (Build oficial) (x86_64)

Could i put children inside shadertoy-react to have background ?

It might be useful to be able to pause shader. An easy solution might be a boolean prop that if set to true makes an early return in drawScene().

I would like to render something different than the black screen when the shader didn't compile, but there is no way to detect that error. I tried using error boundaries and similar, but there is no error thrown. It would be nice to have a "onError" prop.

Hi,
Thanks for this great tool!
I would just like to know if it is possible to add an iChannel0 with audio to reproduce something like this.

Have a nice day!

I find that the y component of property "iMouse" is wrong.

In the callback function of “mouseMove” and "mouseDown", the code is

# mouseMove
var mouseY = _this.canvasPosition.height - clientY - _this.canvasPosition.top - window.pageYOffset;
# mouseDown
var mouseY = _this.canvasPosition.height - clientY - _this.canvasPosition.top;

it should be

# mouseMove
var mouseY = _this.canvasPosition.height - clientY + _this.canvasPosition.top - window.pageYOffset;
# mouseDown
var mouseY = _this.canvasPosition.height - clientY + _this.canvasPosition.top;

Can this process the shadertoy API JSON files? if not how could I? If so how can I

I attempted to incorporate this module into a typescript project, but hit some barriers that prevented me from completing the task. I was able to get it to build successfully with the addition of a small file "shadertoy-react.d.ts" with the following contents:

declare module 'shadertoy-react'
{
    // tslint:disable-next-line:no-empty-interface
    export default class ShadertoyReact { props; render; context; setState; forceUpdate; state; refs }
}

however when attempting to run the code I would get runtime errors that so far I have been unable to resolve, primarily because the page would include shadertoy-react.min.js despite my best efforts to include unminified code. I am pretty new to react and typescript, so it might be a simple problem however I have been completely stumped by this. Here's a partial callstack for the error I get:

Uncaught TypeError TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at <anonymous> (d:\dev\projects\BBGWebsite\bbg\node_modules\shadertoy-react\lib\shadertoy-react.min.js:1:1)
    at <anonymous> (d:\dev\projects\BBGWebsite\bbg\node_modules\shadertoy-react\lib\shadertoy-react.min.js:1:1)
    at <anonymous> (d:\dev\projects\BBGWebsite\bbg\node_modules\shadertoy-react\lib\shadertoy-react.min.js:1:1)
    at invokeLayoutEffectMountInDEV (d:\dev\projects\BBGWebsite\bbg\node_modules\react-dom\cjs\react-dom.development.js:25133:1)
    at invokeEffectsInDev (d:\dev\projects\BBGWebsite\bbg\node_modules\react-dom\cjs\react-dom.development.js:27351:1)
    at commitDoubleInvokeEffectsInDEV (d:\dev\projects\BBGWebsite\bbg\node_modules\react-dom\cjs\react-dom.development.js:27327:1)

I've spent a lot of time trying to get Visual Studio to use the unminified version but I'm stuck.

It would be really helpful if this module supported two features:

• Typescript support, just in case my approach is wrong.
• An explanation of how to enable the non-minified version for debugging.

Thanks!
shadertoy-react.d.zip

Hi,
shadertoy-react is working really good actually, thanks. However, I wasn't able to find a way to programmatically handle the case that I pass it an erroneous shader? I have that case legitimately because my shader gets built by my react application, so at the moment I can't just guarantee that everything is going fine.
So I see lots of console warnings (and a black screen in shadertoy-react), but would it be an unreasonable effort to make available to catch these errors beforehand?

I'm thinking of a quite unsophisticated prop like onError={err => {/* do stuff with error code, message, whatever */} for the ShadertoyReact component.

I've tried wrapping the thing in try/catch blocks or using react-error-boundary, but they won't fail - as ShadertoyReact doesn't actually fail due to its internal error handling

in any case, great work you did with this library. I totally prefer working with it over the original shadertoy, as it is way smoother.

best,
qm