readme, over, metatags, build test

Author: bandinopla

.github/workflows/pages.yml

@@ -0,0 +1,62 @@
+name: Deploy app to girhub pages
+
+# Trigger the workflow on push to the main branch
+on:
+  push:
+    branches:
+      - main  # Change this if your default branch is different (e.g., 'master')
+
+# Permissions for deploying to gh-pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Jobs to run
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest  # Use the latest Ubuntu runner
+
+    steps:
+      # Checkout the repository code
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # Set up Node.js environment
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'  # Use the Node version compatible with your project
+          cache: 'pnpm'       # Cache pnpm dependencies for faster builds
+
+      # Install PNPM
+      - name: Install PNPM
+        run: npm install -g pnpm  # Installs pnpm globally
+
+      # Install dependencies with PNPM
+      - name: Install Dependencies
+        run: pnpm install  # Uses pnpm to install project dependencies
+
+      # Build the Vite project with PNPM
+      - name: Build
+        run: pnpm run build  # Assumes your package.json has "build": "vite build"
+
+      # Configure GitHub Pages deployment
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      # Upload the built files (Vite outputs to 'dist' by default)
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist  # Vite's default output directory
+
+      # Deploy to GitHub Pages
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+# Optional: Concurrency to avoid multiple deployments running at once
+concurrency:
+  group: "pages"
+  cancel-in-progress: true

README.md

@@ -0,0 +1,51 @@
+# three.js TSL Visual Node Editor
+
+## **[!] Work in progress | Alpha state** <br/>
+Visual node editor, inspired by [Blender's shader editor](https://www.blender.org/), is a tool to visually build [Three.js](https://threejs.org/) materials using [Three.js-Shading-Language](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language). 
+
+It is currently in development, and hoping to welcome developers from the comunity to jump in and add new nodes. Credit will be given to everyone!
+
+# How does it work?
+When you use the app: You create the nodes and the output will be a javascript file that will contain the nodes you created + the node setup in a comment, in case you want to edit the nodes after saving. In your real life project you will import the materials from this js, that will export an array of the materials. You will do something like...
+
+```js
+import { materials } from "./your-saved-file.js";
+const material1 = materials[0]; //<-- this is a THREE.Material 
+```
+
+# How to collaborate?
+I did a few basic nodes, I think the skeleton is setup to allow for easy addition of new nodes, the ideal is for "you" to add new nodes or even improve the current ones. To do so, you must check the [Three.js-Shading-Language Docs](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language)
+
+You can also fix bugs or improve the code/interface. Just clone and do a pull request.
+
+# == Nodes "done"... ==
+These are the nodes currently "done" (room for improvement)...
+- UV Channel
+- Scene Preview
+- (incomplete) MeshStandardNode shader node. ( only colorNode property )
+- Image texture node
+
+------
+------
+------
+
+# Design / How it works...
+## Concepts / Building blocks
+- **Node** : they live in `src/nodes` they are the objects in charge of defining a node and whatever that node does. A Node is not a 1:1 recreation of a TSL node, a node can do a bunch of things, even use many nodes at the same time and build complex structures in TSL. 
+- **Property** : Nodes are a bag filled with properties. They live in `src/properties` and each property is in charge of one aspect of the node.
+- **Outlet**: the input or output socket of a node. A node can have many of both. An outlet is a property that handles the connection between the outside and the node.
+- **Component**: The most basic UI unit. A button, a TextLabel, etc...
+- **Script**: Since this exports a javascript, a `src/export/Script` object is created the moment of the export and each node will be asked to "write" on this script whatever it needs to function. Then this script is covnerted to a string and downloaded as the .js file. The layout info is stored in this file as a comment.
+- **ThreeScene**: object in charge of the preview scene running in the background that allows us to see how the material will look. 
+
+## Theme / colors / styles
+The app is "skinned" using the theme provided by `src/colors/Theme`. A singleton class that provides the settings for the styles. 
+
+## The Script
+Nodes in this app export to a javascript file. This object is in charge of handling how that file is written.
+
+A `Script` is an object that serves as a scope for every node when writing their scripts. "Writing their scripts" means basically writing the actual javascript TSL code that the node represents.
+
+The process is first triggered by the `src/Editor.ts:save()` that creates this object and then asks every node to `.writeScript( script )` to it. This process will generate a domino effect that will "travel" from the node, then it will to the connected nodes vía the input outlets that connect the node to the next node, and so on... until there's no more nodes with connections.
+
+For more info ask me here or via x @bandinopla...

index.html

@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="shortcut icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@bandinopla">
+    <meta name="twitter:title" content="Three.js - TSL Visual Node Editor">
+    <meta property="og:image" content="https://github.com/bandinopla/three.js-visual-node-editor/raw/main/cover.png">
+    <title>Three.js - TSL Visual Node Editor </title>
     <style>
         html, body {
              padding: 0px;
@@ -19,9 +23,18 @@
             top:0px;
             left: 0px;
         }
+        .controls {
+            position: fixed;
+            bottom: 10px;
+            left: 0px;
+            right: 0px;
+            text-align: center;
+            z-index: 99;
+        }
     </style>
   </head>
   <body> 
+    <div class="controls"><strong>ALPHA RELEASE</strong> | DOUBLE CLICK: add new node | SHIFT+A : open | SHIFT+S : save | <a href="https://github.com/bandinopla/three.js-visual-node-editor" target="_blank">Github Page</a></div>
     <canvas id="app" width="1024" height="1024"></canvas>
     <script type="module" src="/src/main.ts"></script>
   </body>

public/cover.png

@@ -1093,6 +1093,10 @@ export class Editor {
 
                     this.restore( data );
                 }
+                else 
+                {
+                    alert("The selected file is not compatible or what not made by this app.")
+                }
             };
 
             reader.onerror = () => alert('Error reading file') ;

public/favicon.ico

@@ -58,7 +58,7 @@ export class ThreeScene {
         //
         // dummy objects
         //
-        const cube = new THREE.Mesh( new THREE.BoxGeometry( 2, 2, 2 ), material ); 
+        const cube = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), material ); 
               cube.name="Cube"; 
               this.objs.push( cube );
               this.objHolder.add(cube);

src/Editor.ts

@@ -15,8 +15,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },