Library to write shaders in Typescript

Resources
1

I’ve been working on a library to be able to create shaders directly in Typescript to solve the difficulties that comes with trying to extend the built in shaders in GLSL. It provides a syntax which is intuitive and concise. Almost 100% of GLSL is supported.

Example

Here’s a small example for creating a green material with physical lighting. The lighting is ported from Three’s GLSL implementation to an implementation using only the library itself. The example also demonstrates how to declare uniforms and how to use it to, in this case, move the vertices up and down.

const time = uniformFloat("time")
const diffuse = rgb(0x00ff00)
const color = standardMaterial({ color: diffuse })
const bounce = translateY(sin(time.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)

For a demonstration of a more advanced implementation, please take a look at the implementation of the standard material.

What about the built in node based approach?

There is already an existing attempt at this included in Three.js. The reason for not using that one rather than inventing my own solution is just bad research on my part. I was far too deep into this implementation before I learned about the existing implementation so I decided to finish this.

Although there are similarities in the two implementations, I believe there are some improvements in this one which maybe can inspire further developments in the one included in Three.js. For example:

  • It’s more concise. Much less code is needed and it should feel more familiar to those used to writing GLSL.
  • It is type safe. If you are using Typescript, the compiler will prevent you from for example multiplying a 3 component vector with a 4x4 matrix.

You can find the documentation on Github.