WebGL之旅（十三）平行光和漫反射

/**

* 同色立方體
* [email protected]
* */
var gl_srcvs =
`attribute vec4 a_position;
attribute vec4 a_color;
uniform mat4 u_mvpmatrix;
varying vec4 v_color;
void main()`;
var gl_srcfs =
`precision lowp float;
varying vec4 v_color;
void main()`;
function
main()
function
getgl()
function
initshader
(gl, srcvs, srcfs)
function
createprogram
(gl, srcvs, srcfs)
return sp;
}function
loadshader
(gl, type, shadersrc)
return shader;
}function
initvertexbuffers
(gl, sp)
function
draw
(gl, n)

* 平行光下(directional light)的漫反射(diffuse reflection)

* [email protected]

* */

var gl_srcvs =

`attribute vec4 a_position;

attribute vec4 a_color;

attribute vec4 a_normal;// 頂點法向量

uniform mat4 u_mvpmatrix;

uniform vec3 u_lightcolor;// 入射光顏色

uniform vec3 u_lightdir;// 入射光方向

varying vec4 v_color;

void main()`;

var gl_srcfs =

`precision lowp float;

varying vec4 v_color;

void main()`;

function

main()

function

getgl()

function

initshader

(gl, srcvs, srcfs)

function

createprogram

(gl, srcvs, srcfs)

return sp;

}function

loadshader

(gl, type, shadersrc)

return shader;

}function

initvertexbuffers

(gl, sp)

function

initarraybuffer

(gl, sp, data, num, type, attribute)

function

draw

(gl, n)

如圖，加入光照之後的立方體就很清晰了，每個表面都程式出了不同的明暗程度。

修改上面的**，加入環境光。

var gl_srcvs =

`attribute vec4 a_position;
attribute vec4 a_color;
attribute vec4 a_normal;// 頂點法向量
uniform mat4 u_mvpmatrix;
uniform vec3 u_lightcolor;// 入射光顏色
uniform vec3 u_lightdir;// 入射光方向
uniform vec3 u_lightcolorambient;// 環境光顏色
varying vec4 v_color;
void main()`;
function
main()

webgl之旅:

WebGL 平行光和環境光

馮氏反射模型引申了這個四步走的光照系統，首先所有的光線都有以下兩個屬性 發生漫反射光的rgb值。發生鏡面反射光的rgb值。其次所有材質都有以下四個屬性 反射的環境光rgb值 反射的漫反射光rgb值 反射的鏡面反射光rgb值 物體的反光度，它決定了鏡面反射的細節 對於場景中的每一點，它的顏色都是由照射...

WebGL之旅（四）簡單變換

變換又叫仿射變換，包括平移，縮放，旋轉。首先，我們繪製乙個三角形，後續將對其進行變換，變換前 xu.lidong qq.com 頂點著色器原始碼 var vertexshadersrc attribute vec4 a position 接收傳入位置座標，必須宣告為全域性 void main 片段著...

WebGL之旅（十六） 層級模型

在變換時，父節點的變換會待著子節點一起，而子節點的變換則不會影響父節點。例如手臂的運動會帶動手肘的運動，而手肘的運動不影響手臂的運動。即 示例，如下兩個立方體柱子，下面的為父節點，上面的未子節點。層次模型 xu.lidong qq.com g radparent 0.0 g radchild 0.0...