three-shader-graph

Create shaders with typescript or javascript for Three.js. The library provides the ability to write code that should be familiar to those with experience with GLSL. The Javascript code will be executed to generate GLSL code but the syntax will make it appear as if you are writing shader code direclty in Typescript/Javascript. The Javascript code builds a directed acyclic graph which is used to generate the GLSL code, hence the graph terminology.

Why?

Writing shaders using GLSL for Three.js is not a great developer experience. First of, it is a new language to learn. Second, and more imprtantly, it involves combining chunks of code as strings in order to provide code reusability. Common non-trivial functionality like calculating ligthing is hard to reuse which leads to poor solutions of trying to inject strings of GLSL in multiple places in the built in shaders to add the needed functionality.

Hology Engine

This library is integrated in Hology Engine, a game engine and editor for creating 3D experiences. Check out https://hology.app to get started.

Features

• Close to 100% support for GLSL language and standard library
• Reusable Physical and Lambert lighting implementations.
• Built in fog effect using the Three.js fog parameters defined on the THREE.Scene

Example

const uniformTime = uniformFloat('time');

const diffuse = rgb(0x00ff00);
const color = standardMaterial({ color: diffuse });
const bounce = translateY(sin(uniformTime.multiply(float(5))));

const material = new NodeShaderMaterial({
  color,
  transform: bounce,
  uniforms: {
    time: { value: 0 },
  },
});

const sphere = new SphereGeometry(5, 30, 15);
const mesh = new Mesh(sphere, material);

Experimental WebGPU bridge

createNodeWebGpuMaterial is an intentionally small bridge for using existing node graphs with webgpu-renderer's WGSLShaderMaterial. It retains node output roots so a material can be derived at runtime. Its supported nodes emit WGSL directly: scalar/vector constants and uniforms, arithmetic, sampler2D sampling, typed vertex-to-fragment varyings, and the existing standardMaterial(...) authoring API.

const tint = uniformVec3('tint', new Vector3(0.16, 0.56, 0.95));
const source = createNodeWebGpuMaterial({
  color: rgba(tint.multiplyScalar(uniformFloat('intensity', 1))),
}).compile();

const material = new WGSLShaderMaterial(source);

For standardMaterial, the WebGPU path supports base color/alpha, roughness, metalness, emissive, ambient occlusion, baked light, world-space normal and world position. It evaluates the renderer's directional, point, and spot-light arrays (including renderer shadows) itself, so it is not lit a second time by the generic graph bridge. This keeps the public material call site shared with WebGL and lets the renderer later replace its fixed arrays with Forward+ data behind the same shader-header functions.

Environment/CubeUV lighting, normal-map tangent-frame construction, rect-area lights, sheen, anisotropy, texture arrays, and other GLSL-only nodes are intentionally not ported by this bridge yet; they fail explicitly rather than silently generating incorrect WGSL. The working standard-material, texture-and-varying example is in webgpu-renderer/demo/examples/shaderGraph.ts.

Install

npm install three-shader-graph

Release

1. Update the version in package.json
2. npm install && npm run fix && npm run build

Documentation

See the wiki