thi-ng / ws-ldn-11 Goto Github PK
View Code? Open in Web Editor NEWHigh Performance ClojureScript - WebGL, WebRTC, Web workers & asm.js
Home Page: http://workshop.thi.ng
License: Apache License 2.0
High Performance ClojureScript - WebGL, WebRTC, Web workers & asm.js
Home Page: http://workshop.thi.ng
License: Apache License 2.0
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:
With the vertex lighting I got this:
And with fragment lighting this:
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.