diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 6bc48fd144..41ab16dd97 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/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" diff --git a/frontend/src/app/main/ui/workspace/viewport/gl.cljs b/frontend/src/app/main/ui/workspace/viewport/gl.cljs index 6a00a64098..009eb60554 100644 --- a/frontend/src/app/main/ui/workspace/viewport/gl.cljs +++ b/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) diff --git a/frontend/src/app/util/gl/shaders/default.v.glsl b/frontend/src/app/util/gl/shaders/default.v.glsl new file mode 100644 index 0000000000..2f3c9d39e5 --- /dev/null +++ b/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); +} \ No newline at end of file