Add centering to UV node

emilwidlund · Sep 4, 2023 · ae1770b · ae1770b
1 parent 239cc2c
commit ae1770b
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 10 deletions.
diff --git a/packages/client/src/templates/layer.ts b/packages/client/src/templates/layer.ts
@@ -54,7 +54,14 @@ export const DEFAULT_NEW_CIRCUIT_LAYER_CONTEXT = {
                 name: 'UV',
                 type: 'UV',
                 data: { position: { x: -802, y: 240 } },
-                inputs: {},
+                inputs: {
+                    center: {
+                        id: '4b1d7a5b-55b1-4e8f-8252-57d5a948gb6c',
+                        name: 'Center',
+                        type: 'bool',
+                        defaultValue: { tag: 'lit', type: 'bool', val: false }
+                    }
+                },
                 outputs: {
                     uv: {
                         id: '4eddd22e-f245-4b7a-b447-651b2f913876',

diff --git a/packages/client/src/utils/nodes/nodes.ts b/packages/client/src/utils/nodes/nodes.ts
@@ -72,6 +72,7 @@ export const nodesHierarchy: (
 ) => ContextMenuContainerSection[] = createNodeCallback => [
     {
         items: [
+            extractItem(createNodeCallback)(GLSLNode),
             {
                 icon: 'shapes',
                 label: 'Common',
@@ -89,8 +90,7 @@ export const nodesHierarchy: (
                             CeilNode,
                             ClampNode,
                             StepNode,
-                            SmoothstepNode,
-                            GLSLNode
+                            SmoothstepNode
                         ].map(extractItem(createNodeCallback))
                     }
                 ]

diff --git a/packages/webgl/src/nodes/accessor/UVNode/UVNode.ts b/packages/webgl/src/nodes/accessor/UVNode/UVNode.ts
@@ -1,6 +1,6 @@
-import { $xy } from '@thi.ng/shader-ast';
+import { $xy, bool, div } from '@thi.ng/shader-ast';
 import { aspectCorrectedUV } from '@thi.ng/shader-ast-stdlib';
-import { Node, IOutputProps, Output } from '@usealma/graph';
+import { Node, IOutputProps, Output, IInputProps, Input } from '@usealma/graph';
 import { defaults } from 'lodash';
 
 import { IUVNodeInputs, IUVNodeOutputs, IUVNodeProps } from './UVNode.types';
@@ -18,7 +18,16 @@ export class UVNode extends Node {
     constructor(context: WebGLContext, props: IUVNodeProps = {}) {
         super(context, props);
 
-        this.inputs = {};
+        this.inputs = {
+            center: new Input(
+                this,
+                defaults<Partial<IInputProps<'bool'>> | undefined, IInputProps<'bool'>>(props.inputs?.center, {
+                    name: 'Center',
+                    type: 'bool',
+                    defaultValue: bool(false)
+                })
+            )
+        };
 
         this.outputs = {
             uv: new Output(
@@ -27,7 +36,10 @@ export class UVNode extends Node {
                     name: 'UV',
                     type: 'vec2',
                     value: () => {
-                        return aspectCorrectedUV($xy(context.target.gl_FragCoord), context.uniforms.uResolution);
+                        // @ts-ignore
+                        return this.resolveValue(this.inputs.center.value).val === true
+                            ? aspectCorrectedUV($xy(context.target.gl_FragCoord), context.uniforms.uResolution)
+                            : div($xy(context.target.gl_FragCoord), context.uniforms.uResolution);
                     }
                 })
             ),

diff --git a/packages/webgl/src/nodes/accessor/UVNode/UVNode.types.ts b/packages/webgl/src/nodes/accessor/UVNode/UVNode.types.ts
@@ -1,9 +1,10 @@
-import { INodeProps, IOutputProps, Output } from '@usealma/graph';
+import { IInputProps, INodeProps, Input, IOutputProps, Output } from '@usealma/graph';
 
 import { UVNode } from './UVNode';
 
 export interface IUVNodeInputs {
-    [key: string]: never;
+    [key: string]: Input<'bool', UVNode>;
+    center: Input<'bool', UVNode>;
 }
 
 export interface IUVNodeOutputs {
@@ -13,6 +14,9 @@ export interface IUVNodeOutputs {
 }
 
 export interface IUVNodeProps extends INodeProps {
+    inputs?: {
+        center?: IInputProps<'bool'>;
+    };
     outputs?: {
         uv?: IOutputProps<'vec2'>;
         fragCoord?: IOutputProps<'vec4'>;

diff --git a/packages/webgl/src/nodes/textures/TextureNode/TextureNode.ts b/packages/webgl/src/nodes/textures/TextureNode/TextureNode.ts
@@ -16,7 +16,7 @@ export class TextureNode extends Node {
 
     declare inputs: ITextureNodeInputs;
     declare outputs: ITextureNodeOutputs;
-    data: ITextureNodeData;
+    declare data: ITextureNodeData;
     textureId!: string;
     texture!: Texture;