webgl 22.為正方體添加光照

下面來看一下光照
先來看一下光源的類型

light source.png

光源大體可分為 Directional light (平行光)，Point light (點光源)，Ambient light (環(huán)境光) 3 種。

Directional light

平行光的光線是平行的，像太陽光就是平行光。平行光可用光線的方向和顏色來描述私痹。

Point light

點光源從一個點向各個方向發(fā)出光線，像電燈泡就是點光源统刮。點光源用它的位置和顏色描述紊遵，點光源的方向跟照射到物體的位置有關(guān)，而平行光只有一個方向〗拿桑現(xiàn)實世界中光線是會衰弱的暗膜，離光源越近光線越強，這里為了簡單不考慮光線的衰弱鞭衩。

Ambient light

環(huán)境光是被其它物體反射的光学搜，環(huán)境光從各個方向照射到物體。環(huán)境光沒有方向论衍，只用光的顏色就可以描述瑞佩。

Diffuse Reflection (漫反射)

diffuse reflection.png

漫反射是點光源或平行光照射到物體上，然后光線向各個方向進行散射坯台。

Diffuse Reflection 的光照效果可用下面的公式計算

 <surface color by diffuse reflection>  = <light color>  ×  <base color of  surface>  × cosθ

即 <漫反射效果> = <光源顏色> × <物體表面顏色> × cosθ
注意這里是叉乘炬丸，向量的叉乘還是向量

Ambient Reflection (環(huán)境反射)

ambient reflection.png

環(huán)境反射中光線從各個方向射向物體然后再原路返回。

Ambient Reflection 的光照效果可用下面的公式計算

<surface color by ambient reflection>  =  <light color>  ×  <base color of  surface>

即 <環(huán)境反射效果> = <光源顏色> × <物體表面顏色>

漫反射和環(huán)境反射疊加在一起可用下面的公式計算

<漫反射 + 環(huán)境反射> = <漫反射效果> + <環(huán)境反射效果>

漫反射公式中的 θ 不大好計算蜒蕾，但物體表面的 Normal (法向量) 是已知的稠炬，通過法向量和光線方向可以很容易的計算出 cosθ

calc θ.png

注意這里是點乘，向量的點乘得到的是一個數(shù)字咪啡。

向量的點乘得到的是一個數(shù)首启，向量的叉乘得到的是向量。點乘和叉乘一定要搞清楚撤摸，不清楚的多查查資料毅桃。

一個面有 2 個方向相反的法向量，正方向根據(jù)頂點環(huán)繞方向根據(jù)右手定則判定准夷。

Normals.png

右手四指繞頂點順序環(huán)繞钥飞，大拇指的方向就是法向量的正方向

cosθ 計算出來以后漫反射就很好計算了，還是用上一節(jié)的正方體作為例子冕象。

cube normals.png

每個面添加法向量信息

  var vertices = new Float32Array([
      1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0,  // v0-v1-v2-v3 front
      1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0,  // v0-v3-v4-v5 right
      1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0,  // v0-v5-v6-v1 up
      -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0,  // v1-v6-v7-v2 left
      -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,  // v7-v4-v3-v2 down
      1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0   // v4-v7-v6-v5 back
  ]);

  var colors = new Float32Array([    // Colors
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
      1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back
  ]);

  var normals = new Float32Array([    // Normal
      0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
      1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
      0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
      -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
      0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down
      0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back
  ]);

<script id="vertex-shader" type="glsl">
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    attribute vec3 a_Normal;
    uniform vec3 u_LightColor;
    uniform vec3 u_LightDirection;
    uniform mat4 u_mvpMatrix;
    varying vec4 v_Color;

    void main() {
        gl_Position = u_mvpMatrix * a_Position;
        // 標(biāo)準化（把長度變?yōu)?1 ）
        vec3 normal = normalize(a_Normal);
       // 如果角度大于 90 度 說明物體表面背對光線將 cosθ 設(shè)為 0 
        float nDotL = max(dot(u_LightDirection, normal), 0.0);
        vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;
        v_Color = vec4(diffuse, a_Color.a);
    }
</script>

normalize 內(nèi)置函數(shù)代承，標(biāo)準化一個向量（長度變?yōu)?1）
dot 內(nèi)置函數(shù)汁蝶，計算向量的點乘

// 設(shè)置光源顏色
gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
// 設(shè)置光源方向
var lightDirection = new Vector3([0.5, 3.0, 4.0]);
lightDirection.normalize(); // 標(biāo)準化（長度變?yōu)?1）
gl.uniform3fv(u_LightDirection, lightDirection.elements);

lighted cube.png

完整代碼

<script id="vertex-shader" type="glsl">
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    attribute vec3 a_Normal;
    uniform vec3 u_LightColor;
    uniform vec3 u_LightDirection;
    uniform mat4 u_mvpMatrix;
    varying vec4 v_Color;

    void main() {
        gl_Position = u_mvpMatrix * a_Position;
        // 標(biāo)準化（把長度變?yōu)?1 ）
        vec3 normal = normalize(a_Normal);
        float nDotL = max(dot(u_LightDirection, normal), 0.0);
        vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;
        v_Color = vec4(diffuse, a_Color.a);
    }
</script>

<script id="fragment-shader" type="glsl">
    precision mediump float;
    varying vec4 v_Color;
    void main() {
       gl_FragColor = v_Color;
    }
</script>

