Preview Geometry Nodes on web using React

Geometry Node Graph

Preview Geometry Nodes on web using React

Getting Started

1. Clone this project: git clone https://github.com/whoisryosuke/geometry-node-graph.git
2. Install dependencies: yarn
3. Start the dev server: yarn dev

Open the app in your web browser, you should see a node graph.

Previewing your nodes

This app works by using JSON files with geometry node data exported from Blender using a custom plugin (TBD). But I included the WIP script below, it should work to export some basic graphs (haven’t tested stuff like custom nodes, groups, etc).

1. Save your file somewhere.
2. Select the object with the geometry nodes modifier.
3. Go to the Scripting tab in Blender (or change one of the windows to scripting)
4. Create a new script (click the “New” button on top of window)
5. Paste in the script from here
6. Run the script.
7. Look inside the folder where your file is saved, you should a JSON file
8. Copy and paste that JSON file into the src/data/ folder of this app.
9. Open up the src/App.tsx and swap your JSON filename for the one imported in there.
10. Hard refresh the browser/app to see changes.

How it works

This app uses react-flow to display the node graph. It provides a lot of nice stuff out of the box, like the zooming and panning.

The nodes are generated from a JSON file that is exported from Blender using a custom Python script. It basically reads the geometry node data and creates a JSON file with the data.

Interested in learning more? Check out my blog, where I break down how this works.

Release

1. Bump version in package.json
2. yarn build
3. npm publish

GitHub

View Github

Comments

[MD Taseen Khan]

Here is a summary of the key points in the content:

• This project allows you to preview geometry node graphs exported from Blender on the web using React.

• The app imports a JSON file exported from Blender using a Python script. This JSON file contains the node graph data.

• The react-flow library is used to display the node graph and provide features like zooming and panning.

• The author has provided a WIP Python script to export basic node graphs from Blender. This can generate a JSON file that can be imported into the React app.

• The author has a blog post that breaks down how the project works in more detail.

That covers the main aspects of how the content describes previewing geometry node graphs on the web. I hope this summary helps! Let me know if you need any clarification or have additional questions.