How to use gl-react with next.js ? Is there any documentation about this ?
amapic opened this issue · comments
hello,
I am using gl-react-headless with next.js. Nothing is rendered and I have this error:
Received
false
for a non-boolean attributedebug
.If you want to write it to the DOM, pass a string instead: debug="false" or debug={value.toString()}.
What to do ?
here's my code:
import React, { dyna } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-headless"; // for React DOM
import dynamic from "next/dynamic";
const shaders = Shaders.create({
helloBlue: {
frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float blue;
void main() {
gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`,
},
});
class HelloBlue extends React.Component {
render() {
const { blue } = this.props;
return <Node shader={shaders.helloBlue} uniforms={{ blue }} />;
}
}
export default function Home() {
return (
<Surface width={300} height={300}>
<HelloBlue blue={0.5} />
</Surface>
);
}
the error is weird and unfamiliar to me. can you try to maybe wrap the surface in a <div>
? maybe Surface don't properly render on the SSR side, weird behavior because my website manage to make gl-react work through next.js
for instance: https://github.com/gre/gre/blob/master/pages/shaderday/%5Bday%5D/index.js (which renders Visual which uses a gl react shader => example https://greweb.me/shaderday/1 )