Render heightmap to layer

data/layout.xml

@@ -167,7 +167,7 @@
             <node height="20" justify="center"><text text="Sat" font-face="arial" font-size="11"/></node>
             <node height="20" justify="center"><text text="Val" font-face="arial" font-size="11"/></node>
           </node>
-          <border dir="col" align="center" grow="1" width="1" flood-events="1">
+          <node dir="col" align="center" grow="1" width="1" flood-events="1">
             <node height="30" pad="1" width="100%" dir="row">
               <combobox id="blend-mode" text="Normal" width="100%" height="30" combo-list="Normal,-,Multiply,Screen,-,Color Dodge,Overlay" default="0"/>
             </node>
@@ -218,7 +218,7 @@
                 <checkbox id="tip-val-pressure"></checkbox>
               </node>
             </node>
-          </border>
+          </node>
         </node>
         
         <border color=".2" height="20" justify="center" align="center"><text text="Jitter Settings" font-face="arial" font-size="11"/></border>
@@ -232,7 +232,7 @@
             <node height="20" justify="center"><text text="Sat" font-face="arial" font-size="11"/></node>
             <node height="20" justify="center"><text text="Val" font-face="arial" font-size="11"/></node>
           </node>
-          <border dir="col" align="center" grow="1" width="1">
+          <node dir="col" align="center" grow="1" width="1">
             <node height="20" pad="1" width="100%"><slider-h id="jitter-scale"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="jitter-angle"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="jitter-spread"/></node>
@@ -240,7 +240,7 @@
             <node height="20" pad="1" width="100%"><slider-h id="jitter-hue"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="jitter-sat"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="jitter-val"/></node>
-          </border>
+          </node>
         </node>
         
       </border>
@@ -262,44 +262,45 @@
             <node height="20" justify="center"><text text="Resolution" font-face="arial" font-size="11"/></node>
             <node height="20" justify="center"><text text="Offset" font-face="arial" font-size="11"/></node>
           </node>
-          <border dir="col" align="center" grow="1" width="1" flood-events="1">
+          <node dir="col" align="center" grow="1" width="1" flood-events="1">
             <node height="20" pad="1" width="100%"><slider-h id="grid-ground-opacity"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="grid-ground-value" value="0.0"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="grid-ground-resolution" value="0.2"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="grid-ground-offset" value="0.25"/></node>
-          </border>
+          </node>
         </node>
-        <node height="10"/>
+        <node height="5"/>
         <border color=".2" height="20" justify="center" align="center"><text text="Heightmap" font-face="arial" font-size="11"/></border>
         <border color="1" align="center" pad="5" margin="0 0 5 0">
           <image-texture id="grid-heightmap-preview" width="100%" grow="1" height="100" aspect-ratio="1"/>
         </border>
         <node dir="row">
           <node width="40%" dir="col">
-            <node height="20" justify="center"><text text="File" font-face="arial" font-size="11"/></node>
+            <node height="30" justify="center"><text text="File" font-face="arial" font-size="11"/></node>
-            <node height="30" justify="center"><text text="Shading" font-face="arial" font-size="11"/></node>
+            <node height="30" justify="center" margin="5 0 0 0"><text text="Shading" font-face="arial" font-size="11"/></node>
-            <node height="20" justify="center"><text text="Wireframe" font-face="arial" font-size="11"/></node>
+            <node height="20" justify="center" margin="5 0 0 0"><text text="Wireframe" font-face="arial" font-size="11"/></node>
             <node height="20" justify="center"><text text="Height" font-face="arial" font-size="11"/></node>
             <node height="20" justify="center"><text text="L-Yaw" font-face="arial" font-size="11"/></node>
             <node height="20" justify="center"><text text="L-Pitch" font-face="arial" font-size="11"/></node>
           </node>
-          <border dir="col" align="center" grow="1" width="1" flood-events="1">
+          <node dir="col" align="center" grow="1" width="1" flood-events="1" color=".3" >
-            <node height="20" pad="1" width="100%" dir="row">
+            <node height="30" width="100%" dir="row" pad="0 1 0 1">
-              <node width="20" grow="1" pad="0" margin="0 0 0 2" dir="row">
+              <node width="20" grow="1" pad="0" dir="row">
-                <button id="grid-heightmap-load" text="..." width="20" height="20"></button>
+                <button id="grid-heightmap-load" text="..." width="20" height="30" margin="0 2 0 0"></button>
-                <button id="grid-heightmap-clear" text="Clear" width="50" height="20"></button>
+                <button id="grid-heightmap-clear" text="Clear" width="45" height="30" margin="0 2 0 0"></button>
-                <button id="grid-heightmap-reload" text="Reload" width="50" height="20"></button>
+                <button id="grid-heightmap-reload" text="Reload" width="55" height="30"></button>
               </node>
             </node>
-            <node height="30" pad="1" width="100%" dir="row">
+            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
               <combobox id="grid-heightmap-shading" width="100%" height="30" combo-list="Transparent,Flat,Solid" default="0"/>
             </node>
-            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-wireframe" value="1.0"/></node>
+            <node height="20" pad="1" width="100%" margin="5 0 0 0"><slider-h id="grid-heightmap-wireframe" value="1.0"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-height" value="0.25"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-lyaw" value="0.5"/></node>
             <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-lpitch" value="0.5"/></node>
-          </border>
+          </node>
         </node>
+        <button id="grid-render" text="Render" height="30" margin="5 0 0 0"/>
       
     </border>
     </node>
@@ -1042,7 +1043,7 @@ Here's a list of what's available in this release.
         <button-custom id="menu-about" width="60" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
           <text text="About" font-face="arial" font-size="11"/>
         </button-custom>
-        <button id="btn-anim" width="70" height="100%" margin="1 0 0 10" text="Animate"/>
+        <!--<button id="btn-anim" width="70" height="100%" margin="1 0 0 10" text="Animate"/>-->
         <node dir="row" justify="center" grow="1">
           <button-custom id="btn-pen" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
             <image path="data/ui/pen.png" width="100%" height="100%" align="center" justify="flex-end"/>
@@ -1097,9 +1098,7 @@ Here's a list of what's available in this release.
           <button-custom id="btn-stroke" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
             <image path="data/ui/stroke.png" width="100%" height="100%" align="center" justify="flex-end"/>
           </button-custom>
-          <!--
           <button id="btn-brush-preset" width="50" height="50" margin="0 0 5 0" text="Preset" thickness="1" border-color=".1" pad="2"/>
-          -->
           <button-custom id="btn-brush" width="50" height="50" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
             <image path="data/ui/brushes.png" width="100%" height="100%" align="center" justify="flex-end"/>
           </button-custom>
@@ -1123,7 +1122,7 @@ Here's a list of what's available in this release.
             <!--Brushes-->
             <!--<panel-brush id="panel-brush"/>-->
             <!--Layers-->
-            <panel-layer id="panel-layer"/>
+            <!--<panel-layer id="panel-layer"/>-->
             <!--Colors-->
             <!--<panel-color id="panel-color"/>-->
             <!--Grids-->

src/canvas.cpp

@@ -2190,17 +2190,27 @@ void Canvas::draw_objects(std::function<void(const glm::mat4& camera, const glm:
     glViewport(0, 0, layer.w, layer.h);
     glDisable(GL_BLEND);
 
-    glm::mat4 proj = glm::perspective(glm::radians(90.f), 1.f, .1f, 1000.f);
+    GLuint rboID;
+    glGenRenderbuffers(1, &rboID);
+    glBindRenderbuffer(GL_RENDERBUFFER, rboID);
+    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT, layer.w, layer.h);
+    glBindRenderbuffer(GL_RENDERBUFFER, 0);
+
+    glm::mat4 proj = glm::perspective(glm::radians(90.f), 1.f, .01f, 1000.f);
     for (int i = 0; i < 6; i++)
     {
         glm::mat4 plane_camera = glm::lookAt(glm::vec3(0), m_plane_origin[i], m_plane_tangent[i]);
         layer.m_rtt[i].bindFramebuffer();
+        glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, rboID);
 
         observer(plane_camera, proj, i);
 
+        glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, 0);
         layer.m_rtt[i].unbindFramebuffer();
     }
 
+    glDeleteRenderbuffers(1, &rboID);
+
     // restore viewport and clear color states
     blend ? glEnable(GL_BLEND) : glDisable(GL_BLEND);
     glViewport(vp[0], vp[1], vp[2], vp[3]);

src/image.cpp

@@ -25,6 +25,8 @@ bool Image::load_file(std::string filename)
 {
     stbi_set_flip_vertically_on_load(false);
     uint8_t* buffer = stbi_load(filename.c_str(), &width, &height, nullptr, 4);
+    if (!buffer)
+        return false;
     comp = 4;
     m_data = std::unique_ptr<uint8_t[]>(buffer);
     return true;

src/node_canvas.cpp

@@ -304,90 +304,7 @@ void NodeCanvas::draw()
         for (auto& mode : Canvas::modes[(int)Canvas::kCanvasMode::Grid])
             mode->on_Draw(ortho_proj, proj, camera);
 
-
+    App::I.grid->draw_heightmap(proj, camera);
-    if (App::I.grid->m_groud_opacity->get_value() > 0.f)
-    {
-        glEnable(GL_DEPTH_TEST);
-        glClear(GL_DEPTH_BUFFER_BIT);
-        bool blend = glIsEnabled(GL_BLEND);
-
-        auto mvp = proj * camera
-            * glm::translate(glm::vec3(0, glm::pow(App::I.grid->m_groud_offset->get_value() - 0.5f, 3), 0))
-            * glm::scale(glm::vec3(1, glm::pow(App::I.grid->m_hm_height->get_value() - 0.5f, 3.f) * 10.f, 1))
-            * glm::eulerAngleX(glm::radians(90.f));
-
-        // DRAW SOLID
-        if (App::I.grid->m_shade_mode == NodePanelGrid::ShadeMode::Solid)
-        {
-            glDisable(GL_BLEND);
-            ShaderManager::use(kShader::Lambert);
-            ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
-            auto light_yaw = App::I.grid->m_hm_lyaw->get_value() * glm::pi<float>() * 2.f;
-            auto light_pitch = App::I.grid->m_hm_lpitch->get_value();
-            auto light_pos = glm::vec3(sinf(light_yaw), cosf(light_yaw), light_pitch);
-            ShaderManager::u_vec3(kShaderUniform::LightDir, glm::normalize(-light_pos));
-            App::I.grid->m_hm_plane.draw_fill();
-        }
-        else if (App::I.grid->m_shade_mode == NodePanelGrid::ShadeMode::Flat)
-        {
-            ShaderManager::use(kShader::Color);
-            ShaderManager::u_vec4(kShaderUniform::Col, glm::vec4(
-                glm::vec3(1.f - App::I.grid->m_groud_value->get_value()),
-                App::I.grid->m_groud_opacity->get_value()
-            ));
-            ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
-            App::I.grid->m_hm_plane.draw_fill();
-        }
-
-        // DRAW GRIDS
-        if (App::I.grid->m_hm_wireframe->get_value() > 0.f)
-        {
-            glEnable(GL_BLEND);
-            ShaderManager::use(kShader::Color);
-            ShaderManager::u_vec4(kShaderUniform::Col, glm::vec4(
-                glm::vec3(App::I.grid->m_groud_value->get_value()),
-                App::I.grid->m_groud_opacity->get_value() * 
-                App::I.grid->m_hm_wireframe->get_value()
-            ));
-            ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
-            if (App::I.grid->m_shade_mode == NodePanelGrid::ShadeMode::Transparent)
-            {
-                glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);
-                App::I.grid->m_hm_plane.draw_fill();
-                glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE);
-            }
-            App::I.grid->m_hm_plane.draw_stroke();
-        }
-
-        blend ? glEnable(GL_BLEND) : glDisable(GL_BLEND);
-    }
-
-    // box grid
-    // ceiling
-//     ShaderManager::u_vec4(kShaderUniform::Col, glm::vec4(
-//         glm::vec3(App::I.grid->m_groud_value->get_value()),
-//         App::I.grid->m_box_opacity->get_value()));
-//     ShaderManager::u_mat4(kShaderUniform::MVP, proj * camera
-//         * glm::translate(glm::vec3(0, (App::I.grid->m_groud_height->get_value() + App::I.grid->m_box_height->get_value() - 0.5f) * 2.f, 0))
-//         * glm::eulerAngleX(glm::radians(90.f))
-//         * glm::scale(glm::vec3(grid_scale, grid_scale, 1))
-//     );
-//     m_grid.draw_stroke();
-
-
-    //ShaderManager::use(kShader::Equirect);
-    //ShaderManager::u_mat4(kShaderUniform::MVP, glm::scale(glm::vec3(.5, .5, 1)));
-    //ShaderManager::u_int(kShaderUniform::Tex, 0);
-    //glBindTexture(GL_TEXTURE_CUBE_MAP, m_canvas->cube_id);
-    //m_face_plane.draw_fill();
-    //glBindTexture(GL_TEXTURE_CUBE_MAP, 0);
-
-//         ShaderManager::use(kShader::Color);
-//         ShaderManager::u_mat4(kShaderUniform::MVP, proj * camera);
-//         ShaderManager::u_vec4(kShaderUniform::Col, { 1, 0, 0, 1 });
-//         static glm::vec4 AB[4]{ {-.75, 0, -1, 1},{ -.75, 0, 1, 1 } };
-//         m_line.update_vertices(AB);
-//         m_line.draw_stroke();
 
     blend ? glEnable(GL_BLEND) : glDisable(GL_BLEND);
     depth ? glEnable(GL_DEPTH_TEST) : glDisable(GL_DEPTH_TEST);

