Effect Node APIs

Start a Runtime

Inside: /pages/index.js

(Concept Reference)

// graph json from firebaselet json = {  /* ... */};
// vfx-nodes folder logic codeslet getCodes = () => {  /* ... */};
let runtime = new ENRuntime({ json, codes: getCodes() });
// make the onloop worksuseFrame(() => {  runtime.mini.work();});

Import Paramters into the Runtime

Inside: /pages/index.js

(Concept Reference)

//...let { scene, gl } = useThree();
let runtime = new ENRuntime({ json, codes: getCodes() });
// importruntime.mini.set("scene", scene);runtime.mini.set("renderer", gl);// etc...

Simple ThreeJS

Inside: /pages/index.js

(Concept Reference)

export async function effect({ node, mini }) {  // automatic module resolution  let scene = await mini.ready.scene;
  // make a box  let box = new Mesh(    new BoxBufferGeometry(2, 2, 2),    new MeshBasicMaterial({ wireframe: true })  );
  // add to scene and auto cleanup  scene.add(box);  mini.onClean(() => {    scene.remove(box);  });
  // animation  mini.onLoop(() => {    box.rotation.y += 0.01;  });}

Simple Signal Input

export async function effect({ node, mini }) {  node.in0.stream((value) => {    console.log("listening input 0 stream", value);  });
  node.in1.stream((value) => {    console.log("listening input 1 stream", value);  });}

Simple Signal Output

export async function effect({ node, mini }) {  // sending signal out of outout0  node.out0.pulse({    myData: 123,    myDear: 123,  });
  // sending signal out of outout1  node.out1.pulse({    myData: 123,    myDear: 123,  });}

Auto Resize RenderTarget

export async function effect({ node, mini }) {  let gl = mini.ready.gl;
  // RenderTarget use case  let target = new WebGLRenderTarget();  mini.onClean(() => {    target.dispose();  });  mini.onResize(() => {    //    let dpi = gl.renderer.getPixelRatio();    target.setSize(window.innerWidth * dpi, window.innerHeight * dpi);  });
  //  //}

How to use React Three Fiber Components?

export async function effect({ node, mini }) {  //
  mini.set(    "MyOwnComponentABC",    <mesh>      <boxBufferGeometry args={[3, 3, 3, 2, 2, 2]}></boxBufferGeometry>      <meshBasicMaterial wireframe={true}></meshBasicMaterial>    </mesh>  );}

let [myInst, setCompos] = useState(() => {  return <group></group>;});
let runtime = new ENRuntime({ json, codes: getCodes() });runtime.mini.get("MyOwnComponentABC").then((v) => {  setCompos(v);});
return <group>{myInst}</group>;