gl-react

gl-react copied to clipboard

hello,

I am using gl-react-headless with next.js. Nothing is rendered and I have this error:

Received false for a non-boolean attribute debug.

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 )