src/node_checkbox.cpp

@@ -108,6 +108,8 @@ void NodeCheckBox::set_icon(const std::string& icon_path)
 
 void NodeCheckBox::update_icon()
 {
+    if (m_icon_path.empty())
+        return;
     auto& t = TextureManager::get(const_hash(m_icon_path.c_str()));
     if (!m_icon)
         m_icon = m_inner->add_child<NodeImage>();

src/node_panel_grid.cpp

@@ -38,19 +38,26 @@ void NodePanelGrid::init_controls()
     m_hm_lyaw = find<NodeSliderH>("grid-heightmap-lyaw");
     m_hm_lpitch = find<NodeSliderH>("grid-heightmap-lpitch");
     m_hm_shading = find<NodeComboBox>("grid-heightmap-shading");
+    m_render = find<NodeButton>("grid-render");
 
     m_hm_preview->SetHeight(0);
     m_hm_plane.create(1, 1, 100);
 
     //m_hm_height->on_value_changed = update_hm;
-    m_groud_resolution->on_value_changed = [this](Node* target, float v) {
+    m_groud_resolution->on_value_final = [this](Node* target, float v) {
         if (m_hm_image.data())
-            m_hm_plane.create(1, 1, m_hm_image, v * 5.f);
+            m_hm_plane.create(1, 1, m_hm_image, v * 5.f, get_height());
         else
             m_hm_plane.create(1, 1, 100 * v * 5.f);
         LOG("resolution value %f", v);
     };
 
+    m_hm_height->on_value_final = [this](Node* target, float v) {
+        if (m_hm_image.data())
+            m_hm_plane.create(1, 1, m_hm_image, m_groud_resolution->get_value() * 5.f, get_height());
+        LOG("height value %f", v);
+    };
+
     m_hm_shading->on_select = [this](Node*, int index) {
         m_shade_mode = (ShadeMode)index;
     };
@@ -67,7 +74,8 @@ void NodePanelGrid::init_controls()
                 m_hm_preview->tex.create_mipmaps();
                 auto sz = m_hm_preview->tex.size();
                 m_hm_preview->SetAspectRatio(sz.x / sz.y);
-                m_hm_plane.create(1, 1, m_hm_image, m_groud_resolution->get_value() * 5.f);
+                m_hm_plane.create(1, 1, m_hm_image, 
+                    m_groud_resolution->get_value() * 5.f, get_height());
                 m_hm_preview->SetHeight(100);
                 if (m_groud_opacity->get_value() == 0.f)
                     m_groud_opacity->set_value(1.f);
@@ -95,8 +103,91 @@ void NodePanelGrid::init_controls()
             m_hm_preview->tex.create_mipmaps();
             auto sz = m_hm_preview->tex.size();
             m_hm_preview->SetAspectRatio(sz.x / sz.y);
-            m_hm_plane.create(1, 1, m_hm_image, m_groud_resolution->get_value() * 5.f);
+            m_hm_plane.create(1, 1, m_hm_image, 
+                m_groud_resolution->get_value() * 5.f, m_hm_height->get_value());
             m_hm_preview->SetHeight(100);
         }
     };
