improved wall shader

This commit is contained in:
Diego F. Goberna
2018-12-02 00:51:02 +01:00
committed by Diego Marcos
parent 119f3466dc
commit fd240e86ab
7 changed files with 362 additions and 55 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

291
assets/models/wallglow.obj Normal file
View File

@@ -0,0 +1,291 @@
# Blender v2.79 (sub 0) OBJ File: 'stage.blend'
# www.blender.org
v -0.500000 -0.500000 0.500000
v -0.552420 -0.570000 0.570000
v -0.570000 -0.570000 0.550027
v -0.500000 -0.500000 -0.500000
v -0.552420 -0.570000 -0.570000
v -0.570000 -0.570000 -0.550027
v 0.500000 -0.500000 0.500000
v 0.552419 -0.570000 0.570000
v 0.570000 -0.570000 0.550027
v 0.500000 -0.500000 -0.500000
v 0.552419 -0.570000 -0.570000
v 0.570000 -0.570000 -0.550027
v -0.500000 0.500000 0.500000
v -0.552419 0.570000 0.570000
v -0.570000 0.570000 0.550027
v -0.500000 0.500000 -0.500000
v -0.552419 0.570000 -0.570000
v -0.570000 0.570000 -0.550027
v 0.500000 0.500000 0.500000
v 0.552420 0.570000 0.570000
v 0.570000 0.570000 0.550027
v 0.500000 0.500000 -0.500000
v 0.552420 0.570000 -0.570000
v 0.570000 0.570000 -0.550027
v -0.500000 0.500000 -0.500000
v -0.570000 0.552420 -0.570000
v -0.550027 0.570000 -0.570000
v 0.500000 0.500000 -0.500000
v 0.570000 0.552420 -0.570000
v 0.550027 0.570000 -0.570000
v -0.500000 -0.500000 -0.500000
v -0.570000 -0.552420 -0.570000
v -0.550027 -0.570000 -0.570000
v 0.500000 -0.500000 -0.500000
v 0.570000 -0.552420 -0.570000
v 0.550027 -0.570000 -0.570000
v -0.500000 0.500000 0.500000
v -0.570000 0.552420 0.570000
v -0.550027 0.570000 0.570000
v 0.500000 0.500000 0.500000
v 0.570000 0.552420 0.570000
v 0.550027 0.570000 0.570000
v -0.500000 -0.500000 0.500000
v -0.570000 -0.552420 0.570000
v -0.550027 -0.570000 0.570000
v 0.500000 -0.500000 0.500000
v 0.570000 -0.552420 0.570000
v 0.550027 -0.570000 0.570000
v -0.500000 0.500000 0.500000
v -0.570000 0.552420 0.570000
v -0.570000 0.570000 0.550027
v -0.500000 0.500000 -0.500000
v -0.570000 0.552420 -0.570000
v -0.570000 0.570000 -0.550027
v -0.500000 -0.500000 0.500000
v -0.570000 -0.552420 0.570000
v -0.570000 -0.570000 0.550027
v -0.500000 -0.500000 -0.500000
v -0.570000 -0.552420 -0.570000
v -0.570000 -0.570000 -0.550027
v 0.500000 0.500000 0.500000
v 0.570000 0.552420 0.570000
v 0.570000 0.570000 0.550027
v 0.500000 0.500000 -0.500000
v 0.570000 0.552420 -0.570000
v 0.570000 0.570000 -0.550027
v 0.500000 -0.500000 0.500000
v 0.570000 -0.552420 0.570000
v 0.570000 -0.570000 0.550027
v 0.500000 -0.500000 -0.500000
v 0.570000 -0.552420 -0.570000
v 0.570000 -0.570000 -0.550027
vt 0.769077 0.236732
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.237161
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.236732
vt 0.755161 0.236732
vt 0.755161 0.237161
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.236732
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.237161
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.236732
vt 0.755161 0.236732
vt 0.755161 0.237161
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.236732
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.237161
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.236732
vt 0.755161 0.236732
vt 0.755161 0.237161
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.236732
vt 0.769077 0.240314
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.769077 0.237161
vt 0.755161 0.237161
vt 0.755161 0.237161
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.769077 0.236732
vt 0.755161 0.240314
vt 0.769077 0.240314
vt 0.755161 0.236732
vt 0.755161 0.236732
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
vt 0.769077 0.237161
s off
f 12/1 7/2 10/3
f 8/4 1/5 7/6
f 1/7 2/8 3/9
f 4/10 6/11 5/12
f 4/13 11/14 10/15
f 7/16 9/17 8/18
f 10/19 11/20 12/1
f 1/21 6/11 4/22
f 19/23 24/24 22/25
f 13/26 20/27 19/28
f 13/29 15/30 14/31
f 16/32 17/33 18/34
f 23/35 16/36 22/37
f 19/38 20/39 21/40
f 22/41 24/24 23/42
f 18/34 13/43 16/44
f 36/45 31/46 34/47
f 32/48 25/49 31/50
f 25/51 26/52 27/53
f 28/54 30/55 29/56
f 28/57 35/58 34/59
f 31/60 33/61 32/62
f 34/63 35/64 36/45
f 25/65 30/55 28/66
f 43/67 48/68 46/69
f 37/70 44/71 43/72
f 37/73 39/74 38/75
f 40/76 41/77 42/78
f 47/79 40/80 46/81
f 43/82 44/83 45/84
f 46/85 48/68 47/86
f 42/78 37/87 40/88
f 60/89 55/90 58/91
f 56/92 49/93 55/94
f 49/95 50/96 51/97
f 52/98 54/99 53/100
f 52/101 59/102 58/103
f 55/104 57/105 56/106
f 58/107 59/108 60/89
f 49/109 54/99 52/110
f 67/111 72/112 70/113
f 61/114 68/115 67/116
f 61/117 63/118 62/119
f 64/120 65/121 66/122
f 71/123 64/124 70/125
f 67/126 68/127 69/128
f 70/129 72/112 71/130
f 66/122 61/131 64/132
f 12/1 9/17 7/2
f 8/4 2/133 1/5
f 4/13 5/134 11/14
f 1/21 3/9 6/11
f 19/23 21/40 24/24
f 13/26 14/135 20/27
f 23/35 17/136 16/36
f 18/34 15/30 13/43
f 36/45 33/61 31/46
f 32/48 26/137 25/49
f 28/57 29/138 35/58
f 25/65 27/53 30/55
f 43/67 45/84 48/68
f 37/70 38/139 44/71
f 47/79 41/140 40/80
f 42/78 39/74 37/87
f 60/89 57/105 55/90
f 56/92 50/141 49/93
f 52/101 53/142 59/102
f 49/109 51/97 54/99
f 67/111 69/128 72/112
f 61/114 62/143 68/115
f 71/123 65/144 64/124
f 66/122 63/118 61/131

View File

@@ -25,6 +25,7 @@
<a-asset-item id="wrongObj" src="assets/models/wrong.obj"></a-asset-item>
<a-asset-item id="smokeObj" src="assets/models/smoke.obj"></a-asset-item>
<a-asset-item id="audiocolumnObj" src="assets/models/audiocolumn.obj"></a-asset-item>
<!--<a-asset-item id="wallglowObj" src="assets/models/wallglow.obj"></a-asset-item>-->
<a-asset-item id="tutorial1Obj" src="assets/models/tutorial1.obj"></a-asset-item>
<a-asset-item id="tutorial2Obj" src="assets/models/tutorial2.obj"></a-asset-item>
@@ -122,7 +123,7 @@
id="wall"
data-saber-particles
geometry
material="shader: wallShader; tex: #noiseTexture; env: #envmapWallTexture; repeat: 2 2; transparent: true; side: double"
material="shader: wallShader; transparent: true; side: double;"
wall></a-mixin>
<a-mixin

View File

@@ -16,7 +16,7 @@ AFRAME.registerComponent('gpu-preloader', {
this.preloadMissMap();
this.preloadPlayButton();
this.preloadSearchPrevPage();
this.preloadWallMap();
//this.preloadWallMap();
this.preloadWrongMap();
this.preloadGenres();
}, 1000);

View File

@@ -2,8 +2,6 @@
AFRAME.registerShader('wallShader', {
schema: {
iTime: {type: 'time', is: 'uniform'},
tex: {type: 'map', is: 'uniform'},
env: {type: 'map', is: 'uniform'},
hitRight: {type: 'vec3', is: 'uniform', default: {x: 0, y: 1, z: 0}},
hitLeft: {type: 'vec3', is: 'uniform', default: {x: 0, y: 0, z: 0}}
},
@@ -22,78 +20,89 @@ AFRAME.registerShader('wallShader', {
`,
fragmentShader: `
// based on https://www.shadertoy.com/view/ldlXRS
varying vec2 uvs;
varying vec3 nrml;
varying vec3 worldPos;
uniform float iTime;
uniform sampler2D tex;
uniform sampler2D env;
//uniform sampler2D env;
uniform vec3 hitRight;
uniform vec3 hitLeft;
#define time iTime/1000.0*0.15
#define tau 6.2831853
#define SEED 19.1254
#define time (3.0 + iTime)/1000.0 * 0.15
mat2 makem2(in float theta){float c = cos(theta);float s = sin(theta);return mat2(c,-s,s,c);}
float noise( in vec2 x ){return texture2D(tex, x*.007).x;}
float fbm(in vec2 p) {
float z=2.;
float rz = 0.;
vec2 bp = p;
for (float i= 1.;i < 6.;i++)
{
rz+= abs((noise(p)-0.5)*2.)/z;
z = z*2.;
p = p*2.;
}
return rz;
}
float dualfbm(in vec2 p) {
vec2 p2 = p*.4;
vec2 basis = vec2(fbm(p2-time*1.6),fbm(p2+time*1.7));
basis = (basis-.5)*.2;
p += basis;
return fbm(p*makem2(time*0.2));
float noise(vec3 uv) {
return fract(sin(uv.x*123243. + uv.y*424. + uv.z*642. + SEED) * 1524.);
}
vec3 drawCircle(vec3 p, vec3 center, float radius, float edgeWidth, vec3 color) {
return color*(1.0-smoothstep(radius, radius+edgeWidth, length(p-center)));
return color * (1.0 - smoothstep(radius, radius + edgeWidth, length(p - center)));
}
float smoothNoise(vec3 uvw, float frec){
vec3 luvw = vec3(smoothstep(0.0, 1.0, fract(uvw.xy * frec)), fract(uvw.z * frec));
vec3 id = floor(uvw * frec);
float blt = noise(id);
float brt = noise(id + vec3(1.0, 0.0, 0.0));
float tlt = noise(id + vec3(0.0, 1.0, 0.0));
float trt = noise(id + vec3(1.0, 1.0, 0.0));
float blb = noise(id + vec3(0.0, 0.0, 1.0));
float brb = noise(id + vec3(1.0, 0.0, 1.0));
float tlb = noise(id + vec3(0.0, 1.0, 1.0));
float trb = noise(id + vec3(1.0, 1.0, 1.0));
float a = mix(blt, brt, luvw.x);
float b = mix(tlt, trt, luvw.x);
float c = mix(a, b, luvw.y);
float d = mix(blb, brb, luvw.x);
float e = mix(tlb, trb, luvw.x);
float f = mix(d, e, luvw.y);
return mix(c, f, luvw.z);
}
void main() {
vec2 uv1 = uvs.xy-0.5;
float angle = time / 10.0;
vec2 uv;
uv.x = uv1.x * cos(angle) - uv1.y * sin(angle);
uv.y = uv1.y * cos(angle) + uv1.x * sin(angle);
uv.x += sin(uv.y * 2.7 + time / 1.7) * 0.2;
uv.y += sin(uv.x * 3.1 + time / 2.4) * 0.3;
vec2 p = uvs.xy-0.5;// / iResolution.xy-0.5;
vec2 pp = p;
p*= 4.0;
float w, r, bg;
r = smoothNoise(vec3(uv + worldPos.x, time / 2.0), 3.0) * 0.65;
r += smoothNoise(vec3(uv, time / 6.0), 8.0) * 0.3;
r += smoothNoise(vec3(uv, time / 14.0), 50.0) * 0.04;
float rz = dualfbm(p)*5.0;
bg = smoothstep(0.5, 1.0, r) + smoothstep(0.5, 0.0, r);
r = smoothstep(0.4, 0.50, r) - smoothstep(0.50, 0.6, r);
w = smoothstep(0.97, 1.0, r);
p += time * 20.0;
rz *= pow(abs(cos(p.x*.2) + sin(p.y*1.4)*0.1), .4);
vec3 col = vec3(0.2,0.0,0.0) / rz;
col.g = smoothstep(0.6, 1.0, col.r);
col.b = smoothstep(0.6, 1.0, col.r);
r += smoothstep(0.44, 0.50, abs(uv1.x));
r += smoothstep(0.44, 0.50, abs(uv1.y));
col += smoothstep(0.48, 0.495, abs(pp.x));
col += smoothstep(0.48, 0.495, abs(pp.y));
w += smoothstep(0.49, 0.498, abs(uv1.x));
w += smoothstep(0.49, 0.498, abs(uv1.y));
col += drawCircle(worldPos, hitRight, 0.04, 0.05, vec3(1.0, 0.4, 0.4));
col += drawCircle(worldPos, hitRight, 0.02, 0.005, vec3(1.0, 1.0, 1.0));
col += drawCircle(worldPos, hitLeft, 0.04, 0.05, vec3(1.0, 0.4, 0.4));
col += drawCircle(worldPos, hitLeft, 0.02, 0.005, vec3(1.0, 1.0, 1.0));
w *= 0.9;
bg *= 0.5;
//gl_FragColor = vec4(col, 1.0);
vec3 col = vec3(r * 0.8 + w, w + 0.1, w + 0.13);
// add environment reflection
vec3 reflectVec = normalize(reflect(normalize(worldPos - cameraPosition), normalize(nrml + col)));
vec3 reflectView = normalize( ( viewMatrix * vec4( reflectVec, 0.0 ) ).xyz + vec3( 0.0, 0.0, 1.0 ) );
vec3 hit;
hit = drawCircle(worldPos, hitRight, 0.04, 0.05, vec3(1.0, 0.4, 0.4));
hit += drawCircle(worldPos, hitRight, 0.02, 0.005, vec3(1.0, 1.0, 1.0));
hit += drawCircle(worldPos, hitLeft, 0.04, 0.05, vec3(1.0, 0.4, 0.4));
hit += drawCircle(worldPos, hitLeft, 0.02, 0.005, vec3(1.0, 1.0, 1.0));
gl_FragColor = vec4(texture2D(env, reflectView.xy * 0.5 + 0.5).xyz * 0.05 + col, 0.9 + col.x);
gl_FragColor = vec4(col + hit, 0.7 + w + hit.x);
}
`
`
});

View File

@@ -52,9 +52,9 @@
play-sound__victory="sound: #victorySong; event: victory"
search
stage-colors="color: blue"
fog="color: #a00; density: 0.035; type: exponential"
vr-mode-ui="enterVRButton: #vrButton"
tutorial-2d>
<!-- fog="color: #a00; density: 0.035; type: exponential" -->
<a-assets timeout="10000">
{% include './assets.html' %}
@@ -80,6 +80,11 @@
{% include './templates/victory.html' %}
{% include './templates/leaderboard.html' %}
<!--
<a-entity id="testwall" geometry="width: 0.3; height: 1; depth: 1.5;" position="-1 1.6 -1" material="shader: wallShader; env: #envmapWallTexture; fog: false; transparent: true; side: double"></a-entity>
<a-entity id="testwallglow" visible = "false" obj-model="obj: #wallglowObj" position="-1 1.6 -1" scale="0.3 1.0 1.5" material="shader: flat; blending: additive; depthTest: false; src: #atlasImg; fog: false; transparent: true;"></a-entity>
-->
<!-- super cut fx rings -->
{% for i in range(1, 5) %}
<a-entity class="superCutFx" mixin="superCut"></a-entity>

View File

@@ -39,6 +39,7 @@
proxy-event="event: audioanalyserbeat; to: #logolight"></a-entity>
<a-entity id="stage">
<!--
<a-entity id="backglow"
visible="false"