wip

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -350,7 +350,8 @@
                                :active-frames @active-frames}]]]]
 
      ;; IT's MAGIC!
-     [gl/canvas {:objects base-objects}]
+     [gl/canvas {:objects base-objects
+                 :active-frames @active-frames}]
 
      [:svg.viewport-controls
       {:xmlns "http://www.w3.org/2000/svg"

frontend/src/app/main/ui/workspace/viewport/gl.cljs

@@ -1,24 +1,54 @@
 (ns app.main.ui.workspace.viewport.gl
   (:require-macros [app.main.style :as stl])
+  (:require fragment-shader)
   (:require
+   [app.common.math :as math]
    [rumext.v2 :as mf]))
 
 (def CANVAS_CONTEXT_ID "webgl2")
 
+(defn resize-canvas-to
+  [canvas width height]
+  (let [resized (or (not= (.-width canvas) width)
+                    (not= (.-height canvas) height))]
+    (when (not= (.-width canvas) width)
+      (set! (.-width canvas) width))
+    (when (not= (.-height canvas) height)
+      (set! (.-height canvas) height))
+    resized))
+
+(defn resize-canvas
+  [canvas]
+  (let [width  (math/floor (.-clientWidth canvas))
+        height (math/floor (.-clientHeight canvas))]
+    (resize-canvas-to canvas width height)))
+
+(defn render-canvas
+  [gl objects]
+  (.clearColor gl 1.0 0.0 1.0 1.0)
+  (.clear gl (.COLOR_BUFFER_BIT gl))
+
+  (.viewport gl 0 0 (.-width gl) (.-height gl))
+
+  (for [object objects]
+    (.drawArrays gl (.TRIANGLES gl) 0 4)))
+
 (mf/defc canvas
   "A canvas element with a WebGL context."
   {::mf/wrap-props false}
   [props]
   (js/console.log props)
-  (let [canvas-ref (mf/use-ref nil)
+  (let [objects    (unchecked-get props "objects")
+        canvas-ref (mf/use-ref nil)
         gl-ref     (mf/use-ref nil)]
+
     (mf/with-effect [canvas-ref]
       (let [canvas (mf/ref-val canvas-ref)]
         (when (some? canvas)
           (let [gl (.getContext canvas CANVAS_CONTEXT_ID)]
-            (.clearColor gl 1.0 0.0 1.0 0.5)
-            (.clear gl (.-COLOR_BUFFER_BIT gl))
             (mf/set-ref-val! gl-ref gl)
+            (resize-canvas canvas)
+            (render-canvas gl objects)
             (js/console.log "gl" gl)))))
 
     [:canvas {:class (stl/css :canvas)

frontend/src/app/util/gl/shaders/default.v.glsl

@@ -0,0 +1,5 @@
+#version 300 es
+
+void main() {
+    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+}