<script src="lib/cuon-matrix.js"></script>
<script src="lib/myutils.js"></script>

<script>
    var VERTEX_SHADER_SOURCE = document.getElementById('vertex-shader').text;
    var FRAGMENT_SHADER_SOURCE = document.getElementById('fragment-shader').text;

    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext('webgl');

    if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {
        alert('Failed to init shaders');
    }

    var n = initVertexBuffers(gl);

    var u_mvpMatrix = gl.getUniformLocation(gl.program, 'u_mvpMatrix');
    var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');
    var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');

    // 設(shè)置光源顏色
    gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
    // 設(shè)置光源方向
    var lightDirection = new Vector3([0.5, 3.0, 4.0]);
    lightDirection.normalize(); // 標(biāo)準化（長度變?yōu)?1）
    gl.uniform3fv(u_LightDirection, lightDirection.elements);

    // <projection matrix> * <view matrix>
    var mvpMatrix = new Matrix4();
    mvpMatrix.setPerspective(30, 1, 1, 100);
    mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
    gl.uniformMatrix4fv(u_mvpMatrix, false, mvpMatrix.elements);

    gl.enable(gl.DEPTH_TEST);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);

    function initVertexBuffers(gl) {
        // Create a cube
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3

        var vertices = new Float32Array([
            1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0,  // v0-v1-v2-v3 front
            1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0,  // v0-v3-v4-v5 right
            1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0,  // v0-v5-v6-v1 up
            -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0,  // v1-v6-v7-v2 left
            -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,  // v7-v4-v3-v2 down
            1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0   // v4-v7-v6-v5 back
        ]);

        var colors = new Float32Array([    // Colors
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back
        ]);

        var normals = new Float32Array([    // Normal
            0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
            1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
            0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
            -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
            0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down
            0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back
        ]);

        var indices = new Uint8Array([       // Indices of the vertices
            0, 1, 2, 0, 2, 3,    // front
            4, 5, 6, 4, 6, 7,    // right
            8, 9, 10, 8, 10, 11,    // up
            12, 13, 14, 12, 14, 15,    // left
            16, 17, 18, 16, 18, 19,    // down
            20, 21, 22, 20, 22, 23     // back
        ]);

        if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) {
            return -1;
        }
        if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) {
            return -1;
        }
        if (!initArrayBuffer(gl, normals, 3, gl.FLOAT, 'a_Normal')) {
            return -1;
        }

        var indexBuffer = gl.createBuffer();
        if (!indexBuffer) {
            console.log('Failed to create index buffer');
            return -1;
        }
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

        return indices.length;
    }

    function initArrayBuffer(gl, data, numOfComponents, dataType, attributeName) {
        var buffer = gl.createBuffer();
        if (!buffer) {
            console.log('Failed to create buffer object');
            return false;
        }

        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

        var attribute = gl.getAttribLocation(gl.program, attributeName);
        gl.vertexAttribPointer(attribute, numOfComponents, dataType, false, 0, 0);
        gl.enableVertexAttribArray(attribute);

        return true;
    }
</script>

查看源碼

最后編輯于：2017.12.10 06:57:25

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末渐扮，一起剝皮案震驚了整個濱河市论悴，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌墓律，老刑警劉巖膀估，帶你破解...
沈念sama閱讀 218,451評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異耻讽，居然都是意外死亡察纯，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,172評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門针肥，熙熙樓的掌柜王于貴愁眉苦臉地迎上來饼记，“玉大人，你說我怎么就攤上這事慰枕【咴颍” “怎么了？”我有些...
開封第一講書人閱讀 164,782評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵具帮，是天一觀的道長博肋。經(jīng)常有香客問我，道長蜂厅，這世上最難降的妖魔是什么匪凡？我笑而不...
開封第一講書人閱讀 58,709評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮掘猿，結(jié)果婚禮上病游，老公的妹妹穿的比我還像新娘。我一直安慰自己稠通，他們只是感情好礁遵，可當(dāng)我...
茶點故事閱讀 67,733評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著采记，像睡著了一般佣耐。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上唧龄，一...
開封第一講書人閱讀 51,578評論 1贊 305
城市分裂傳說
那天兼砖，我揣著相機與錄音，去河邊找鬼既棺。笑死讽挟，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的丸冕。我是一名探鬼主播耽梅，決...
沈念sama閱讀 40,320評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼胖烛！你這毒婦竟也來了眼姐？” 一聲冷哼從身側(cè)響起诅迷，我...
開封第一講書人閱讀 39,241評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎众旗，沒想到半個月后罢杉，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,686評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡贡歧，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,878評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年滩租，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片利朵。...
茶點故事閱讀 39,992評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡律想，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出绍弟，到底是詐尸還是另有隱情蜘欲，我是刑警寧澤，帶...
沈念sama閱讀 35,715評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布晌柬，位于F島的核電站姥份，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏年碘。R本人自食惡果不足惜澈歉，卻給世界環(huán)境...
茶點故事閱讀 41,336評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望屿衅。院中可真熱鬧埃难，春花似錦、人聲如沸涤久。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,912評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽响迂。三九已至考抄，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間蔗彤，已是汗流浹背川梅。一陣腳步聲響...
開封第一講書人閱讀 33,040評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留然遏，地道東北人贫途。一個月前我還...
沈念sama閱讀 48,173評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像待侵，于是被迫代替她去往敵國和親丢早。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,947評論 2贊 355