Last active
March 23, 2017 18:46
-
-
Save d33pfri3d/f74ada0286257f4581251e50eff8c071 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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.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( '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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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 3\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": { | |
"name": "color", | |
"displayName": null, | |
"type": "c", | |
"glslType": "vec3", | |
"useGridHelper": false, | |
"useRange": false, | |
"range": null, | |
"isRandom": false, | |
"randomRange": null, | |
"useToggle": false, | |
"toggle": null, | |
"description": "" | |
}, | |
"time": { | |
"name": "time", | |
"displayName": null, | |
"type": "f", | |
"glslType": "float", | |
"useGridHelper": false, | |
"useRange": false, | |
"range": null, | |
"isRandom": false, | |
"randomRange": null, | |
"useToggle": false, | |
"toggle": null, | |
"description": "" | |
}, | |
"speed": { | |
"name": "speed", | |
"displayName": null, | |
"type": "f", | |
"glslType": "float", | |
"useGridHelper": false, | |
"useRange": false, | |
"range": null, | |
"isRandom": false, | |
"randomRange": null, | |
"useToggle": false, | |
"toggle": null, | |
"description": "" | |
}, | |
"brightness": { | |
"name": "brightness", | |
"displayName": null, | |
"type": "f", | |
"glslType": "float", | |
"useGridHelper": false, | |
"useRange": false, | |
"range": null, | |
"isRandom": false, | |
"randomRange": null, | |
"useToggle": false, | |
"toggle": null, | |
"description": "" | |
}, | |
"distfading": { | |
"name": "distfading", | |
"displayName": null, | |
"type": "f", | |
"glslType": "float", | |
"useGridHelper": false, | |
"useRange": false, | |
"range": null, | |
"isRandom": false, | |
"randomRange": null, | |
"useToggle": false, | |
"toggle": null, | |
"description": "" | |
}, | |
"twinkleSpeed": { | |
"name": "twinkleSpeed", | |
"displayName": null, | |
"type": "f", | |
"glslType": "float", | |
"useGridHelper": false, | |
"useRange": false, | |
"range": null, | |
"isRandom": false, | |
"randomRange": null, | |
"useToggle": false, | |
"toggle": null, | |
"description": "" | |
} | |
}, | |
"url": "http://shaderfrog.com/app/view/47", | |
"user": { | |
"username": "andrewray", | |
"url": "http://shaderfrog.com/app/profile/andrewray" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment