wip

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

@@ -3,19 +3,23 @@
   (:require-macros [app.util.gl.macros :refer [slurp]])
   (:require
    [app.common.math :as math]
+   [app.util.gl :as gl]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (def CANVAS_CONTEXT_ID "webgl2")
 
-(def default-shader (slurp "src/app/util/gl/shaders/default.v.glsl"))
+(def default-vertex-shader (slurp "src/app/util/gl/shaders/default.v.glsl"))
+(def default-fragment-shader (slurp "src/app/util/gl/shaders/default.f.glsl"))
 
 (defn resize-canvas-to
   [canvas width height]
-  (let [resized (or (not= (.-width canvas) width)
-                    (not= (.-height canvas) height))]
-    (when (not= (.-width canvas) width)
+  (let [resized-width (not= (.-width canvas) width)
+        resized-height (not= (.-height canvas) height)
+        resized (or resized-width resized-height)]
+    (when resized-width
       (set! (.-width canvas) width))
-    (when (not= (.-height canvas) height)
+    (when resized-height
       (set! (.-height canvas) height))
     resized))
 
@@ -25,14 +29,20 @@
         height (math/floor (.-clientHeight canvas))]
     (resize-canvas-to canvas width height)))
 
-(defn render-canvas
+(defn prepare-gl
+  [gl]
+  (let [default-program (gl/create-program-from-sources gl default-vertex-shader default-fragment-shader)]))
+
+(defn render-gl
   [gl objects]
   (.clearColor gl 1.0 0.0 1.0 1.0)
-  (.clear gl (.COLOR_BUFFER_BIT gl))
+  (.clear gl (.-COLOR_BUFFER_BIT gl))
 
-  (.viewport gl 0 0 (.-width gl) (.-height gl))
+  (.viewport gl 0 0 (.-width (.-canvas gl)) (.-height (.-canvas gl)))
 
   (for [object objects]
+
+
     (.drawArrays gl (.TRIANGLES gl) 0 4)))
 
 (mf/defc canvas
@@ -40,7 +50,7 @@
   {::mf/wrap-props false}
   [props]
   (js/console.log props)
-  (js/console.log "default-shader" default-shader)
+  (js/console.log "default-shaders" default-vertex-shader default-fragment-shader)
   (let [objects    (unchecked-get props "objects")
         canvas-ref (mf/use-ref nil)
         gl-ref     (mf/use-ref nil)]
@@ -51,7 +61,8 @@
           (let [gl (.getContext canvas CANVAS_CONTEXT_ID)]
             (mf/set-ref-val! gl-ref gl)
             (resize-canvas canvas)
-            (render-canvas gl objects)
+            (prepare-gl gl)
+            (render-gl gl objects)
             (js/console.log "gl" gl)))))
 
     [:canvas {:class (stl/css :canvas)

frontend/src/app/util/gl.cljs

@@ -1,26 +1,34 @@
-(ns app.util.gl)
+(ns app.util.gl
+  (:require [app.common.data.macros :as dm]))
 
 ;;
 ;; Shaders
 ;;
+(defn get-shader-type
+  [gl type]
+  (cond
+    (= type (.-VERTEX_SHADER gl)) "vertex shader"
+    (= type (.-FRAGMENT_SHADER gl)) "fragment shader"
+    :else "unknown shader type"))
+
 (defn create-shader
   "Creates a shader of the given type with the given source"
   [gl type source]
   (let [shader (.createShader gl type)]
     (.shaderSource gl shader source)
     (.compileShader gl shader)
-    (when-not (.getShaderParameter gl shader (.COMPILE_STATUS gl))
-      (throw (js/Error. (.getShaderInfoLog gl shader))))))
+    (when-not (.getShaderParameter gl shader (.-COMPILE_STATUS gl))
+      (throw (js/Error. (dm/str (get-shader-type gl type) " " (.getShaderInfoLog gl shader)))))))
 
 (defn create-vertex-shader
   "Creates a vertex shader with the given source"
   [gl source]
-  (create-shader gl (.VERTEX_SHADER gl) source))
+  (create-shader gl (.-VERTEX_SHADER gl) source))
 
 (defn create-fragment-shader
   "Creates a fragment shader with the given source"
   [gl source]
-  (create-shader gl (.FRAGMENT_SHADER gl) source))
+  (create-shader gl (.-FRAGMENT_SHADER gl) source))
 
 ;;
 ;; Programs
