WebXR depth: add samples consuming new API

Add 2 samples leveraging prototype implementation of depth API.

Change-Id: I94514a905d694f168983f1afa9a9d4424a385188
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2417064
Commit-Queue: Piotr Bialecki <bialpio@chromium.org>
Reviewed-by: Brandon Jones <bajones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808485}

third_party/webxr_test_pages/webxr-samples/shaders/depth-api-cpu.frag

+precision mediump float;
+
+varying float vDepthDistance;
+
+const highp float kMaxDepth = 8.0; // In meters.
+const float kInvalidDepthThreshold = 0.01;
+
+vec3 TurboColormap(in float x);
+
+// Returns a color corresponding to the depth passed in. Colors range from red
+// to green to blue, where red is closest and blue is farthest.
+//
+// Uses Turbo color mapping :
+// https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html
+vec3 DepthGetColorVisualization(in float x) {
+  return step(kInvalidDepthThreshold, x) * TurboColormap(x);
+}
+
+void main(void) {
+  highp float normalized_depth = clamp(vDepthDistance / 8.0, 0.0, 1.0);
+  gl_FragColor = vec4(DepthGetColorVisualization(normalized_depth), 0.75);
+}
+
+// Insert turbo.glsl here.

third_party/webxr_test_pages/webxr-samples/shaders/depth-api-gpu.frag

+precision mediump float;
+
+uniform sampler2D uDepthTexture;
+uniform mat4 uUvTransform;
+
+varying vec2 vTexCoord;
+
+float DepthGetMillimeters(in sampler2D depth_texture, in vec2 depth_uv) {
+  // Depth is packed into the luminance and alpha components of its texture.
+  // The texture is a normalized format, storing millimeters.
+  vec2 packedDepthAndVisibility = texture2D(depth_texture, depth_uv).ra;
+  return dot(packedDepthAndVisibility, vec2(255.0, 256.0 * 255.0));
+}
+
+const highp float kMaxDepth = 8000.0; // In millimeters.
+const float kInvalidDepthThreshold = 0.01;
+
+vec3 TurboColormap(in float x);
+
+// Returns a color corresponding to the depth passed in. Colors range from red
+// to green to blue, where red is closest and blue is farthest.
+//
+// Uses Turbo color mapping:
+// https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html
+vec3 DepthGetColorVisualization(in float x) {
+  return step(kInvalidDepthThreshold, x) * TurboColormap(x);
+}
+
+void main(void) {
+  vec2 texCoord = (uUvTransform * vec4(vTexCoord.xy, 0, 1)).xy;
+
+  highp float normalized_depth = clamp(
+    DepthGetMillimeters(uDepthTexture, texCoord) / kMaxDepth, 0.0, 1.0);
+  gl_FragColor = vec4(DepthGetColorVisualization(normalized_depth), 0.75);
+}
+
+// Insert turbo.glsl here.

third_party/webxr_test_pages/webxr-samples/shaders/turbo.glsl

+/*
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Taken from:
+// third_party/arcore-android-sdk/src/samples/augmented_image_c/app/src/main/assets/shaders/background_show_depth_color_visualization.frag
+// & modified.
+vec3 TurboColormap(in float x) {
+  const vec4 kRedVec4 = vec4(0.55305649, 3.00913185, -5.46192616, -11.11819092);
+  const vec4 kGreenVec4 = vec4(0.16207513, 0.17712472, 15.24091500, -36.50657960);
+  const vec4 kBlueVec4 = vec4(-0.05195877, 5.18000081, -30.94853351, 81.96403246);
+  const vec2 kRedVec2 = vec2(27.81927491, -14.87899417);
+  const vec2 kGreenVec2 = vec2(25.95549545, -5.02738237);
+  const vec2 kBlueVec2 = vec2(-86.53476570, 30.23299484);
+
+  // Adjusts color space via 6 degree poly interpolation to avoid pure red.
+  x = clamp(x * 0.9 + 0.03, 0.0, 1.0);
+  vec4 v4 = vec4( 1.0, x, x * x, x * x * x);
+  vec2 v2 = v4.zw * v4.z;
+  return vec3(
+    dot(v4, kRedVec4)   + dot(v2, kRedVec2),
+    dot(v4, kGreenVec4) + dot(v2, kGreenVec2),
+    dot(v4, kBlueVec4)  + dot(v2, kBlueVec2)
+  );
+}