ShaderFrog/A-Frame Export

Testing ShaderFrog's export feature. Getting it working with A-Frame is a bit of a hack, attempting to wrap the whole thing in a component resulted in shader compilation errors.

Update (Nov 27, 2016): msj121 has built a component for importing these shaders into A-Frame!

References

"Universe Nursery" shader created by andrewray.

Uses the ShaderFrog runtime utility.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ShaderFrog Export to A-Frame</title>
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
    <script src="shaderfrog-runtime.min.js"></script>
  </head>
  <body>

<script type="text/javascript">
      AFRAME.registerComponent('update-shaders', {
        tick: function (t) {
          runtime.updateShaders( clock.getElapsedTime() );
        }
      });
    </script>

<a-scene antialias='true' update-shaders>

<a-box id="target" position='0 2 -2.5' scale="1.5 1.5 1.5">
        
        <a-animation attribute="rotation"
                     dur="100000"
                     fill="forwards"
                     to="360 360 360"
                     repeat="indefinite"
                     easing="linear"></a-animation>
      </a-box>

<a-plane rotation="-90 0 0" position="0 0 -1" width="4" height="4" color="black"></a-plane>
      <a-sky color="white"></a-sky>
    </a-scene>

<script type="text/javascript">
      var runtime = new ShaderFrogRuntime();
      var clock = new THREE.Clock();

var target = document.querySelector('#target');

runtime.load( 'Universe_Nursery.json', function( shaderData ) {

// Get the Three.js material you can assign to your objects
          var material = runtime.get( shaderData.name );

target.getObject3D('mesh').material = material;
      });
    </script>
  </body>
</html>

https://aframe.io/releases/0.3.0/aframe.min.js