Add UI watch example assets

examples/mixed-reality/watch/shaders/grid-shader.js

@@ -0,0 +1,139 @@
+/* global AFRAME */
+AFRAME.registerShader('grid', {
+  schema: {
+    u_majorLineWidth: {type: 'float', is: 'uniform', default: 0.04},
+    u_minorLineWidth: {type: 'float', is: 'uniform', default: 0.01},
+    u_axisLineWidth: {type: 'float', is: 'uniform', default: 0.15},
+    u_gridDiv: {type: 'float', is: 'uniform', default: 4.0},
+    u_majorGridDiv: {type: 'float', is: 'uniform', default: 10.0},
+    u_baseAlpha: {type: 'float', is: 'uniform', default: 0.5},
+    u_baseColor: {type: 'color', is: 'uniform', default: '#737373'},
+    u_majorLineColor: {type: 'color', is: 'uniform', default: '#ffffff'},
+    u_minorLineColor: {type: 'color', is: 'uniform', default: '#f1f1f1'},
+    u_xAxisColor: {type: 'color', is: 'uniform', default: '#ef2d5e'},
+    u_zAxisColor: {type: 'color', is: 'uniform', default: '#61c7fa'}
+  },
+
+  glsl3: true,
+
+  vertexShader: [
+    'precision highp float;',
+
+    '// Uniforms',
+    'uniform float u_majorGridDiv;',
+    'uniform float u_gridDiv;',
+
+    'out vec2 v_uv; // Passed to the fragment shader',
+    'out vec2 v_worldPos;',
+    'void main() {',
+      'vec4 transformed = vec4(position, 1.0);',
+      'gl_Position = projectionMatrix * viewMatrix * modelMatrix * transformed;',
+
+      'vec3 worldPosition = (modelMatrix * transformed).xyz;',
+
+      'v_worldPos = worldPosition.xz * u_gridDiv;',
+
+      '// Use local position for grid calculations',
+      'vec3 localPos = transformed.xyz;',
+      'vec3 cameraCenteringOffset = floor(cameraPosition);',
+      'vec3 cameraSnappedWorldPos = worldPosition.xyz - cameraCenteringOffset;',
+      'v_uv = cameraSnappedWorldPos.xz * u_gridDiv;',
+
+    '}'
+  ].join('\n'),
+
+  fragmentShader: [
+    'precision highp float;',
+
+    '// Varyings from the vertex shader',
+    'in vec2 v_uv;',
+    'in vec2 v_worldPos;',
+
+    '// Uniforms',
+    'uniform float u_majorLineWidth, u_minorLineWidth, u_axisLineWidth;',
+    'uniform vec3 u_majorLineColor, u_minorLineColor, u_baseColor;',
+    'uniform vec3 u_xAxisColor, u_zAxisColor;',
+    'uniform float u_majorGridDiv, u_baseAlpha;',
+
+    '// Output color',
+    'out vec4 gColor;',
+
+    'float saturate(float value) {',
+      'return clamp(value, 0.0, 1.0);',
+    '}',
+
+    'void main() {',
+      '// Calculate derivatives for anti-aliasing',
+      'vec4 uvDDXY = vec4(dFdx(v_uv), dFdy(v_uv));',
+      'vec2 uvDeriv = vec2(length(uvDDXY.xz), length(uvDDXY.yw));',
+
+      'vec4 worldPosDDXY = vec4(dFdx(v_worldPos), dFdy(v_worldPos));',
+      'vec2 worldPosDeriv = vec2(length(worldPosDDXY.xz), length(worldPosDDXY.yw));',
+
+      '// Axis lines calculation',
+      'float axisLineWidth = max(u_majorLineWidth, u_axisLineWidth);',
+
+      'vec2 axisDrawWidth = vec2(axisLineWidth) + worldPosDeriv * 0.5; // Adjust for AA',
+      'vec2 axisLineAA = worldPosDeriv * 1.5;',
+      'vec2 axisLines2 = smoothstep(axisDrawWidth + axisLineAA, axisDrawWidth - axisLineAA, abs(v_worldPos.xy * 2.0));',
+      'axisLines2 *= (axisLineWidth / axisDrawWidth);',
+
+      '// Major grid lines',
+      'float div = max(2.0, round(u_majorGridDiv));',
+      'vec2 majorUVDeriv = worldPosDeriv / div;',
+      'float majorLineWidth = u_majorLineWidth / div;',
+      'vec2 majorDrawWidth = clamp(vec2(majorLineWidth), majorUVDeriv, vec2(0.5));',
+      'vec2 majorLineAA = majorUVDeriv * 1.5;',
+      'vec2 majorGridUV = 1.0 - abs(fract(v_worldPos.xy / div) * 2.0 - 1.0);',
+      'vec2 majorGrid2 = smoothstep(majorDrawWidth + majorLineAA, majorDrawWidth - majorLineAA, majorGridUV);',
+      'majorGrid2 *= (majorLineWidth / majorDrawWidth);',
+
+      '// Minor grid lines',
+      'float minorLineWidth = u_minorLineWidth;',
+      'bool minorInvertLine = minorLineWidth > 0.5;',
+      'float minorTargetWidth = minorInvertLine ? 1.0 - minorLineWidth : minorLineWidth;',
+      'vec2 minorDrawWidth = clamp(vec2(minorTargetWidth), uvDeriv, vec2(0.5));',
+      'vec2 minorLineAA = uvDeriv * 1.5;',
+      'vec2 minorGridUV = abs(fract(v_uv) * 2.0 - 1.0);',
+      'minorGridUV = minorInvertLine ? minorGridUV : 1.0 - minorGridUV;',
+      'vec2 minorGrid2 = smoothstep(minorDrawWidth + minorLineAA, minorDrawWidth - minorLineAA, minorGridUV);',
+      'minorGrid2 *= (minorTargetWidth / minorDrawWidth);',
+
+      'if ( max(axisLines2.x, axisLines2.y) > 0.) {',
+        '// If we\'re drawing axis lines, don\'t draw grid lines on axis',
+        'majorGrid2 = vec2(0.);',
+        'minorGrid2 = vec2(0.);',
+      '}',
+
+      '// Combine minor and major grid lines',
+      'float minorGrid = mix(minorGrid2.x, 1.0, minorGrid2.y);',
+      'float majorGrid = mix(majorGrid2.x, 1.0, majorGrid2.y);',
+
+      '// Final color calculations for grid',
+      'vec3 gridColor = mix(u_baseColor, u_minorLineColor, minorGrid);',
+      'gridColor = mix(gridColor, u_majorLineColor, majorGrid);',
+      'float gridAlpha = u_baseAlpha;',
+
+      '// Apply base alpha to the grid lines',
+      'if (minorGrid > 0.0) {',
+        'gridAlpha = saturate(mix(gridAlpha, 1.0, minorGrid));',
+      '}',
+      'if (majorGrid > 0.0) {',
+        'gridAlpha = saturate(mix(gridAlpha, 1.0, majorGrid));',
+      '}',
+
+      '// Apply axis color to the axis lines',
+      'vec3 axisColor = mix(vec3(1.), u_xAxisColor, step(0.5, abs(v_worldPos.x)));',
+      'axisColor = mix(axisColor, u_zAxisColor, step(0.5, abs(v_worldPos.y)));',
+
+      'vec3 finalColor = mix(gridColor, axisColor, max(axisLines2.x, axisLines2.y));',
+
+      'if ( max(axisLines2.x, axisLines2.y) > 0.) {',
+        'gridAlpha = saturate(mix(gridAlpha, 1.0, max(axisLines2.x, axisLines2.y)));',
+      '}',
+
+      '// Set the final fragment color',
+      'gColor = vec4(finalColor, 1.0);',
+    '}'
+  ].join('\n')
+});

