https://github.com/keavon/brush-nodes

WebGL node-driven procedural material generator prototype
https://github.com/keavon/brush-nodes

node-editor node-graph noise-generator procedural-generation procedural-textures texture-mapping texturing webgl

Last synced: about 1 year ago
JSON representation

WebGL node-driven procedural material generator prototype

• Host: GitHub
• URL: https://github.com/keavon/brush-nodes
• Owner: Keavon
• Created: 2019-03-05T12:23:39.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-31T05:54:07.000Z (about 2 years ago)
• Last Synced: 2025-03-18T09:01:42.382Z (about 1 year ago)
• Topics: node-editor, node-graph, noise-generator, procedural-generation, procedural-textures, texture-mapping, texturing, webgl
• Language: JavaScript
• Homepage: https://keavon.github.io/Brush-Nodes/
• Size: 574 KB
• Stars: 30
• Watchers: 6
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Overview

Brush-Nodes is a web-based prototype of a node-based procedural material generator, similar to Substance Designer. The prototype supports building and wiring up a node graph composed of two nodes: Perlin Noise and Blend. The seed and scale can be adjusted for the Perlin noise node and the opacity and blend mode (normal, dissolve, multiply, screen, add, overlay, subtract) can be set on each node. The node graph is built in the DOM with HTML and CSS, while the node compositing pipeline, preview thumbnails, and the final 2D and 3D outputs are implemented in WebGL with custom GLSL shaders for each node's compositing operations. The output node supports base color and height displacement values that can be previewed on the spinning plane.

# Usage and Demos

### [New Material: Start with a default node graph  ![Brush-Nodes startup screengrab](https://files.keavon.com/-/BarePerkyBlackbuck/capture.png)](https://keavon.github.io/Brush-Nodes/)

### [Demo 1: A simple diffuse-only material  ![Brush-Nodes demo 1 screengrab](https://files.keavon.com/-/MaleOldlaceFulmar/capture.png)](https://keavon.github.io/Brush-Nodes/#demo1)

### [Demo 2: A diffuse and displacement material  ![Brush-Nodes demo 2 screengrab](https://files.keavon.com/-/PlayfulRoastedAssassinbug/capture.png)](https://keavon.github.io/Brush-Nodes/#demo2)

### [Demo 3: A more sophisticated material  ![Brush-Nodes demo 3 screengrab](https://files.keavon.com/-/BlondDeeppinkZebratailedlizard/capture.png)](https://keavon.github.io/Brush-Nodes/#demo3)