+
+    m_render->on_click = [this](Node*)
+    {
+        gl_state gl;
+        gl.save();
+        Canvas::I->draw_objects([this](const glm::mat4& camera, const glm::mat4& proj, int i) {
+            draw_heightmap(proj, camera);
+        });
+        gl.restore();
+    };
+}
+
+float NodePanelGrid::get_height() const
+{
+    return glm::pow(m_hm_height->get_value() - 0.5f, 3.f) * 10.f;
+}
+
+float NodePanelGrid::get_offset() const
+{
+    return glm::pow(m_groud_offset->get_value() - 0.5f, 3);
+}
+
+void NodePanelGrid::draw_heightmap(const glm::mat4& proj, const glm::mat4& camera) const
+{
+    if (m_groud_opacity->get_value() > 0.f)
+    {
+        glEnable(GL_BLEND);
+        glEnable(GL_DEPTH_TEST);
+        glClear(GL_DEPTH_BUFFER_BIT);
+
+        auto mvp = proj * camera
+            * glm::translate(glm::vec3(0, get_offset(), 0))
+            * glm::scale(glm::vec3(1, get_height(), 1))
+            * glm::eulerAngleX(glm::radians(90.f));
+
+        // DRAW SOLID
+        if (m_hm_image.m_data)
+        {
+            if (m_shade_mode == ShadeMode::Solid)
+            {
+                glDisable(GL_BLEND);
+                ShaderManager::use(kShader::Lambert);
+                ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+                auto light_yaw = m_hm_lyaw->get_value() * glm::pi<float>() * 2.f;
+                auto light_pitch = m_hm_lpitch->get_value();
+                auto light_pos = glm::vec3(sinf(light_yaw), cosf(light_yaw), light_pitch);
+                ShaderManager::u_vec3(kShaderUniform::LightDir, glm::normalize(-light_pos));
+                m_hm_plane.draw_fill();
+            }
+            else if (m_shade_mode == ShadeMode::Flat)
+            {
+                ShaderManager::use(kShader::Color);
+                ShaderManager::u_vec4(kShaderUniform::Col, glm::vec4(
+                    glm::vec3(1.f - m_groud_value->get_value()),
+                    m_groud_opacity->get_value()
+                ));
+                ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+                m_hm_plane.draw_fill();
+            }
+        }
+
+        // DRAW GRIDS
+        auto wire_alpha = m_hm_image.m_data ? m_hm_wireframe->get_value() : 1.f;
+        if (wire_alpha > 0.f)
+        {
+            glEnable(GL_BLEND);
+            ShaderManager::use(kShader::Color);
+            ShaderManager::u_vec4(kShaderUniform::Col, glm::vec4(
+                glm::vec3(m_groud_value->get_value()),
+                m_groud_opacity->get_value() *
+                wire_alpha
+            ));
+            ShaderManager::u_mat4(kShaderUniform::MVP, mvp);
+            if (m_hm_image.m_data && m_shade_mode == ShadeMode::Transparent)
+            {
+                glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);
+                m_hm_plane.draw_fill();
+                glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE);
+            }
+            m_hm_plane.draw_stroke();
+        }
+    }
 }

