diff --git a/assets/img/atlas-guide.png b/assets/img/atlas-guide.png index 52bd220..1536af7 100644 Binary files a/assets/img/atlas-guide.png and b/assets/img/atlas-guide.png differ diff --git a/assets/img/atlas.png b/assets/img/atlas.png index 3ae57df..1d3fe33 100644 Binary files a/assets/img/atlas.png and b/assets/img/atlas.png differ diff --git a/assets/models/arrowblue.obj b/assets/models/arrowblue.obj new file mode 100644 index 0000000..ad21b2e --- /dev/null +++ b/assets/models/arrowblue.obj @@ -0,0 +1,13 @@ +# Blender v2.79 (sub 0) OBJ File: 'arrow.blend' +# www.blender.org +v -0.141207 0.007874 0.148353 +v 0.141207 0.007874 0.148353 +v -0.141207 0.143124 0.148353 +v 0.141207 0.143124 0.148353 +vt 0.876020 0.124107 +vt 0.906528 0.250005 +vt 0.876020 0.250005 +vt 0.906528 0.124107 +s off +f 2/1 3/2 1/3 +f 2/1 4/4 3/2 diff --git a/assets/models/arrowred.obj b/assets/models/arrowred.obj new file mode 100644 index 0000000..9238f0c --- /dev/null +++ b/assets/models/arrowred.obj @@ -0,0 +1,13 @@ +# Blender v2.79 (sub 0) OBJ File: 'arrow.blend' +# www.blender.org +v -0.141207 0.007874 0.148353 +v 0.141207 0.007874 0.148353 +v -0.141207 0.143124 0.148353 +v 0.141207 0.143124 0.148353 +vt 0.876020 -0.000707 +vt 0.906528 0.125190 +vt 0.876020 0.125190 +vt 0.906528 -0.000707 +s off +f 2/1 3/2 1/3 +f 2/1 4/4 3/2 diff --git a/assets/models/dot.obj b/assets/models/dot.obj deleted file mode 100644 index d760dec..0000000 --- a/assets/models/dot.obj +++ /dev/null @@ -1,51 +0,0 @@ -# Blender v2.79 (sub 0) OBJ File: 'cube.blend' -# www.blender.org -o dot -v 0.000000 0.044271 0.148510 -v -0.011944 0.042630 0.148510 -v -0.023003 0.037826 0.148510 -v -0.032355 0.030218 0.148510 -v -0.039308 0.020368 0.148510 -v -0.043345 0.009007 0.148510 -v -0.044168 -0.003021 0.148510 -v -0.041715 -0.014826 0.148510 -v -0.036168 -0.025530 0.148510 -v -0.027939 -0.034342 0.148510 -v -0.017638 -0.040606 0.148510 -v -0.006028 -0.043859 0.148510 -v 0.006028 -0.043859 0.148510 -v 0.017638 -0.040606 0.148510 -v 0.027939 -0.034342 0.148510 -v 0.036168 -0.025530 0.148510 -v 0.041715 -0.014826 0.148510 -v 0.044168 -0.003021 0.148510 -v 0.043345 0.009007 0.148510 -v 0.039308 0.020368 0.148510 -v 0.032355 0.030217 0.148510 -v 0.023003 0.037826 0.148510 -v 0.011944 0.042630 0.148510 -v -0.000000 -0.000000 0.148510 -s off -f 1 24 23 -f 2 3 24 -f 3 4 24 -f 4 5 24 -f 5 6 24 -f 6 7 24 -f 7 8 24 -f 8 9 24 -f 9 10 24 -f 10 11 24 -f 11 12 24 -f 12 13 24 -f 13 14 24 -f 14 15 24 -f 15 16 24 -f 16 17 24 -f 17 18 24 -f 18 19 24 -f 19 20 24 -f 20 21 24 -f 21 22 24 -f 23 24 22 -f 1 2 24 diff --git a/assets/models/dotblue.obj b/assets/models/dotblue.obj new file mode 100644 index 0000000..95d35fc --- /dev/null +++ b/assets/models/dotblue.obj @@ -0,0 +1,13 @@ +# Blender v2.79 (sub 0) OBJ File: 'arrow.blend' +# www.blender.org +v -0.113797 -0.089483 0.148353 +v 0.114781 -0.089483 0.148353 +v 0.114781 0.089968 0.148353 +v -0.113797 0.089968 0.148353 +vt 0.907505 0.148474 +vt 0.936174 0.220642 +vt 0.907505 0.220642 +vt 0.936174 0.148474 +s off +f 2/1 4/2 1/3 +f 2/1 3/4 4/2 diff --git a/assets/models/dotred.obj b/assets/models/dotred.obj new file mode 100644 index 0000000..c659e3a --- /dev/null +++ b/assets/models/dotred.obj @@ -0,0 +1,13 @@ +# Blender v2.79 (sub 0) OBJ File: 'arrow.blend' +# www.blender.org +v -0.113797 -0.089483 0.148353 +v 0.114781 -0.089483 0.148353 +v 0.114781 0.089968 0.148353 +v -0.113797 0.089968 0.148353 +vt 0.907505 0.026157 +vt 0.936174 0.098326 +vt 0.907505 0.098326 +vt 0.936174 0.026157 +s off +f 2/1 4/2 1/3 +f 2/1 3/4 4/2 diff --git a/assets/shaders/stageAdditive.js b/assets/shaders/stageAdditive.js new file mode 100644 index 0000000..1c290ff --- /dev/null +++ b/assets/shaders/stageAdditive.js @@ -0,0 +1,25 @@ +module.exports = { + vertexShader : ` + varying vec2 uvs; + varying vec3 worldPos; + void main() { + uvs.xy = uv.xy; + vec4 p = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); + worldPos = (modelMatrix * vec4( position, 1.0 )).xyz; + gl_Position = p; + } + `, + + fragmentShader: ` + varying vec2 uvs; + varying vec3 worldPos; + uniform vec3 redColor; + uniform vec3 blueColor; + uniform sampler2D src; + + void main() { + vec4 col = texture2D(src, uvs); + gl_FragColor = col; + } + ` +}; diff --git a/assets/shaders/stage.js b/assets/shaders/stageNormal.js similarity index 92% rename from assets/shaders/stage.js rename to assets/shaders/stageNormal.js index cb9bddf..453c36d 100644 --- a/assets/shaders/stage.js +++ b/assets/shaders/stageNormal.js @@ -15,7 +15,8 @@ module.exports = { #define FOG_FALLOFF 45.0 varying vec2 uvs; varying vec3 worldPos; - uniform vec3 color; + uniform vec3 redColor; + uniform vec3 blueColor; uniform vec3 fogColor; uniform sampler2D src; diff --git a/src/assets.html b/src/assets.html index 79fe159..1dc1dbb 100644 --- a/src/assets.html +++ b/src/assets.html @@ -1,7 +1,9 @@ - + + + + - diff --git a/src/components/beat.js b/src/components/beat.js index 7fbbf4d..3f355b9 100644 --- a/src/components/beat.js +++ b/src/components/beat.js @@ -6,7 +6,6 @@ const BEAT_WARMUP_ROTATION_CHANGE = Math.PI / 5; const BEAT_WARMUP_ROTATION_OFFSET = 0.4; const BEAT_WARMUP_ROTATION_TIME = 750; const ONCE = {once: true}; -const SIGN_MATERIAL = {shader: 'flat', color: '#88f'}; const SCORE_POOL = { OK : 'pool__beatscoreok', @@ -50,8 +49,10 @@ AFRAME.registerComponent('beat', { }, signModels: { - arrow: 'arrowObjTemplate', - dot: 'dotObjTemplate' + arrowred: 'arrowRedObjTemplate', + arrowblue: 'arrowBlueObjTemplate', + dotred: 'dotRedObjTemplate', + dotblue: 'dotBlueObjTemplate' }, orientations: [180, 0, 270, 90, 225, 135, 315, 45, 0], @@ -273,8 +274,8 @@ AFRAME.registerComponent('beat', { }, ONCE); } } else { - signEl.setAttribute('material', SIGN_MATERIAL); - this.setObjModelFromTemplate(signEl, this.signModels[this.data.type]); + signEl.setAttribute('materials', {name: 'stageAdditive'}); + this.setObjModelFromTemplate(signEl, this.signModels[this.data.type + this.data.color]); } }, @@ -628,6 +629,7 @@ AFRAME.registerComponent('beat', { returnToPool: function (force) { if (!this.backToPool && !force) { return; } + console.log('returning ' + this.poolName + ' to pool'); this.el.sceneEl.components[this.poolName].returnEntity(this.el); }, diff --git a/src/components/materials.js b/src/components/materials.js index 40702d8..4cc35ba 100644 --- a/src/components/materials.js +++ b/src/components/materials.js @@ -1,4 +1,5 @@ -const stageShaders = require('../../assets/shaders/stage.js') +const stageNormalShaders = require('../../assets/shaders/stageNormal.js') +const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js') AFRAME.registerSystem('materials', { init: function () { @@ -8,15 +9,29 @@ AFRAME.registerSystem('materials', { this.stageNormal = new THREE.ShaderMaterial({ uniforms: { - color: {value: new THREE.Vector3(0, 0, 0) }, + 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) }, src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)}, }, - vertexShader: stageShaders.vertexShader, - fragmentShader: stageShaders.fragmentShader, + vertexShader: stageNormalShaders.vertexShader, + fragmentShader: stageNormalShaders.fragmentShader, fog: false, transparent: true }); + + this.stageAdditive = new THREE.ShaderMaterial({ + uniforms: { + redColor: {value: new THREE.Vector3(1, 0, 0) }, + blueColor: {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, + transparent: true + }); } }); @@ -27,6 +42,7 @@ AFRAME.registerComponent('materials', { }, update: function () { + if (this.data.name === "") return; var mesh; var material = this.system[this.data.name]; if (!material) { @@ -42,10 +58,11 @@ AFRAME.registerComponent('materials', { } }, - applyMaterial: function (obj, material) { + applyMaterial: function (obj) { var material = this.system[this.data.name]; + if (obj['detail']) { obj = obj.detail.model; } if (this.data.recursive) { - obj.detail.model.traverse(o => { + obj.traverse(o => { if (o.type === 'Mesh') { o.material = material; } diff --git a/src/index.html b/src/index.html index 3c02fe8..ab1112d 100644 --- a/src/index.html +++ b/src/index.html @@ -60,9 +60,11 @@ {% include './assets.html' %} - - + + + + diff --git a/src/templates/stage.html b/src/templates/stage.html index 4428bbf..834ae21 100644 --- a/src/templates/stage.html +++ b/src/templates/stage.html @@ -92,7 +92,7 @@ + materials="name: stageAdditive">