feature(webgl): support pick position from depth buffer with ortho

camera

Author: mgermerie

src/Core/View.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import Camera from 'Renderer/Camera';
 import MainLoop, { MAIN_LOOP_EVENTS, RENDERING_PAUSED } from 'Core/MainLoop';
+import Capabilities from 'Core/System/Capabilities';
 import { COLOR_LAYERS_ORDER_CHANGED } from 'Renderer/ColorLayersOrdering';
 import c3DEngine from 'Renderer/c3DEngine';
 import RenderMode from 'Renderer/RenderMode';
@@ -974,25 +975,32 @@ class View extends THREE.EventDispatcher {
         screen.x = (mouse.x / dim.x) * 2 - 1;
         screen.y = -(mouse.y / dim.y) * 2 + 1;
 
-        // Origin
-        ray.origin.copy(camera.position);
-
-        // Direction
-        ray.direction.set(screen.x, screen.y, 0.5);
-        // Unproject
-        matrix.multiplyMatrices(camera.matrixWorld, matrix.copy(camera.projectionMatrix).invert());
-        ray.direction.applyMatrix4(matrix);
-        ray.direction.sub(ray.origin);
-
-        direction.set(0, 0, 1.0);
-        direction.applyMatrix4(matrix);
-        direction.sub(ray.origin);
-
-        const angle = direction.angleTo(ray.direction);
-        const orthoZ = g.depthBufferRGBAValueToOrthoZ(buffer, camera);
-        const length = orthoZ / Math.cos(angle);
+        if (Capabilities.isLogDepthBufferSupported() && camera.type == 'PerspectiveCamera') {
+            // TODO: solve this part with gl_FragCoord_Z and unproject
+            // Origin
+            ray.origin.copy(camera.position);
+
+            // Direction
+            ray.direction.set(screen.x, screen.y, 0.5);
+            // Unproject
+            matrix.multiplyMatrices(camera.matrixWorld, matrix.copy(camera.projectionMatrix).invert());
+            ray.direction.applyMatrix4(matrix);
+            ray.direction.sub(ray.origin);
+
+            direction.set(0, 0, 1.0);
+            direction.applyMatrix4(matrix);
+            direction.sub(ray.origin);
+
+            const angle = direction.angleTo(ray.direction);
+            const orthoZ = g.depthBufferRGBAValueToOrthoZ(buffer, camera);
+            const length = orthoZ / Math.cos(angle);
+            target.addVectors(camera.position, ray.direction.setLength(length));
+        } else {
+            const gl_FragCoord_Z = g.depthBufferRGBAValueToOrthoZ(buffer, camera);
 
-        target.addVectors(camera.position, ray.direction.setLength(length));
+            target.set(screen.x, screen.y, gl_FragCoord_Z);
+            target.unproject(camera);
+        }
 
         camera.layers.mask = prev;
 

src/Renderer/Shader/Chunk/mode_depth_fragment.glsl

@@ -1,5 +1,6 @@
 #if defined(USE_LOGDEPTHBUF) && defined(USE_LOGDEPTHBUF_EXT)
 gl_FragColor = packDepthToRGBA(gl_FragDepthEXT);
 #else
-gl_FragColor = packDepthToRGBA(gl_FragCoord.z);
-#endif
+float fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5;
+gl_FragColor = packDepthToRGBA(fragCoordZ);
+#endif

src/Renderer/Shader/TileFS.glsl

@@ -13,6 +13,7 @@
 uniform vec3        diffuse;
 uniform float       opacity;
 varying vec3        vUv; // uv_0.x/uv_1.x, uv_0.y, uv_1.y
+varying vec2        vHighPrecisionZW;
 
 void main() {
     #include <logdepthbuf_fragment>

src/Renderer/Shader/TileVS.glsl

@@ -12,6 +12,7 @@ attribute vec3      normal;
 
 uniform mat4 modelMatrix;
 uniform bool lightingEnabled;
+varying vec2 vHighPrecisionZW;
 
 #if MODE == MODE_FINAL
 #include <fog_pars_vertex>
@@ -25,6 +26,7 @@ void main() {
         #include <itowns/elevation_vertex>
         #include <project_vertex>
         #include <logdepthbuf_vertex>
+        vHighPrecisionZW = gl_Position.zw;
 #if MODE == MODE_FINAL
         #include <fog_vertex>
         #if NUM_CRS > 1

src/Renderer/c3DEngine.js

@@ -247,15 +247,15 @@ class c3DEngine {
     depthBufferRGBAValueToOrthoZ(depthBufferRGBA, camera) {
         depthRGBA.fromArray(depthBufferRGBA).divideScalar(255.0);
 
-        if (Capabilities.isLogDepthBufferSupported()) {
+        if (Capabilities.isLogDepthBufferSupported() && camera.type == 'PerspectiveCamera') {
             const gl_FragDepthEXT = unpack1K(depthRGBA);
             const logDepthBufFC = 2.0 / (Math.log(camera.far + 1.0) / Math.LN2);
             // invert function : gl_FragDepthEXT = log2(vFragDepth) * logDepthBufFC * 0.5;
             return 2 ** (2 * gl_FragDepthEXT / logDepthBufFC);
         } else {
             let gl_FragCoord_Z = unpack1K(depthRGBA);
             gl_FragCoord_Z = gl_FragCoord_Z * 2.0 - 1.0;
-            return 2.0 * camera.near * camera.far / (camera.far + camera.near - gl_FragCoord_Z * (camera.far - camera.near));
+            return gl_FragCoord_Z;
         }
     }
 }