three.jsshaderaframefragment-shadervertex-shader

Using watershader.js shader in aframe

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?

Solution

  • 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.