| 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!
"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" | |
| } | |
| } |