examples/mixed-reality/watch/shaders/starry-night-shader.js

@@ -0,0 +1,129 @@
+/* global AFRAME */
+AFRAME.registerShader('starry-night', {
+  schema: {
+    gradientEnabled: {type: 'float', is: 'uniform', default: 0.0},
+    skyRadius: {type: 'float', is: 'uniform', default: 500},
+    env_c1: {type: 'color', is: 'uniform', default: '#0d1a2f'},
+    env_c2: {type: 'color', is: 'uniform', default: '#0f8682'},
+    noiseOffset: {type: 'vec3', default: '100.01, 100.01, 100.01'},
+    starSize: {type: 'float', is: 'uniform', default: 0.0035},
+    starDensity: {type: 'float', is: 'uniform', default: 0.08},
+    clusterStrength: {type: 'float', is: 'uniform', default: 0.1},
+    clusterSize: {type: 'float', is: 'uniform', default: 0.08},
+  },
+
+  vertexShader: [
+    'varying vec3 vPos;',
+    'void main() {',
+      'vPos = position;',
+      'vec4 mvPosition = modelViewMatrix * vec4( vPos, 1.0 );',
+      'gl_Position = projectionMatrix * mvPosition;',
+    '}'
+  ].join('\n'),
+
+  fragmentShader: [
+    'vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}',
+    'vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}',
+    'vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}',
+
+    'float cnoise(vec3 P){',
+      'vec3 Pi0 = floor(P); // Integer part for indexing',
+      'vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1',
+      'Pi0 = mod(Pi0, 289.0);',
+      'Pi1 = mod(Pi1, 289.0);',
+      'vec3 Pf0 = fract(P); // Fractional part for interpolation',
+      'vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0',
+      'vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);',
+      'vec4 iy = vec4(Pi0.yy, Pi1.yy);',
+      'vec4 iz0 = Pi0.zzzz;',
+      'vec4 iz1 = Pi1.zzzz;',
+
+      'vec4 ixy = permute(permute(ix) + iy);',
+      'vec4 ixy0 = permute(ixy + iz0);',
+      'vec4 ixy1 = permute(ixy + iz1);',
+
+      'vec4 gx0 = ixy0 / 7.0;',
+      'vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;',
+      'gx0 = fract(gx0);',
+      'vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);',
+      'vec4 sz0 = step(gz0, vec4(0.0));',
+      'gx0 -= sz0 * (step(0.0, gx0) - 0.5);',
+      'gy0 -= sz0 * (step(0.0, gy0) - 0.5);',
+
+      'vec4 gx1 = ixy1 / 7.0;',
+      'vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;',
+      'gx1 = fract(gx1);',
+      'vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);',
+      'vec4 sz1 = step(gz1, vec4(0.0));',
+      'gx1 -= sz1 * (step(0.0, gx1) - 0.5);',
+      'gy1 -= sz1 * (step(0.0, gy1) - 0.5);',
+
+      'vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);',
+      'vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);',
+      'vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);',
+      'vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);',
+      'vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);',
+      'vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);',
+      'vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);',
+      'vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);',
+
+      'vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));',
+      'g000 *= norm0.x;',
+      'g010 *= norm0.y;',
+      'g100 *= norm0.z;',
+      'g110 *= norm0.w;',
+      'vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));',
+      'g001 *= norm1.x;',
+      'g011 *= norm1.y;',
+      'g101 *= norm1.z;',
+      'g111 *= norm1.w;',
+
+      'float n000 = dot(g000, Pf0);',
+      'float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));',
+      'float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));',
+      'float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));',
+      'float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));',
+      'float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));',
+      'float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));',
+      'float n111 = dot(g111, Pf1);',
+
+      'vec3 fade_xyz = fade(Pf0);',
+      'vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);',
+      'vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);',
+      'float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);',
+      'return 2.2 * n_xyz;',
+    '}',
+
+    'varying vec3 vPos;',
+    'uniform float gradientEnabled;',
+
+    'uniform float skyRadius;',
+    'uniform vec3 noiseOffset;',
+
+    'uniform vec3 env_c1;',
+    'uniform vec3 env_c2;',
+
+    'uniform float clusterSize;',
+    'uniform float clusterStrength;',
+
+    'uniform float starSize;',
+    'uniform float starDensity;',
+
+    'void main() {',
+      'float freq = 1.1/ skyRadius;',
+      'float noise = cnoise(vPos * freq);',
+      'vec4 backgroundColor =  vec4(mix(env_c1, env_c2, noise) * gradientEnabled, 1.0);',
+
+      'float scaledClusterSize = (1.0/clusterSize)/skyRadius;',
+      'float scaledStarSize = (1.0/starSize)/skyRadius;',
+
+      'float cs = pow(cnoise(scaledClusterSize*vPos+noiseOffset),1.0/clusterStrength) + cnoise(scaledStarSize*vPos);',
+
+      'float c =clamp(pow(cs, 1.0/starDensity),0.0,1.0);',
+      'vec4 starColor = 0.5*vec4(c, c, c, 1.0);',
+
+      'gl_FragColor = backgroundColor;',
+      'gl_FragColor += starColor;',
+    '}'
+  ].join('\n')
+});