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

• W2ui.js
• JsColor.js
• Rendeer.js
• Volume-base.js
• Volume-loader.js
• JQuery.js
• Gl-Matrix.js
• Daikon.js

Examples

Clouds Modeling

Dicom Visualization