offscreen picking

felixguendling · Jul 11, 2016 · ac70b1c · ac70b1c
1 parent fb4e939
commit ac70b1c
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 100 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -22,19 +22,29 @@
     , 'mouseout': app.ports.mouseUp
     , 'mousemove': app.ports.mouseMove };
 
-  document.addEventListener('elmgl-init', function(e) {
+  var model = null;
+  document.addEventListener('elmgl-update', e => {
+    model = e.detail.newModel;
+  });
+
+  document.addEventListener('elmgl-init', e => {
     var canvas = e.detail.canvas;
     var gl = e.detail.gl;
+    var render = e.detail.render;
 
-    var sendTelemetry = function(eventType) {
-      return function(e) {
-        var pixels = new Uint8Array(1 * 1 * 4);
-        gl.readPixels(e.clientX, gl.drawingBufferHeight - e.clientY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
-        ports[eventType].send(
-          { x: e.clientX
-          , y: e.clientY
-          , color: pixels[0]
-          });
+    var sendTelemetry = eventType => {
+      return e => {
+        if (!model) {
+          console.log("missing model!");
+          return;
+        }
+        render(model, e.clientX, e.clientY, color => {
+          ports[eventType].send(
+            { x: e.clientX
+            , y: e.clientY
+            , color: color
+            });
+        });
       };
     };
 

diff --git a/examples/picking.elm b/examples/picking.elm
@@ -215,24 +215,33 @@ finishDrag s box =
 
 view : Model -> Html Msg
 view model =
-    WebGL.toHtml
-        [ width w
-        , height h
-        , style
-            [ ( "cursor"
-              , if model.hover then
-                    "pointer"
-                else
-                    "default"
-              )
+    let
+        renderable =
+            WebGL.render vertexShader
+                fragmentShader
+                (mesh model)
+                { perspective = makeOrtho2D 0.0 w h 0.0 }
+
+        offScreenRenderable =
+            WebGL.render offscreenVertexShader
+                offscreenFragmentShader
+                (mesh model)
+                { perspective = makeOrtho2D 0.0 w h 0.0 }
+    in
+        WebGL.toHtml
+            [ width w
+            , height h
+            , style
+                [ ( "cursor"
+                  , if model.hover then
+                        "pointer"
+                    else
+                        "default"
+                  )
+                ]
             ]
-        ]
-        [ WebGL.render vertexShader
-            fragmentShader
-            (mesh model)
-            { perspective = makeOrtho2D 0.0 w h 0.0 }
-        ]
-
+            [ renderable ]
+            [ offScreenRenderable ]
 
 vertexShader : WebGL.Shader { attr | coordinate : Vec3, color : Vec3 } { unif | perspective : Mat4 } { vcolor : Vec3 }
 vertexShader =
@@ -248,13 +257,37 @@ void main() {
 }
 |]
 
+offscreenVertexShader : WebGL.Shader { attr | coordinate : Vec3, color : Vec3 } { unif | perspective : Mat4 } { vcolor : Vec3 }
+offscreenVertexShader =
+    [glsl|
+attribute vec3 coordinate;
+attribute vec3 color;
+uniform mat4 perspective;
+varying vec3 vcolor;
+
+void main() {
+    gl_Position = perspective * vec4(coordinate, 1.0);
+    vcolor = color;
+}
+|]
 
 fragmentShader : WebGL.Shader {} u { vcolor : Vec3 }
 fragmentShader =
     [glsl|
 precision mediump float;
 varying vec3 vcolor;
 void main () {
-    gl_FragColor = vec4(vcolor, 1);
+    gl_FragColor = vec4(vec3(0, 0, 1), 1);
 }
 |]
+
+
+offscreenFragmentShader : WebGL.Shader {} u { vcolor : Vec3 }
+offscreenFragmentShader =
+    [glsl|
+precision mediump float;
+varying vec3 vcolor;
+void main () {
+    gl_FragColor = vec4(vcolor, 1);
+}
+|]