GLSL in JavaScript with Babel

shader-def-no-keywords.js

// flow type alias
// see http://flowtype.org/docs/type-aliases.html
type MVP = {
  m: vec4,
  v: vec4,
  p: vec4
}

@uniform
const UFoo _.extends(UMVP, {
  light: vec3
})


// class like vertex definition
@uniform(MVP)
@varying(VFoo)
@attribute(AFoo)
@vertex
export class FooVertex {
  // Only callable from vertex shader
  vertexFunction() {
    
  }
  main(position, foo) {
    
  }
}

// named function like vertex definition
@uniform(UFoo)
@varying(VFoo)
@attribute(AFoo)
@vertex
export function FooVertex(position, foo) {
  
}

// class like fragment definition
@uniform(UFoo)
@varying(VFoo)
@fragment
export class FooFragment {
  // Only callable from fragment shader
  fragmentFunction() {
    
  }
  main(foo) {
    
  }
}

// named function like fragment shader
@uniform(UFoo)
@varying(VFoo)
@fragment
export function FooFragment(foo) {
  
}

// Aside from vertex/fragment function, both types of shaders can call vanilla js function

// vertex + fragment makes material 
// compiler should check compatibility by verifying uniforms and varyings

// `material` keyword - like `class` keyword
// inline def, use anonymouse vertex/fragment definition
@material
@uniform(UFoo)
@varying(VFoo)
export class Foo {
  vertex(position, fooAttr) {
    
  }
  
  fragment(fooVary) {
    
  }
}

// composition def
@material
@uniform('UFoo')
export const Foo = {
  FooVertex,
  FooFragment
}

shader-def.js

// `uniform` - like interface
uniform UMVP {
  m: vec4,
  v: vec4,
  p: vec4
}

uniform UFoo extends UMVP {
  light: vec3
}

// varying - like interface or type
varying VFoo {
  
}

// attribute - like type
attribute AFoo {
  
}

// class like vertex definition
export vertex FooVertex uniform UFoo varying VFoo {
  // Only callable from vertex shader
  vertexFunction() {
    
  }
  main(position, foo: AFoo) {
    
  }
}

// named function like vertex definition
export vertex FooVertex(position, foo: AFoo) uniform UFoo varying VFoo {
  
}

// class like fragment definition
export fragment FooFragment uniform UFoo {
  // Only callable from fragment shader
  fragmentFunction() {
    
  }
  main(foo: VFoo) {
    
  }
}

// named function like fragment shader
export fragment FooFragment(foo: VFoo) uniform UFoo {
  
}

// Aside from vertex/fragment function, both types of shaders can call vanilla js function

// vertex + fragment makes material 
// compiler should check compatibility by verifying uniforms and varyings

// `material` keyword - like `class` keyword
// inline def, use anonymouse vertex/fragment definition
export material FooShader uniform UFoo {
  vertex(position, foo: AFoo) varying VFoo {
    
  }
  
  fragment(foo: VFoo) {
    
  }
}

// composition def
export material Foo uniform UFoo {
  FooVertex,
  FooFragment
}

// When required from another shader file,
// compiler reference it for linking
// When required from vanilla JS,
// compiler generates a JS object representation of shaders,
// whose `toString` method return generated GLSL
import { FooVertex, FooFragment, Foo } from './foo'

// create the final material - without type check
var shaderMaterial = new THREE.MeshShaderMaterial({
    uniforms:       uniforms,
    attributes:     attributes,
    vertexShader:   FooVertex,
    fragmentShader: FooFragment
})

// transform - with type check
var shaderMaterial = Foo.THREE({uniforms, attributes})

simd.js

instruction function add(a, b) {
  return a + b
}

// Translate into:
attribute AddAttr {
  a: float,
  b: float
}

varying AddVary {
  c: float
}

vertex addVertex(pos, { a, b }: AddAttr) varying AddVary {
  this.varying.c = a + b
}

instruction function sqrt(s) {
  return sqrt(s)
}

// A, B -> vertex attributes
var A = [1, 2, 3],
  B = [4, 5, 6]

var C = SIMD add(A, B)
var S = SIMD sqrt(C)