@@ -32,7 +40,7 @@
     (.attachShader gl program vertex-shader)
     (.attachShader gl program fragment-shader)
     (.linkProgram gl program)
-    (when-not (.getProgramParameter gl program (.LINK_STATUS gl))
+    (when-not (.getProgramParameter gl program (.-LINK_STATUS gl))
       (throw (js/Error. (.getProgramInfoLog gl program))))
     program))
 
@@ -48,16 +56,16 @@
   [parameter get-active-name get-location-name]
   (fn [gl program]
     (let [count (.getProgramParameter gl program parameter)
-          get-active (dm/get gl get-active-name)
-          get-location (dm/get gl get-location-name)]
+          get-active (dm/get-prop gl get-active-name)
+          get-location (dm/get-prop gl get-location-name)]
        (into {} (for [index (range count)]
-                  (let [info         (.get-active gl program index)
+                  (let [info         (get-active gl program index)
                         name         (.-name info)
-                        location     (.get-location gl program name)]
+                        location     (get-location gl program name)]
                     [name #js {:name name :info info :location location}]))))))
 
-(def get-program-uniforms (get-program-active-factory (.ACTIVE_UNIFORMS js/WebGLRenderingContext) "getActiveUniform" "getUniformLocation"))
-(def get-program-attributes (get-program-active-factory (.ACTIVE_ATTRIBUTES js/WebGLRenderingContext) "getActiveAttrib" "getAttribLocation"))
+(def get-program-uniforms (get-program-active-factory (.-ACTIVE_UNIFORMS js/WebGLRenderingContext) "getActiveUniform" "getUniformLocation"))
+(def get-program-attributes (get-program-active-factory (.-ACTIVE_ATTRIBUTES js/WebGLRenderingContext) "getActiveAttrib" "getAttribLocation"))
 
 (defn get-program-actives
   "Returns a map of uniform names to uniform locations for the given program"

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

@@ -0,0 +1,16 @@
+#version 300 es
+
+precision highp float;
+
+in vec2 v_texCoord;
+
+uniform sampler2D u_texture;
+
+out vec4 fragColor;
+
+void main() {
+    // fragColor = texture(u_framebuffer, v_texCoord) + texture(u_texture, v_texCoord);
+    // fragColor = texture(u_texture, v_texCoord);
+    // Pintamos rosita
+    fragColor = vec4(1.0, 0.0, 1.0, 1.0);
+}

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

@@ -1,5 +1,42 @@
 #version 300 es
 
-void main() {
-    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+precision highp float;
+
+uniform vec2 u_screenSize;
+uniform vec2 u_position;
+uniform vec2 u_size;
+
+out vec2 v_texCoord;
+
+vec2 get_base_position(int id) {
+    if(id == 0) {
+        return vec2(-1.0f, -1.0f);
+    } else if(id == 1) {
+        return vec2(1.0f, -1.0f);
+    } else if(id == 2) {
+        return vec2(-1.0f, 1.0f);
+    } else if(id == 3) {
+        return vec2(1.0f, 1.0f);
+    } else {
+        return vec2(0.0f, 0.0f);
+    }
+}
+
+vec2 get_tex_position(int id) {
+    if(id == 0) {
+        return vec2(0.0f, 1.0f);
+    } else if(id == 1) {
+        return vec2(1.0f, 1.0f);
+    } else if(id == 2) {
+        return vec2(0.0f, 0.0f);
+    } else if(id == 3) {
+        return vec2(1.0f, 0.0f);
+    } else {
+        return vec2(0.0f, 0.0f);
+    }
+}
+
+void main() {
+    gl_Position = vec4((get_base_position(gl_VertexID) * u_size + u_position) / u_screenSize, 0.0f, 1.0f);
+    v_texCoord = get_tex_position(gl_VertexID);
 }