From 8525508c11105da74d16cebeca08d528af285f66 Mon Sep 17 00:00:00 2001 From: Aitor Date: Mon, 18 Dec 2023 11:11:46 +0100 Subject: [PATCH] wip --- .../app/main/ui/workspace/viewport/gl.cljs | 31 ++++++++++----- frontend/src/app/util/gl.cljs | 32 +++++++++------ .../src/app/util/gl/shaders/default.f.glsl | 16 ++++++++ .../src/app/util/gl/shaders/default.v.glsl | 39 ++++++++++++++++++- 4 files changed, 95 insertions(+), 23 deletions(-) create mode 100644 frontend/src/app/util/gl/shaders/default.f.glsl diff --git a/frontend/src/app/main/ui/workspace/viewport/gl.cljs b/frontend/src/app/main/ui/workspace/viewport/gl.cljs index 8d85c629ee..93d81c130c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/gl.cljs +++ b/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) diff --git a/frontend/src/app/util/gl.cljs b/frontend/src/app/util/gl.cljs index 193c2637c9..d848950194 100644 --- a/frontend/src/app/util/gl.cljs +++ b/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" diff --git a/frontend/src/app/util/gl/shaders/default.f.glsl b/frontend/src/app/util/gl/shaders/default.f.glsl new file mode 100644 index 0000000000..7578853e51 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/frontend/src/app/util/gl/shaders/default.v.glsl b/frontend/src/app/util/gl/shaders/default.v.glsl index 2f3c9d39e5..97e8ac7053 100644 --- a/frontend/src/app/util/gl/shaders/default.v.glsl +++ b/frontend/src/app/util/gl/shaders/default.v.glsl @@ -1,5 +1,42 @@ #version 300 es +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(0.0, 0.0, 0.0, 1.0); + 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); } \ No newline at end of file