diff --git a/src/components/floor-shader.js b/src/components/floor-shader.js index 7cbadcd..ff992b4 100644 --- a/src/components/floor-shader.js +++ b/src/components/floor-shader.js @@ -1,6 +1,10 @@ + +const COLORS = require('../constants/colors.js'); +const HIT_COLOR = new THREE.Color(COLORS.NEON_RED); +const BORDER_COLOR = new THREE.Color(COLORS.NEON_BLUE); + AFRAME.registerShader('floorShader', { schema: { - color: {type: 'vec3', is: 'uniform', default: {x: 0, y: 0, z: 0}}, normalMap: {type: 'map', is: 'uniform'}, envMap: {type: 'map', is: 'uniform'}, hitRight: {type: 'vec3', is: 'uniform', default: {x: 0, y: 1, z: 0}}, @@ -27,23 +31,26 @@ AFRAME.registerShader('floorShader', { uniform vec3 hitRight; uniform vec3 hitLeft; + #define HIT_COLOR vec3(${HIT_COLOR.r}, ${HIT_COLOR.g}, ${HIT_COLOR.b}) + #define BORDER_COLOR vec3(${BORDER_COLOR.r}, ${BORDER_COLOR.g}, ${BORDER_COLOR.b}) + vec3 drawCircle(vec3 p, vec3 center, float radius, float edgeWidth, vec3 color) { return color*(1.0-smoothstep(radius, radius+edgeWidth, length(p-center))); } void main() { vec2 p = uvs.xy - 0.5; - float border = smoothstep(0.49, 0.495, abs(p.x)) + smoothstep(0.49, 0.495, abs(p.y)); + vec3 border = vec3(smoothstep(0.49, 0.495, abs(p.x)) + smoothstep(0.49, 0.495, abs(p.y))); + border += BORDER_COLOR * (smoothstep(0.475, 0.495, abs(p.x)) + smoothstep(0.475, 0.495, abs(p.y))) * .7; p*= 4.0; - vec3 col = color; - vec3 col2 = color; - vec4 outColor; + vec3 hitColor = HIT_COLOR; + vec3 hit = vec3(0.0); - 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)); + hit += drawCircle(worldPos, hitRight, 0.04, 0.05, hitColor); + hit += drawCircle(worldPos, hitRight, 0.02, 0.03, vec3(0.7, 0.7, 0.7)); + hit += drawCircle(worldPos, hitLeft, 0.04, 0.05, hitColor); + hit += drawCircle(worldPos, hitLeft, 0.02, 0.03, vec3(0.7, 0.7, 0.7)); vec3 normal = normalize(texture2D(normalMap, uvs).xyz); @@ -51,11 +58,9 @@ AFRAME.registerShader('floorShader', { vec3 reflectVec = normalize(reflect(normalize(worldPos - cameraPosition), normal)); //vec3 reflectView = normalize((viewMatrix * vec4(reflectVec, 0.0)).xyz + vec3(0.0, 0.0, 1.0)); - col2 = texture2D(envMap, reflectVec.xy * vec2(0.3, 1.0) + vec2(0.75, -cameraPosition.z * 0.05)).xyz * 0.08 + col; + vec3 ref = texture2D(envMap, reflectVec.xy * vec2(0.3, 1.0) + vec2(0.75, -cameraPosition.z * 0.05)).xyz * 0.14; - outColor = smoothstep(vec4(col2, 0.9 + col.x), vec4(1.0), vec4(border)); - - gl_FragColor = outColor; + gl_FragColor = vec4(ref + border + hit, 1.0); } ` }); diff --git a/src/templates/stage.html b/src/templates/stage.html index bc8ce07..58002cf 100644 --- a/src/templates/stage.html +++ b/src/templates/stage.html @@ -64,7 +64,7 @@ data-saber-particles geometry="primitive: plane; width: 3; height: 3" rotation="-90 0 0" - material="shader: floorShader; color: #f33; normalMap: #floorNormalsImg; envMap: #floorEnvImg; hitLeft: -999 0 0; hitRight: -999 0 0" + material="shader: floorShader; normalMap: #floorNormalsImg; envMap: #floorEnvImg; hitLeft: -999 0 0; hitRight: -999 0 0" raycastable-game stepback>