src/node_panel_grid.h

@@ -28,6 +28,7 @@ public:
     NodeSliderH* m_hm_wireframe;
     NodeSliderH* m_hm_lyaw;
     NodeSliderH* m_hm_lpitch;
+    NodeButton* m_render;
     HeightmapPlane m_hm_plane;
     Image m_hm_image;
     std::string m_file_path;
@@ -37,4 +38,7 @@ public:
     virtual void clone_finalize(Node* dest) const override;
     virtual void init() override;
     void init_controls();
+    float get_height() const;
+    float get_offset() const;
+    void draw_heightmap(const glm::mat4& proj, const glm::mat4& camera) const;
 };

src/node_slider.cpp

@@ -83,6 +83,8 @@ kEventResult NodeSliderH::handle_event(Event* e)
         break;
     case kEventType::MouseUpL:
         mouse_release();
+        if (dragging && on_value_final)
+            on_value_final(this, glm::length(m_value * m_mask));
         dragging = false;
         break;
     case kEventType::MouseMove:

src/node_slider.h

@@ -9,6 +9,7 @@ public:
     glm::vec2 m_value{0};
     glm::vec2 m_old_value;
     std::function<void(Node* target, float value)> on_value_changed;
+    std::function<void(Node* target, float value)> on_value_final;
     virtual Node* clone_instantiate() const override;
     virtual void clone_copy(Node* dest) const override;
     virtual void init() override;

src/shape.cpp

@@ -241,7 +241,7 @@ void Plane::create_impl(float w, float h, int div, GLushort *idx, vertex_t *vert
     }
 }
 
-bool HeightmapPlane::create(float w, float h, const Image& img, float scale)
+bool HeightmapPlane::create(float w, float h, const Image& img, float scale, float height)
 {
     Image img_tmp;
     glm::u8vec4* px = (glm::u8vec4*)img.data();
@@ -286,6 +286,7 @@ bool HeightmapPlane::create(float w, float h, const Image& img, float scale)
     }
 
     // generate indices
+    const glm::vec3 yscale(1, 1, height);
     for (int y = 0; y < div; y++)
     {
         int i = y * (div + 1);
@@ -297,8 +298,8 @@ bool HeightmapPlane::create(float w, float h, const Image& img, float scale)
             *pi++ = i;
             *pi++ = i + div + 2;
             *pi++ = i + 1;
-            auto n = glm::triangleNormal(xyz(vertices[i].pos), 
+            auto n = glm::triangleNormal(xyz(vertices[i].pos) * yscale,
-                xyz(vertices[i + div + 1].pos), xyz(vertices[i + 1].pos));
+                xyz(vertices[i + div + 1].pos) * yscale, xyz(vertices[i + 1].pos) * yscale);
             vertices[i].nor += n;
             vertices[i + 1].nor += n;
             vertices[i + div + 1].nor += n;

src/shape.h

@@ -125,7 +125,7 @@ public:
 class HeightmapPlane : public Shape
 {
 public:
-    bool create(float w, float h, const Image& img, float scale);
+    bool create(float w, float h, const Image& img, float scale, float height);
     bool create(float w, float h, int div);
 };