victorubieto / graph_system

Node-Based Shader Editor:

Home Page:https://victorubieto.github.io/graph_system/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Node-Based Shader Editor

This is the result of my final degree project, which consist on a node-based shader editor implemented on web. The framework is based mainly on the usage of this libraries:

  • Litegl.js - It helps simplifying working with WebGL.
  • Litegraph.js - A library in Javascript to create graphs in the browser.

Functionalities

This is the list of the most important functionalities of the application.

  • Manipulation of the Volume Render algorithm via nodes.
  • Load and visualization of Dicom datasets. In the case you don't have any but you want to try it, I uploaded an anonymized dataset in the repository. More info here.
  • Manipulation of the datasets by editing the transfer function.
  • Download of the Vertex Shader and Fragment Shader createds by the graph editor.
  • Try an online demo here.

List of Nodes

This is the list of the nodes currently available. There are more comming soon, so stay tunned.

  • Input: Number, Color, Coordinates.
  • Texture: Gradient, Noise, Dicom, Transfer Function.
  • Operator: Math, MixRGB, ColorRamp, Translate, Scale, Rotate, Separate, Combine.
  • Shader: Volume.
  • Output: Material Output.

Other libraries used

Examples

Clouds Modeling alt text

Dicom Visualization alt text

About

Node-Based Shader Editor:

https://victorubieto.github.io/graph_system/

License:MIT License


Languages

Language:JavaScript 91.4%Language:CSS 4.7%Language:HTML 2.3%Language:GLSL 1.6%