D3 Examples - ShaderFrog/A-Frame Export

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.

xxxxxxxxxx
 
<!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>
​
    <!-- Small component to update shaders every tick -->
    <script type="text/javascript">
      AFRAME.registerComponent('update-shaders', {
        tick: function (t) {
          runtime.updateShaders( clock.getElapsedTime() );
        }
      });
    </script>
​
    <!-- A-Frame Scene -->
    <a-scene antialias='true' update-shaders>
​
      <!-- Shader will be applied to this entity -->
      <a-box id="target" position='0 2 -2.5' scale="1.5 1.5 1.5">
        <!-- Rotation for style -->
        <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>
​
    <!-- Set up ShaderFrog Runtime https://github.com/DelvarWorld/ShaderFrog-Runtime -->
    <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>
    