Using watershader.js shader in aframe

Question

I am looking to understand how external shader files can be used inside a-frame without copying the shader code. I know that we can define custom shaders using aframe's registershader but is there a way to point the vertex and fragment shader code to an external URL?

For example, if I want to use the shader defined here - Mr. Doob's water shader within a-frame, how can I do so without copying the shader code to my local file?

Answer 1

The script contains a global definition for

THREE.ShaderLib[ 'water' ]

if you include it in your html, you should be able to access it anywhere:

THREE.ShaderLib['water'].vertexShader // vertexShader

example here.

---

To register a shader, you'd only have to properly define all uniforms in the schema:

AFRAME.registerShader('foo', {
  schema: {
    //all uniforms from the water shader lib
  },
  vertexShader: THREE.ShaderLib[ 'water' ].vertexShader,
  fragmentShader: THREE.ShaderLib[ 'water' ].fragmentShader
})

---

The script uses a THREE.Mirror which also needs to be included if you want to fully utilize the water ShaderLib.