Skip to content

Instantly share code, notes, and snippets.

@bryik

bryik/.block

Last active Nov 27, 2016
Embed
What would you like to do?
ShaderFrog/A-Frame Export
license: mit

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>
<!-- 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>
var ShaderFrogRuntime=function(e){function r(t){if(a[t])return a[t].exports;var n=a[t]={exports:{},id:t,loaded:!1};return e[t].call(n.exports,n,n.exports,r),n.loaded=!0,n.exports}var a={};return r.m=e,r.c=a,r.p="",r(0)}([function(e,r,a){"use strict";function t(e){return e&&e.__esModule?e:{"default":e}}function n(){}function i(){var e=arguments.length,r=arguments[0];if(2>e)return r;for(var a=1;e>a;a++)for(var t=arguments[a],n=Object.keys(t||{}),i=n.length,s=0;i>s;s++){var o=n[s];r[o]=t[o]}return r}function s(e){return i({},e)}function o(e){var r=s(e),a=void 0,t=void 0;for(a=0;t=arguments[a++ +1];)delete r[t];return r}Object.defineProperty(r,"__esModule",{value:!0});var u=a(1),d=t(u);n.prototype={mainCamera:null,cubeCameras:{},reserved:{time:null,cameraPosition:null},umap:{"float":{type:"f",value:0},"int":{type:"i",value:0},vec2:{type:"v2",value:function(){return new d["default"].Vector2}},vec3:{type:"v3",value:function(){return new d["default"].Vector3}},vec4:{type:"v4",value:function(){return new d["default"].Vector4}},samplerCube:{type:"t"},sampler2D:{type:"t"}},getUmap:function(e){var r=this.umap[e].value;return"function"==typeof r?r():r},load:function(e,r){var a=this,t=e,n="string"==typeof e;n&&(t=[e]);for(var i=new Array(t.length),s=0,o=function(e,o){var u=new d["default"].XHRLoader;u.load(o,function(u){var d=void 0;try{d=JSON.parse(u),delete d.id}catch(m){throw new Error("Could not parse shader"+o+"! Please verify the URL is correct.")}a.add(d.name,d),i[e]=d,++s===t.length&&r(n?i[0]:i)})},u=0;u<t.length;u++)o(u,t[u])},registerCamera:function(e){if(!(e instanceof d["default"].Camera))throw new Error("Cannot register a non-camera as a camera!");this.mainCamera=e},registerCubeCamera:function(e,r){if(!r.renderTarget)throw new Error("Cannot register a non-camera as a camera!");this.cubeCameras[e]=r},unregisterCamera:function(e){if(e in this.cubeCameras)delete this.cubeCameras[e];else{if(e!==this.mainCamera)throw new Error("You never registered camera "+e);delete this.mainCamera}},updateSource:function(e,r,a){if(a=a||"name",!this.shaderTypes[e])throw new Error("Runtime Error: Cannot update shader "+e+" because it has not been added.");var t=this.add(e,r),n=void 0,s=void 0;for(s=0;n=this.runningShaders[s++];)n[a]===e&&(i(n.material,o(t,"id")),n.material.needsUpdate=!0)},renameShader:function(e,r){var a=void 0,t=void 0;if(!(e in this.shaderTypes))throw new Error("Could not rename shader "+e+" to "+r+". It does not exist.");for(this.shaderTypes[r]=this.shaderTypes[e],delete this.shaderTypes[e],a=0;t=this.runningShaders[a++];)t.name===e&&(t.name=r)},get:function(e){var r=this.shaderTypes[e];return r.initted||this.create(e),r.material},add:function(e,r){var a=s(r),t=void 0;a.fragmentShader=r.fragment,a.vertexShader=r.vertex,delete a.fragment,delete a.vertex;for(var n in a.uniforms)t=a.uniforms[n],null===t.value&&(a.uniforms[n].value=this.getUmap(t.glslType));return e in this.shaderTypes?i(this.shaderTypes[e],a):this.shaderTypes[e]=a,a},create:function(e){var r=this.shaderTypes[e];return r.material=new d["default"].RawShaderMaterial(r),this.runningShaders.push(r),r.init&&r.init(r.material),r.material.needsUpdate=!0,r.initted=!0,r.material},updateRuntime:function(e,r,a){a=a||"name";var t=void 0,n=void 0,i=void 0,s=void 0;for(n=0;t=this.runningShaders[n++];)if(t[a]===e)for(i in r.uniforms)i in this.reserved||i in t.material.uniforms&&(s=r.uniforms[i],"t"===s.type&&"string"==typeof s.value&&(s.value=this.cubeCameras[s.value].renderTarget),t.material.uniforms[i].value=r.uniforms[i].value)},updateShaders:function(e,r){var a=void 0,t=void 0;for(r=r||{},t=0;a=this.runningShaders[t++];){for(var n in r.uniforms)n in a.material.uniforms&&(a.material.uniforms[n].value=r.uniforms[n]);"cameraPosition"in a.material.uniforms&&this.mainCamera&&(a.material.uniforms.cameraPosition.value=this.mainCamera.position.clone()),"viewMatrix"in a.material.uniforms&&this.mainCamera&&(a.material.uniforms.viewMatrix.value=this.mainCamera.matrixWorldInverse),"time"in a.material.uniforms&&(a.material.uniforms.time.value=e)}},shaderTypes:{},runningShaders:[]},r["default"]=n,e.exports=r["default"]},function(e,r){e.exports=THREE}]);
{
"id": 47,
"name": "Universe Nursery",
"fragment": "// http://casual-effects.blogspot.com/2013/08/starfield-shader.html\n#extension GL_OES_standard_derivatives : enable\n\n#define iterations 17\n#define volsteps 8\n#define sparsity 0.5\n#define stepsize 0.2\n #define frequencyVariation 1.3\n\nprecision highp float;\nprecision highp int;\n\nvarying vec2 vUv;\nvarying vec3 vPosition;\nvarying vec3 vNormal;\n\nuniform vec3 color;\nuniform float time;\nuniform float twinkleSpeed;\nuniform float speed;\n \nuniform float brightness;\nuniform float distfading;\n \n\n#define PI 3.141592653589793238462643383279\n\nvoid main( void ) {\n\n vec2 uv = vUv.xy + 0.5;\n uv.x += time * speed * 0.1;\n \n vec3 dir = vec3(uv * 2.0, 1.0);\n \n float s = 0.1, fade = 0.01;\n vec3 starColor = vec3(0.0);\n \n for (int r = 0; r < volsteps; ++r) {\n vec3 p = (time * speed * twinkleSpeed) + dir * (s * 0.5);\n p = abs(vec3(frequencyVariation) - mod(p, vec3(frequencyVariation * 2.0)));\n \n float prevlen = 0.0, a = 0.0;\n for (int i = 0; i < iterations; ++i) {\n p = abs(p);\n p = p * (1.0 / dot(p, p)) + (-sparsity); // the magic formula \n float len = length(p);\n a += abs(len - prevlen); // absolute sum of average change\n prevlen = len;\n }\n \n a *= a * a; // add contrast\n \n // coloring based on distance \n starColor += (vec3(s, s*s, s*s*s) * a * brightness + 1.0) * fade;\n fade *= distfading; // distance fading\n s += stepsize;\n }\n \n starColor = min(starColor, vec3(1.2));\n \n // Detect and suppress flickering single pixels (ignoring the huge gradients that we encounter inside bright areas)\n float intensity = min(starColor.r + starColor.g + starColor.b, 0.7);\n \n vec2 sgn = (vec2(vUv.xy)) * 2.0 - 1.0;\n vec2 gradient = vec2(dFdx(intensity) * sgn.x, dFdy(intensity) * sgn.y);\n float cutoff = max(max(gradient.x, gradient.y) - 0.1, 0.0);\n starColor *= max(1.0 - cutoff * 6.0, 0.3);\n \n // Motion blur; increases temporal coherence of undersampled flickering stars\n // and provides temporal filtering under true motion. \n gl_FragColor = vec4( starColor * color, 1.0 );\n}\n",
"vertex": "precision highp float;\r\nprecision highp int;\r\n\r\nuniform mat4 modelMatrix;\r\nuniform mat4 modelViewMatrix;\r\nuniform mat4 projectionMatrix;\r\nuniform mat4 viewMatrix;\r\nuniform mat3 normalMatrix;\r\n\r\nattribute vec3 position;\r\nattribute vec3 normal;\r\nattribute vec2 uv;\r\nattribute vec2 uv2;\r\n\r\nvarying vec2 vUv;\r\nvarying vec3 vPosition;\r\nvarying vec3 vNormal;\r\n\r\nvoid main() {\r\n vUv = uv;\r\n vPosition = position;\r\n vNormal = normal;\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n}",
"uniforms": {
"color": {
"type": "c",
"glslType": "vec3",
"value": {
"r": 1,
"g": 1,
"b": 1
},
"description": "",
"textureId": null,
"runtime": {
"texture": null
}
},
"time": {
"type": "f",
"glslType": "float",
"description": "",
"textureId": null,
"runtime": {
"texture": null
}
},
"speed": {
"type": "f",
"glslType": "float",
"value": "0.2",
"description": "",
"textureId": null,
"runtime": {
"texture": null
}
},
"brightness": {
"type": "f",
"glslType": "float",
"value": "0.0018",
"description": "",
"textureId": null,
"runtime": {
"texture": null
}
},
"distfading": {
"type": "f",
"glslType": "float",
"value": "0.75",
"description": "",
"textureId": null,
"runtime": {
"texture": null
}
},
"twinkleSpeed": {
"type": "f",
"glslType": "float",
"value": "0.04",
"description": "",
"textureId": null,
"runtime": {
"texture": null
}
}
},
"url": "http://shaderfrog.com/app/view/47",
"user": {
"username": "andrewray",
"url": "http://shaderfrog.com/app/profile/andrewray"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment