juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backglow, fog and tunnel neon colors (events 0 & 1)

Browse Source
This commit is contained in:
Diego F. Goberna
2018-12-03 23:24:18 +01:00
committed by Diego Marcos
parent 39d36ccc3e
commit 54c22691c6
11 changed files with 124 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/atlas.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

49
assets/models/smoke.obj
View File

@@ -1,30 +1,29 @@
# Blender v2.79 (sub 0) OBJ File: 'stage.blend'
# www.blender.org
o smoke
v 0.000000 -9.030719 -5.000000
v 0.000000 9.030719 -5.000000
v 2.500000 -9.030719 -4.330127
v 2.500000 9.030719 -4.330127
v 4.330127 -9.030719 -2.500000
v 4.330127 9.030719 -2.500000
v 5.000000 -9.030719 0.000000
v 5.000000 9.030719 0.000000
v 4.330127 -9.030719 2.500000
v 4.330127 9.030719 2.500000
v 2.500000 -9.030719 4.330127
v 2.500000 9.030719 4.330127
v 0.000001 -9.030719 5.000000
v 0.000001 9.030719 5.000000
v -2.499999 -9.030719 4.330128
v -2.499999 9.030719 4.330128
v -4.330126 -9.030719 2.500001
v -4.330126 9.030719 2.500001
v -5.000000 -9.030719 0.000002
v -5.000000 9.030719 0.000002
v -4.330129 -9.030719 -2.499997
v -4.330129 9.030719 -2.499997
v -2.500003 -9.030719 -4.330125
v -2.500003 9.030719 -4.330125
v 0.000000 -9.030719 -3.977880
v 0.000000 9.030719 -3.977880
v 1.988940 -9.030719 -3.444945
v 1.988940 9.030719 -3.444945
v 3.444945 -9.030719 -1.988940
v 3.444945 9.030719 -1.988940
v 3.977880 -9.030719 0.000000
v 3.977880 9.030719 0.000000
v 3.444945 -9.030719 1.988940
v 3.444945 9.030719 1.988940
v 1.988940 -9.030719 3.444945
v 1.988940 9.030719 3.444945
v 0.000001 -9.030719 3.977880
v 0.000001 9.030719 3.977880
v -1.988939 -9.030719 3.444946
v -1.988939 9.030719 3.444946
v -3.444944 -9.030719 1.988941
v -3.444944 9.030719 1.988941
v -3.977880 -9.030719 0.000002
v -3.977880 9.030719 0.000002
v -3.444946 -9.030719 -1.988938
v -3.444946 9.030719 -1.988938
v -1.988942 -9.030719 -3.444944
v -1.988942 9.030719 -3.444944
vt 0.750488 0.751420
vt 0.874158 0.792572
vt 0.750488 0.792573

48
assets/models/stage.obj → assets/models/stagenormal.obj
View File

@@ -1010,30 +1010,30 @@ f 174/183 241/4 171/176
f 174/183 14/182 61/5
f 56/193 178/192 242/1
f 178/192 20/191 58/2
v 25.250380 -68.634323 -67.805519
v -7.311297 -99.964310 -32.531570
v 44.684368 -90.595970 -33.472618
v 79.610504 -63.938412 -32.754875
v 61.499004 -32.072090 -70.036674
v 98.332626 -29.744064 -33.095043
v 51.503872 22.417212 -76.709694
v 14.304985 -8.711819 -88.150589
v 105.055351 2.702891 -35.296719
v 89.332321 48.762192 -34.885387
v 65.318703 77.625633 -32.835403
v -16.076511 27.427702 -84.945648
v 16.332134 97.253868 -30.664419
v 20.590061 63.521618 -70.832603
v -53.870377 48.526577 -66.212524
v -30.491152 -18.268398 -83.639061
v -70.286758 -22.024078 -63.045624
v -97.320869 15.491239 -33.894066
v -95.810577 -29.966383 -34.246368
v -31.799715 -69.905716 -62.168251
v -82.204628 -59.143867 -35.069153
v -27.901575 95.337463 -32.635284
v -65.497749 74.145546 -33.944809
v -49.135437 -85.633934 -33.154804
v 36.568962 -99.399925 -74.112007
v -10.588614 -144.773712 -34.380539
v 64.714310 -131.205963 -35.090111
v 115.296219 -92.599060 -34.548916
v 89.066177 -46.448528 -75.794334
v 142.410614 -43.076958 -34.805408
v 74.590683 32.465813 -80.825912
v 20.717251 -12.616927 -92.820320
v 152.146820 3.914473 -36.465511
v 129.375885 70.620033 -36.155357
v 94.598068 112.421623 -34.609634
v -23.282871 39.722275 -90.403732
v 23.653076 140.848297 -32.972672
v 29.819637 91.995430 -76.394478
v -78.017982 70.278809 -72.910858
v -44.158932 -26.457281 -89.418549
v -101.793068 -31.896458 -70.522957
v -140.945328 22.435247 -35.407883
v -138.758041 -43.398933 -35.673531
v -46.054062 -101.241234 -69.861404
v -119.053177 -85.655334 -36.293922
v -40.408566 138.072861 -34.458740
v -94.857376 107.381577 -35.446144
v -71.160591 -124.019684 -34.850471
vt 0.610526 0.513119
vt 0.608613 0.612561
vt 0.550821 0.559857

6
assets/shaders/stageAdditive.js
View File

@@ -13,12 +13,14 @@ module.exports = {
fragmentShader: `
varying vec2 uvs;
varying vec3 worldPos;
uniform vec3 redColor;
uniform vec3 blueColor;
uniform vec3 tunnelNeon;
uniform sampler2D src;
void main() {
vec4 col = texture2D(src, uvs);
float mask = min(step(0.87, uvs.x), step(0.5, uvs.y));
mask = min(mask, 1.0 - step(0.75, uvs.y));
col.xyz = mix(col.xyz, col.xyz * tunnelNeon, mask);
gl_FragColor = col;
}
`

14
assets/shaders/stageNormal.js
View File

@@ -11,18 +11,20 @@ module.exports = {
`,
fragmentShader: `
#define FOG_RADIUS 50.0
#define FOG_FALLOFF 45.0
#define FOG_RADIUS 55.0
#define FOG_FALLOFF 50.0
#define FOG_COLOR_MULT 0.85
varying vec2 uvs;
varying vec3 worldPos;
uniform vec3 redColor;
uniform vec3 blueColor;
uniform vec3 fogColor;
uniform vec3 color;
uniform sampler2D src;
void main() {
vec4 col = texture2D(src, uvs);
col.xyz = mix(fogColor, col.xyz, clamp(distance(worldPos, vec3(0., 0., -FOG_RADIUS)) / FOG_FALLOFF, 0., 1.));
float mask = step(0.5, uvs.x);
mask = min(mask, max(step(0.75, uvs.x), 1.0 - step(0.5, uvs.y)));
col = mix(col * vec4(color, 1.0), col, mask);
col.xyz = mix(color * FOG_COLOR_MULT, col.xyz, clamp(distance(worldPos, vec3(0., 0., -FOG_RADIUS)) / FOG_FALLOFF, 0., 1.));
gl_FragColor = col;
}
`

23
src/assets.html
View File

@@ -20,7 +20,7 @@
<a-asset-item id="tunnelObj" src="assets/models/tunnel.obj"></a-asset-item>
<a-asset-item id="tunnelNeonObj" src="assets/models/tunnelneon.obj"></a-asset-item>
-->
<a-asset-item id="stageObj" src="assets/models/stage.obj"></a-asset-item>
<a-asset-item id="stageNormalObj" src="assets/models/stagenormal.obj"></a-asset-item>
<a-asset-item id="stageAdditiveObj" src="assets/models/stageadditive.obj"></a-asset-item>
<a-asset-item id="stepbackObj" src="assets/models/stepback.obj"></a-asset-item>
<a-asset-item id="missObj" src="assets/models/miss.obj"></a-asset-item>
@@ -150,5 +150,22 @@
animation__mouseenter1="property: components.slice9.material.color; type: color; from: #999; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave1="property: components.slice9.material.color; type: color; from: #FFF; to: #999; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150">
</a-mixin>
animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-mixin>
<a-mixin id="bgColorAnimation"
animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #111; dur: 500; easing: linear; startEvents: bgcoloroff"
animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: bgcolorblue"
animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: bgcolorbluefade"
animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: bgcolorred"
animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: bgcolorredfade"
></a-mixin>
<a-mixin id="tunnelColorAnimation"
animation__tunnelcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #111; dur: 500; easing: linear; startEvents: tunnelcoloroff"
animation__tunnelcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: tunnelcolorblue"
animation__tunnelcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: tunnelcolorbluefade"
animation__tunnelcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: tunnelcolorred"
animation__tunnelcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: tunnelcolorredfade"
></a-mixin>

20
src/components/beat-loader.js
View File

@@ -281,38 +281,36 @@ AFRAME.registerComponent('beat-loader', {
generateEvent: function (event) {
switch(event._type) {
case 0:
this.stageColors.setColor('fog', event._value);
this.stageColors.setColor('sky', event._value);
this.stageColors.setColor('backglow', event._value);
this.stageColors.setColor('bg', event._value);
break;
case 1:
this.stageColors.setColor('tunnelNeon', event._value);
this.stageColors.setColor('tunnel', event._value);
break;
case 2:
case 200:
this.stageColors.setColor('leftStageLaser0', event._value);
this.stageColors.setColor('leftStageLaser1', event._value);
this.stageColors.setColor('leftStageLaser2', event._value);
break;
case 3:
case 300:
this.stageColors.setColor('rightStageLaser0', event._value);
this.stageColors.setColor('rightStageLaser1', event._value);
this.stageColors.setColor('rightStageLaser2', event._value);
break;
case 4:
case 400:
this.stageColors.setColor('floor', event._value);
this.stageColors.setColor('stageNeon', event._value);
break;
case 8:
case 800:
this.twister.components.twister.pulse(event._value);
break;
case 9:
case 900:
// zoom was a bit disturbing
this.twister.components.twister.pulse(event._value);
break;
case 12:
case 1200:
this.leftStageLasers.components['stage-lasers'].pulse(event._value);
break;
case 13:
case 1300:
this.rightStageLasers.components['stage-lasers'].pulse(event._value);
break;
}

10
src/components/materials.js
View File

@@ -9,9 +9,7 @@ AFRAME.registerSystem('materials', {
this.stageNormal = new THREE.ShaderMaterial({
uniforms: {
redColor: {value: new THREE.Vector3(1, 0, 0) },
blueColor: {value: new THREE.Vector3(0, 0, 1) },
fogColor: {value: new THREE.Vector3(0, 0.48, 0.72) },
color: {value: new THREE.Vector3(0, 0.48, 0.72) },
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
},
vertexShader: stageNormalShaders.vertexShader,
@@ -22,14 +20,13 @@ AFRAME.registerSystem('materials', {
this.stageAdditive = new THREE.ShaderMaterial({
uniforms: {
redColor: {value: new THREE.Vector3(1, 0, 0) },
blueColor: {value: new THREE.Vector3(0, 0, 1) },
tunnelNeon: {value: new THREE.Vector3(0, 0, 1) },
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
},
vertexShader: stageAdditiveShaders.vertexShader,
fragmentShader: stageAdditiveShaders.fragmentShader,
fog: false,
blending: THREE.AdditiveBlending,
fog: false,
transparent: true
});
}
@@ -51,7 +48,6 @@ AFRAME.registerComponent('materials', {
}
mesh = this.el.getObject3D('mesh');
if (!mesh) {
console.log('not loaded yet');
this.el.addEventListener('model-loaded', this.applyMaterial.bind(this));
} else {
this.applyMaterial(mesh);

51
src/components/stage-colors.js
View File

@@ -1,14 +1,35 @@
function $ (id) { return document.getElementById(id); };
AFRAME.registerComponent('stage-colors', {
dependencies: ['background', 'fog'],
dependencies: ['background'],
schema: {
color: {default: 'blue', oneOf: ['blue', 'red']}
},
init: function () {
this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
this.el.addEventListener('cleargame', this.resetColors.bind(this));
},
update: function (oldData) {
this.updateColors(this.data.color);
},
setColor: function (target, code) {
this.el.emit(`${target}color${this.colorCodes[code]}`, null, false);
},
resetColors: function () {
this.updateColors('blue');
this.el.emit('bgcolorblue', null, false);
},
updateColors: function (color) {
}
/*
init: function () {
this.neonRed = new THREE.Color(0xff9999);
this.neonBlue = new THREE.Color(0x9999ff);
this.defaultRed = new THREE.Color(0xff0000);
@@ -31,13 +52,10 @@ AFRAME.registerComponent('stage-colors', {
envMap: this.mineEnvMap[this.data.color]
});
this.sky = document.getElementById('sky');
this.backglow = document.getElementById('backglow');
this.auxColor = new THREE.Color();
this.targets = {};
['fog',
'sky',
'backglow',
['stageNormal',
'tunnelNeon',
'leftStageLaser0',
'leftStageLaser1',
@@ -47,48 +65,34 @@ AFRAME.registerComponent('stage-colors', {
'rightStageLaser2',
'floor',
'stageNeon'].forEach(id => {
this.targets[id] = id == 'fog' ? this.el.sceneEl : document.getElementById(id);
this.targets[id] = document.getElementById(id);
});
this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
this.el.addEventListener('cleargame', this.resetColors.bind(this));
*/
},
update: function (oldData) {
// this.updateColors(this.data.color);
this.updateColors(this.data.color);
},
setColor: function (target, code) {
/* const mesh = this.targets[target].getObject3D('mesh');
const mesh = this.targets[target].getObject3D('mesh');
if (mesh) { mesh.material.opacity = 1; }
this.targets[target].emit('color' + this.colorCodes[code], null, false);
*/
},
resetColors: function () {
/*
this.updateColors('blue');
for (let target in this.targets) {
this.targets[target].emit('colorblue', null, false);
}
*/
},
updateColors: function (color) {
/*
const red = color === 'red';
// Init or reset.
try {
this.backglow.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
} catch (e) {
this.backglow.addEventListener('object3dset', () => {
this.backglow.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
});
}
this.sky.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
this.el.sceneEl.object3D.background.set(red ? '#770100' : '#15252d');
this.el.sceneEl.object3D.fog.color.set(red ? '#a00' : '#007cb9');
@@ -100,6 +104,7 @@ AFRAME.registerComponent('stage-colors', {
this.mineMaterial.emissive = this.mineEmission[red ? 'red' : 'blue'];
this.mineMaterial.envMap = this.mineEnvMap[red ? 'red' : 'blue'];
this.mineMaterial.needsUpdate = true;
*/
}
*/
});

2
src/index.html
View File

@@ -18,7 +18,7 @@
<a-scene
stats
mixin="gameoverAnimation fogAnimation"
mixin="gameoverAnimation fogAnimation bgColorAnimation tunnelColorAnimation"
bind__beat-loader="challengeId: challenge.id; difficulty: menuSelectedChallenge.difficulty; isPlaying: isPlaying; menuSelectedChallengeId: menuSelectedChallenge.id"
bind__gameover="isGameOver: isGameOver"
bind__intro-song="isPlaying: menuActive && !menuSelectedChallenge.id; isSearching: isSearching"

17
src/templates/stage.html
View File

@@ -8,20 +8,6 @@
animation__colorred="property: components.material.material.color; type: color; to: #FFAAAA; dur: 5; easing: linear; startEvents: colorred"
animation__colorredfade="property: components.material.material.color; type: color; from: #FEE; to: #ffAAAA; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
<a-mixin id="bgAnimation"
material="shader: flat; fog: false"
animation__coloroff="property: components.material.material.color; type: color; to: #111; dur: 500; easing: linear; startEvents: coloroff"
animation__colorblue="property: components.material.material.color; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: colorblue"
animation__colorbluefade="property: components.material.material.color; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: colorbluefade"
animation__colorred="property: components.material.material.color; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: colorred"
animation__colorredfade="property: components.material.material.color; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
<a-mixin id="fogAnimation"
animation__coloroff="property: components.fog.el.object3D.fog.color; type: color; to: #010101; dur: 500; easing: linear; startEvents: coloroff"
animation__colorblue="property: components.fog.el.object3D.fog.color; type: color; to: #007cb9; dur: 5; easing: linear; startEvents: colorblue"
animation__colorbluefade="property: components.fog.el.object3D.fog.color; type: color; from: #3398CA; to: #007cb9; dur: 500; easing: linear; startEvents: colorbluefade"
animation__colorred="property: components.fog.el.object3D.fog.color; type: color; to: #b90000; dur: 5; easing: linear; startEvents: colorred"
animation__colorredfade="property: components.fog.el.object3D.fog.color; type: color; from: #ff0000; to: #b90000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
<!--
<a-sky
@@ -87,7 +73,8 @@
-->
<a-entity
id="stageobj"
obj-model="obj: #stageObj"
mixin="gameoverAnimation"
obj-model="obj: #stageNormalObj"
materials="name: stageNormal"></a-entity>
<a-entity
id="stageadditiveobj"