cimplify fragmentshader

emilwidlund · Sep 25, 2024 · 131f0bd · 131f0bd
1 parent c1af13b
commit 131f0bd
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/apps/web/src/circuit/components/Node/Node.tsx b/apps/web/src/circuit/components/Node/Node.tsx
@@ -18,6 +18,7 @@ import { Spinner } from '@/components/Spinner/Spinner';
 import { NodeType, Shader } from '@bitspace/nodes';
 import { useModal } from '@/hooks/useModal';
 import { Modal } from '@/components/Modal/Modal';
+import { FragmentEditor } from '@/components/FragmentEditor/FragmentEditor';
 
 export const Node = observer(
     ({ node, actions, window, onMoveStop }: NodeProps) => {
@@ -186,7 +187,7 @@ export const Node = observer(
                                 <>
                                     <NodeAction
                                         color="bg-yellow-400"
-                                        onClick={() => show()}
+                                        onClick={show}
                                     />
                                     <Modal
                                         hide={hide}
@@ -270,34 +271,3 @@ export const NodeWindow = ({
         </div>
     );
 };
-
-const FragmentEditor = ({ node }: { node: Shader }) => {
-    const [fragment, setFragment] = React.useState('');
-
-    React.useEffect(() => {
-        const subscription = node.$fragmentShader.subscribe(setFragment);
-
-        return () => {
-            subscription.unsubscribe();
-        };
-    }, [node]);
-
-    return (
-        <div className="flex flex-col p-12 min-h-96">
-            <textarea
-                className="bg-slate-100 p-4 h-full rounded-2xl font-mono text-sm"
-                value={fragment}
-                onKeyDown={e => {
-                    e.stopPropagation();
-                }}
-                onChange={e => {
-                    e.stopPropagation();
-                    setFragment(e.target.value);
-                }}
-                onBlur={e => {
-                    node.$fragmentShader.next(fragment);
-                }}
-            />
-        </div>
-    );
-};
diff --git a/apps/web/src/components/FragmentEditor/FragmentEditor.tsx b/apps/web/src/components/FragmentEditor/FragmentEditor.tsx
@@ -0,0 +1,33 @@
+import { Shader } from "@bitspace/nodes";
+import { useEffect, useState } from "react";
+
+export const FragmentEditor = ({ node }: { node: Shader }) => {
+    const [fragment, setFragment] = useState('');
+
+    useEffect(() => {
+        const subscription = node.$fragmentShader.subscribe(setFragment);
+
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [node]);
+
+    return (
+        <div className="flex flex-col p-12 min-h-96">
+            <textarea
+                className="bg-slate-100 p-4 h-full rounded-2xl font-mono text-sm"
+                value={fragment}
+                onKeyDown={e => {
+                    e.stopPropagation();
+                }}
+                onChange={e => {
+                    e.stopPropagation();
+                    setFragment(e.target.value);
+                }}
+                onBlur={e => {
+                    node.$fragmentShader.next(fragment);
+                }}
+            />
+        </div>
+    );
+};
diff --git a/packages/nodes/src/primitives/Shader/Shader.ts b/packages/nodes/src/primitives/Shader/Shader.ts
@@ -2,8 +2,13 @@ import { Input, Node, Output } from '@bitspace/circuit';
 import {
     BehaviorSubject,
     combineLatest,
+    EMPTY,
+    filter,
     map,
+    mergeMap,
     of,
+    pairwise,
+    startWith,
     Subscription,
     switchMap,
     tap
@@ -32,7 +37,6 @@ void main() {
 }`;
 
 const FRAGMENT_SHADER = `varying vec2 vUv;
-uniform vec3 color;
 uniform float time;
 
 void main() {
@@ -56,7 +60,9 @@ export class Shader extends Node {
             name: 'Output',
             type: ShaderSchema(),
             observable: this.$fragmentShader.pipe(
-                tap(console.log),
+                startWith(''),
+                pairwise(),
+                mergeMap(([prev, next]) => (prev !== next ? of(next) : EMPTY)),
                 tap(this.buildInputs.bind(this)),
                 map(this.buildMaterial.bind(this)),
                 switchMap(this.updateUniforms.bind(this))
@@ -95,7 +101,6 @@ export class Shader extends Node {
         return new ShaderMaterial({
             vertexShader: VERTEX_SHADER,
             fragmentShader,
-            side: DoubleSide,
             uniforms: this.parseUniforms(fragmentShader).reduce(
                 (acc, uniform) => ({
                     ...acc,