Giter VIP home page Giter VIP logo

ws-ldn-11's People

Contributors

postspectacular avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ws-ldn-11's Issues

Flat shading look

Hello,

I actually dig into your geom library and learn webgl on this way. So I'm a newbie at both fields. As you open sourced the results of your workshops, I played a little bit around and got some nice results. But what I can't get rid of, is the flat shaded look of the models. I tried different shaders but neither results in a smooth shading of the models. So I created a little test case to explain the problem.

In this scene I creaete a sphere and give it a color. I also set a light and a camera. The result of using the given lamber shader is this:

lamber shader

With the vertex lighting I got this:

vertex-lightning

And with fragment lighting this:

fragment-lightning

Could you explain to me, why the polygons are always flat shaded and how I could achieve a smooth look? Thank you very much in advance.

Following you find the listing of my example.

(ns webgl-lesson.core
    (:require [thi.ng.math.core :as m :refer [PI HALF_PI TWO_PI]]
                        [thi.ng.geom.gl.core :as gl]
                        [thi.ng.geom.gl.webgl.constants :as glc]
                        [thi.ng.geom.gl.webgl.animator :as anim]
                        [thi.ng.geom.gl.glmesh :as glm]
                        [thi.ng.geom.gl.camera :as cam]
                        [thi.ng.geom.gl.shaders :as sh]
                        [thi.ng.geom.gl.shaders.basic :as basic]
                        [thi.ng.geom.gl.shaders.lambert :as lambert]
                        [thi.ng.geom.core :as g]
                        [thi.ng.geom.vector :as v :refer [vec2 vec3]]
                        [thi.ng.geom.matrix :as mat :refer [M44]]
                        [thi.ng.geom.sphere :as s]
                        [thi.ng.geom.quad :as q]
                        [thi.ng.geom.attribs :as attr]
                        [thi.ng.color.core :as col]))

(enable-console-print!)

(def fragment-lighting-shader-spec
    {:vs       "void main() {
                                    vPosition = vec3(view * model * position);
                                    vNormal = vec3(view * model * vec4(normal, 0.0));
                  vColor = color;
                                    gl_Position = proj * view * model * position;
    }"
     :fs       "void main() {
                float distance = length(lightPos - vPosition);
                vec3 lightVector = normalize(lightPos - vPosition);

                float diffuse = max(dot(vNormal, lightVector), 0.0);

                diffuse = diffuse * (1.0 / ( 1.0 + (0.25 * distance * distance)));


                                vec4 fragmentColor = vec4(0.0, 1.0, 1.0, 1.0);
                                gl_FragColor = vColor * diffuse;
                            }"
     :uniforms {:model    [:mat4 M44]
                            :view     :mat4
                            :proj     :mat4
                            :lightPos :vec3}


     :attribs  {
                            :position :vec4
                            :normal   :vec3
                            :color    :vec4}



     :varying  {:vPosition :vec3
                            :vColor    :vec4
                            :vNormal   :vec3}
     :state    {:depth-test true}})

(def vertex-lighting-shader-spec
    {:vs       "void main() {
                                    vPosition = vec3(view * model * position);
                                    vNormal = vec3(view * model * vec4(normal, 0.0));

                                    float distance = length(lightPos - vPosition);

                                    vec3 lightVector = normalize(lightPos - vPosition);

                                    float diffuse = max(dot(vNormal, lightVector), 0.0);
                                    diffuse = diffuse * (1.0 / ( 1.0 + (0.25 * distance * distance)));

                                    vColor = color;
                                    gl_Position = proj * view * model * position;
                         }"
     :fs       "void main() {
                                gl_FragColor = vColor;
                            }"
     :uniforms {:model    [:mat4 M44]
                            :view     :mat4
                            :proj     :mat4
                            :lightPos :vec3}


     :attribs  {
                            :position :vec4
                            :normal   :vec3
                            :color    :vec4}



     :varying  {:vPosition :vec3
                            :vColor    :vec4
                            :vNormal   :vec3}
     :state    {:depth-test true}})


(defn main
    [& args]
    (let [gl (gl/gl-context "main")
                view-rect (gl/get-viewport-rect gl)
                lambert-shader (sh/make-shader-from-spec gl lambert/shader-spec-attrib)
                sphere (-> (s/sphere 1)
                                     (g/center)
                                     (g/as-mesh {:mesh    (glm/gl-mesh 4096 #{:col :fnorm})
                                                             :res     40
                                                             :attribs {:col (fn [_ _ v _] (col/rgba 0.5 0 0.5))}})
                                     (gl/as-gl-buffer-spec {})
                                     (cam/apply
                                         (cam/perspective-camera
                                             {:eye    (vec3 0 0 1.5)
                                                :fov    90
                                                :aspect view-rect}))
                                     (update :uniforms merge
                                                     {:lightPos (vec3 1.3 0 0)})
                                     ; (assoc :shader lambert-shader)
                                     (assoc :shader (sh/make-shader-from-spec gl fragment-lighting-shader-spec))
                                     ; (assoc :shader (sh/make-shader-from-spec gl vertex-lighting-shader-spec))
                                     (gl/make-buffers-in-spec gl glc/static-draw))]

        (anim/animate
            (fn [t frame]
                (doto gl
                    (gl/set-viewport view-rect)
                    (gl/clear-color-and-depth-buffer 0 0 0.05 1 1)
                    (gl/draw-with-shader
                        (assoc-in sphere [:uniforms :model]
                                            (-> M44 (g/rotate-x (m/radians 24.5)) (g/rotate-y 3))))))
            true)))


(main)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.