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

constant colors logic

Browse Source
This commit is contained in:
Diego F. Goberna
2018-12-05 02:03:42 +01:00
committed by Diego Marcos
parent 1518bf2e89
commit 09816c80cf
4 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/assets.html
View File

@@ -159,33 +159,33 @@
<!-- stage, neons, etc animations launched from beat-loader events -->
<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"
animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_OFF }}; dur: 500; easing: linear; startEvents: bgcoloroff"
animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorblue"
animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: {{ COLORS.BG_BRIGHTBLUE }}; to: {{ COLORS.BG_BLUE }}; dur: 500; easing: linear; startEvents: bgcolorbluefade"
animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_RED }}; dur: 5; easing: linear; startEvents: bgcolorred"
animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: {{ COLORS.BG_BRIGHTBLUE }}; to: {{ COLORS.BG_RED }}; 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"
animation__tunnelcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: tunnelcoloroff"
animation__tunnelcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: tunnelcolorblue"
animation__tunnelcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: tunnelcolorbluefade"
animation__tunnelcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: tunnelcolorred"
animation__tunnelcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: tunnelcolorredfade"
></a-mixin>
<a-mixin id="leftLaserColorAnimation"
animation__leftlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: #000; dur: 500; easing: linear; startEvents: leftlasercoloroff"
animation__leftlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: #00f; dur: 5; easing: linear; startEvents: leftlasercolorblue"
animation__leftlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: #aaf; to: #00f; dur: 500; easing: linear; startEvents: leftlasercolorbluefade"
animation__leftlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: #f00; dur: 5; easing: linear; startEvents: leftlasercolorred"
animation__leftlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: #faa; to: #f00; dur: 500; easing: linear; startEvents: leftlasercolorredfade"
animation__leftlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: leftlasercoloroff"
animation__leftlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: leftlasercolorblue"
animation__leftlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: leftlasercolorbluefade"
animation__leftlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: leftlasercolorred"
animation__leftlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: leftlasercolorredfade"
></a-mixin>
<a-mixin id="rightLaserColorAnimation"
animation__rightlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: #000; dur: 500; easing: linear; startEvents: rightlasercoloroff"
animation__rightlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: #00f; dur: 5; easing: linear; startEvents: rightlasercolorblue"
animation__rightlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: #aaf; to: #00f; dur: 500; easing: linear; startEvents: rightlasercolorbluefade"
animation__rightlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: #f00; dur: 5; easing: linear; startEvents: rightlasercolorred"
animation__rightlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: #faa; to: #f00; dur: 500; easing: linear; startEvents: rightlasercolorredfade"
animation__rightlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: rightlasercoloroff"
animation__rightlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: rightlasercolorblue"
animation__rightlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: rightlasercolorbluefade"
animation__rightlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: rightlasercolorred"
animation__rightlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: rightlasercolorredfade"
></a-mixin>

19
src/components/materials.js
View File

@@ -1,15 +1,12 @@
const stageNormalShaders = require('../../assets/shaders/stageNormal.js')
const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js')
const stageNormalShaders = require('../../assets/shaders/stageNormal.js');
const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js');
const COLORS = require('../constants/colors.js');
AFRAME.registerSystem('materials', {
init: function () {
this.black = new THREE.MeshLambertMaterial({color: 0x000000, flatShading: true});
this.default = new THREE.MeshLambertMaterial({color: 0xff0000, flatShading: true});
this.neon = new THREE.MeshBasicMaterial({color: 0x9999ff, fog: false});
this.stageNormal = new THREE.ShaderMaterial({
uniforms: {
color: {value: new THREE.Vector3(0, 0.48, 0.72)},
color: {value: new THREE.Color(COLORS.BG_BLUE)},
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
},
vertexShader: stageNormalShaders.vertexShader,
@@ -20,10 +17,10 @@ AFRAME.registerSystem('materials', {
this.stageAdditive = new THREE.ShaderMaterial({
uniforms: {
tunnelNeon: {value: new THREE.Vector3(0, 0, 1)},
floorNeon: {value: new THREE.Vector3(0, 0, 1)},
leftLaser: {value: new THREE.Vector3(0, 0, 1)},
rightLaser: {value: new THREE.Vector3(0, 0, 1)},
tunnelNeon: {value: new THREE.Color(COLORS.NEON_BLUE)},
floorNeon: {value: new THREE.Color(COLORS.NEON_BLUE)},
leftLaser: {value: new THREE.Color(COLORS.NEON_BLUE)},
rightLaser: {value: new THREE.Color(COLORS.NEON_BLUE)},
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
},
vertexShader: stageAdditiveShaders.vertexShader,

17
src/constants/colors.js Normal file
View File

@@ -0,0 +1,17 @@
module.exports = {
OFF: '#111',
RED: '#f00',
BLUE: '#00f',
BG_OFF: '#222',
BG_BLUE: '#007AB8',
BG_BRIGHTBLUE: '#5FCCFF',
BG_RED: '#B80000',
BG_BRIGHTRED: '#FF4343',
NEON_OFF: '#000',
NEON_BLUE: '#00f',
NEON_BRIGHTBLUE: '#aaf',
NEON_RED: '#f00',
NEON_BRIGHTRED: '#faa',
};

2
webpack.config.js
View File

@@ -5,6 +5,7 @@ var htmlMinify = require('html-minifier').minify;
var ip = require('ip');
var path = require('path');
var webpack = require('webpack');
const COLORS = require('./src/constants/colors.js');
// Set up templating.
var nunjucks = Nunjucks.configure(path.resolve(__dirname, 'src'), {
@@ -14,6 +15,7 @@ nunjucks.addGlobal('DEBUG_AFRAME', !!process.env.DEBUG_AFRAME);
nunjucks.addGlobal('DEBUG_KEYBOARD', !!process.env.DEBUG_KEYBOARD);
nunjucks.addGlobal('HOST', ip.address());
nunjucks.addGlobal('IS_PRODUCTION', process.env.NODE_ENV === 'production');
nunjucks.addGlobal('COLORS', COLORS);
// Initial Nunjucks render.
fs.writeFileSync('index.html', nunjucks.render('index.html'));