WebGL切換著色器繪製不同物體

1、為何切換著色器

WebGL繪製不同的物體需要使用不同的著色器，每個著色器中可能有非常負責的邏輯以實現各種不同的效果。我們可以準備多個著色器，然後根據需要來切換使用它們。
2、如何實現切換著色器

為了切換著色器，首先建立多個著色器程式物件，然後在繪製之前選擇使用的程式物件（使用gl.useProgram()函式來進行切換）。
下面是本次例項程式(例項程式繪製了兩個立方體：一個單色立方體，一個紋理立方體)的流程步驟：
1. 準備繪製單色立方體的著色器。
2. 準備繪製紋理立方體的著色器。
3. 呼叫createProgram()函式，利用第1步創建出的著色器，建立單色立方體著色器程式物件
。
4. 呼叫createProgram()函式，利用第2步創建出的著色器，建立紋理立方體著色器程式物件。
5. 呼叫gl.useProgram()函式，指定使用第3步建立的繪製單色立方體的著色器程式物件。
6. 通過緩衝區物件向著色器中傳入attribute變數並開啟。
7. 繪製單色立方體。
8. 呼叫gl.useProgram()函式，指定使用第4步建立的繪製紋理立方體的著色器程式物件。
9. 通過緩衝區物件向著色器傳入attribute變數並開啟。
10. 繪製紋理立方體。
3、例項程式

效果圖：在這裡插入圖片描述
例項程式碼：

<!DOCTYPE html> 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>切換著色器-繪製不同立方體< 
/title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
    Please use the browser supporting "canvas"
</canvas>

<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<script>
    // canvas全屏
    var canvas = document.getElementById('webgl');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 頂點著色器 繪製單色立方體
    var SOLID_VSHADER_SOURCE =
        "attribute vec4 a_Position;\n" +
        "attribute vec4 a_Normal;\n" + // 法向量
        "uniform mat4 u_MvpMatrix;\n" +
        "uniform mat4 u_NormalMatrix;\n" +
        "varying vec4 v_Color;\n" +
        "void main(){\n" +
        "   vec3 lightDirection = vec3(0.0,0.0, 1.0);\n" +//設定燈光的座標位置（世界座標下）
        "   vec4 color = vec4(0.0, 1.0, 1.0, 1.0);\n" + //設定立方體的顏色
        "   gl_Position = u_MvpMatrix * a_Position;\n" +
        "   vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n" +
        "   float nDotL = max(dot(normal, lightDirection), 0.0);\n" +
        "   v_Color = vec4(color.rgb * nDotL, color.a);\n" +
        "}\n";

    // 片元著色器 繪製單色立方體
    var SOLID_FSHADER_SOURCE =
        "#ifdef GL_ES\n" +
        "precision mediump float;\n" +
        "#endif\n" +
        "varying vec4 v_Color;\n" +
        "void main(){\n" +
        "   gl_FragColor = v_Color;\n" +
        "}\n";

    // 頂點著色器 繪製紋理立方體
    var TEXTURE_VSHADER_SOURCE =
        "attribute vec4 a_Position;\n" +
        "attribute vec4 a_Normal;\n" +
        "attribute vec2 a_TexCoord;\n" +
        "uniform mat4 u_MvpMatrix;\n" +
        "uniform mat4 u_NormalMatrix;\n" +
        "varying float v_NdotL;\n" +
        "varying vec2 v_TexCoord;\n" +
        "void main(){\n" +
        "   vec3 lightDirection = vec3(0.0, 0.0, 1.0);\n" +
        "   gl_Position = u_MvpMatrix * a_Position;\n" +
        "   vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n" +
        "   v_NdotL = max(dot(normal, lightDirection), 0.0);\n" +
        "   v_TexCoord = a_TexCoord;\n" +
        "}\n";

    // 片元著色器 繪製紋理立方體
    var TEXTURE_FSHADER_SOURCE =
        "#ifdef GL_ES\n" +
        "precision mediump float;\n" +
        "#endif\n" +
        "uniform sampler2D u_Sampler;\n" +
        "varying vec2 v_TexCoord;\n" +
        "varying float v_NdotL;\n" +
        "void main(){\n" +
        "   vec4 color = texture2D(u_Sampler, v_TexCoord);\n" +
        "   gl_FragColor = vec4(color.rgb * v_NdotL, color.a);\n" +
        "}\n";

    // 主函式
    function main() {
        // 獲取WebGL繪圖上下文
        var gl = getWebGLContext(canvas);
        if(!gl) {
            console.log('獲取WebGL上下文失敗');
            return;
        }

        // 初始化兩個程式著色器
        var solidProgram = createProgram(gl,SOLID_VSHADER_SOURCE, SOLID_FSHADER_SOURCE); // 純色立方體
        var textureProgram = createProgram(gl,TEXTURE_VSHADER_SOURCE,TEXTURE_FSHADER_SOURCE); // 紋理立方體
        if(!solidProgram || !textureProgram) {
            console.log('建立程式物件失敗');
            return;
        }

        // 獲取繪製單色立方體著色器的變數位置
        solidProgram.a_Position = gl.getAttribLocation(solidProgram, "a_Position");
        solidProgram.a_Normal = gl.getAttribLocation(solidProgram, "a_Normal");
        solidProgram.u_MvpMatrix = gl.getUniformLocation(solidProgram, "u_MvpMatrix");
        solidProgram.u_NormalMatrix = gl.getUniformLocation(solidProgram, "u_NormalMatrix");
        if(solidProgram.a_Position < 0 || solidProgram.a_Normal < 0 || !solidProgram.u_MvpMatrix || !solidProgram.u_NormalMatrix) {
            console.log('獲取單色立方體相關變數儲存位置失敗');
            return;
        }

        // 獲取繪製紋理立方體著色器的變數位置
        textureProgram.a_Position = gl.getAttribLocation(textureProgram, "a_Position");
        textureProgram.a_Normal = gl.getAttribLocation(textureProgram, "a_Normal");
        textureProgram.a_TexCoord = gl.getAttribLocation(textureProgram, "a_TexCoord");
        textureProgram.u_MvpMatrix = gl.getUniformLocation(textureProgram, "u_MvpMatrix");
        textureProgram.u_NormalMatrix = gl.getUniformLocation(textureProgram, "u_NormalMatrix");
        textureProgram.u_Sampler = gl.getUniformLocation(textureProgram, "u_Sampler");

        if(textureProgram.a_Position < 0 || textureProgram.a_Normal < 0 || textureProgram.a_TexCoord < 0 || !textureProgram.u_MvpMatrix || !textureProgram.u_NormalMatrix || !textureProgram.u_Sampler) {
            console.log('獲取紋理立方體相關變數儲存位置失敗');
            return;
        }

        // 設定單色立方體頂點資訊 存入緩衝區
        var cube = initVertexBuffers(gl);

        // 設定紋理立方體的紋理資料 存入緩衝區
        var texture = initTextures(gl, textureProgram);
        if(!texture) {
            console.log('無法獲取到紋理');
            return;
        }

        //開啟隱藏面消除功能，並設定背景色
        gl.enable(gl.DEPTH_TEST);
        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        // 計算檢視投影矩陣
        var viewProjectMatrix = new Matrix4();
        viewProjectMatrix.setPerspective(30.0, canvas.width / canvas.height, 1.0, 100.0);
        viewProjectMatrix.lookAt(0.0, 0.0, 15.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

        // 開始繪製立方體
        var currentAngle = 0.0; // 當前立方體的角度

        //設定一個定時繪製的函式
        var tick = function() {   // Start drawing
            currentAngle = animate(currentAngle); // 更新角度

            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            // 繪製單色立方體
            drawSolidCube(gl, solidProgram, cube, -2.0, currentAngle, viewProjectMatrix);
            // 繪製紋理立方體
            drawTexCube(gl, textureProgram, cube, texture, 2.0, currentAngle, viewProjectMatrix);

            requestAnimationFrame(tick);
        };
        tick();
    }

    function drawTexCube(gl, program, obj, texture, x, angle, viewProjectMatrix) {
        gl.useProgram(program);

        // 分配快取物件並開啟賦值
        initAttributeVariable(gl, program.a_Position, obj.vertexBuffer); //頂點座標
        initAttributeVariable(gl, program.a_Normal, obj.normalBuffer); //法向量
        initAttributeVariable(gl, program.a_TexCoord, obj.texCoordBuffer); //紋理座標
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indexBuffer);

        //設定好紋理物件，開啟使用0號的紋理
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);

        //繪製立方體
        drawCube(gl, program, obj, x, angle, viewProjectMatrix)
    }

    function drawSolidCube(gl, program, obj, x, angle, viewProjectMatrix) {
        gl.useProgram(program);

        //分配緩衝區物件並啟用賦值
        initAttributeVariable(gl, program.a_Position, obj.vertexBuffer); //頂點座標
        initAttributeVariable(gl, program.a_Normal, obj.normalBuffer); //法向量
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indexBuffer); //繫結索引

        //繪製立方體
        drawCube(gl, program, obj, x, angle, viewProjectMatrix);
    }

    // 宣告繪製需要變換矩陣變數
    var g_modelMatrix = new Matrix4();
    var g_mvpMatrix = new Matrix4();
    var g_normalMatrix = new Matrix4();

    function drawCube(gl, program, obj, x, angle, viewProjectMatrix) {
        // 計算模型矩陣
        g_modelMatrix.setTranslate(x, 0.0, 0.0);
        g_modelMatrix.rotate(20.0, 1.0, 0.0, 0.0);
        g_modelMatrix.rotate(angle, 0.0, 1.0, 0.0);

        // 計算出法向量的方向 並賦值
        g_normalMatrix.setInverseOf(g_modelMatrix);
        g_normalMatrix.transpose();
        gl.uniformMatrix4fv(program.u_NormalMatrix, false, g_normalMatrix.elements);

        // 計算檢視模型投影矩陣
        g_mvpMatrix.set(viewProjectMatrix);
        g_mvpMatrix.multiply(g_modelMatrix);
        gl.uniformMatrix4fv(program.u_MvpMatrix, false, g_mvpMatrix.elements);

        gl.drawElements(gl.TRIANGLES, obj.numIndices, obj.indexBuffer.type, 0);
    }

    function initAttributeVariable(gl, a_attribute, buffer) {
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.vertexAttribPointer(a_attribute, buffer.num, buffer.type, false, 0, 0);
        gl.enableVertexAttribArray(a_attribute);
    }

    var angle_step = 30; // 每秒旋轉角度
    var last = +new Date(); // 儲存上次呼叫animate函式的時間
    function animate(angle) {
        var now = +new Date();
        var elapsed = now - last;
        last = now;
        var newAngle = angle + (angle_step * elapsed) / 1000.0;

        return newAngle % 360.0;
    }

    function initTextures(gl,program) {
        var texture = gl.createTexture();
        if(!texture) {
            console.log('無法建立紋理緩衝區');
            return null;
        }

        var img = new Image();
        img.onload = function() {
            // 將圖形資料存入紋理物件
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);

            // 將紋理存入到第一個紋理緩衝區
            gl.useProgram(program);
            gl.uniform1i(program.u_Sampler, 0);

            gl.bindTexture(gl.TEXTURE_2D, null); // 解綁當前
        }

        img.src = '../images/wallpaper.jpg';

        return texture;
    }

    function initVertexBuffers(gl) {
        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 normals = new Float32Array([
            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 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    WebGL切換著色器 繪製不同物體
       
  
  
 WebGL切換著色器 繪製不同物體 
 1、為何切換著色器 
 WebGL繪製不同的物體需要使用不同的著色器，每個著色器中可能有非常負責的邏輯以實現各種不同的效果。我們可以準備多個著色器，然後根據需要來切換使用它們。 
 2、如何實現切換著色器 
 為了切換著色器，首先建立多個著色器程式物件 

  
 

    

    
    WebGL著色器繪製一個點
      OpenGL ES著色器語言（GLSL ES） 

 1. 強型別語言
 

 2. 內建變數 gl_Position(座標) gl_PointSize(尺寸) gl_FragColor(顏色)
 

 3. gl_pointSize必須使用浮點型，gl_PointSize=10 會報錯，必須10.0這種格式 

  
 

    

    
    【遊戲開發】關於Direct X（六）繪製蝙蝠著色器
       
 
 //D3D相容庫，包含對系統的相容以及Directx庫
#include "DXUT.h"

//攝像機
#include "DXUTcamera.h"

//設定對話
#include "DXUTsettingsdlg.h"

//音樂
#include "SDKmisc.h"

//資源
#in 

  
 

    

    
    WebGL著色器和Three.js自己定義後期處理著色器
       
 
  
  
 WebGL著色器和Three.js自己定義後期處理著色器 
 為了渲染出一個網格的最終影象，開發者需要準確的定義頂點、變換、材質、光源以及相機是如何相互作用並最終生成影象的。而承擔這個工作的就是著色器（shader）。著色器又稱作可程式設計著色器，它是一段原始碼，它實現了將網格畫素點投影 

  
 

    

    
    WebGL學習之從著色器入門
       
 
 Intro 
 不論是WebGL、OpenGL、OpenGL ES、Vulkan、DirectX，這些聽起來就十分“底層”、“高效能”、“難寫”的東西似乎是和我一個後端開發都沒什麼關係。（遠處傳來聲音：別tm擅自改臺詞！） 
 咳，迴歸正題。 
 我看了好多的 OpenGL 入門書，固定管線的比較好 

  
 

    

    
    webgl第七課-滑鼠分象限繪製不同顏色的點
       
 
 
 需要原始碼可以Q群：828202939 或者點選這裡  希望可以和大家一起學習、一起進步！！純手打！！ 
 書籍是PDF電子檔，也在Q群裡，所有的課程原始碼在我上傳的資源裡面，本來想設定開源，好像不行！ 
 如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，在下 

  
 

    

    
    webgl第三課-淺談著色器
       
 
 
 需要原始碼可以Q群：828202939 或者點選這裡  希望可以和大家一起學習、一起進步！！純手打！！ 
 書籍是PDF電子檔，也在Q群裡，所有的課程原始碼在我上傳的資源裡面，本來想設定開源，好像不行！ 
 如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，在下 

  
 

    

    
    WebGL glsl fragment 著色器實現的紋理動畫: 神祕海洋
      
                glsl程式碼:this.vshdCode = 
          "precision mediump float;"
          +"attribute vec3 a_vtx_pos;"
          +"attribute vec2 a_vtx_uv;" 

  
 

    

    
    [WebGL入門]八，著色器的說明和基礎
      
                注：文章譯自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的額外說明，我會加上［lufy：］，另外，鄙人webgl研究還不夠深入，一些專業詞語，如果翻譯有誤，歡迎大家指正。認識GLSLWebGL是無法利用固定渲染管線的，這個在之前的文章（四，渲 

  
 

    

    
    06 WebGL 著色器程式語言GLSL ES的陣列
      
                
GLSL ES支援陣列型別。與JavaScript中的陣列不同的是，GLSL ES只支援一維陣列，而且陣列物件不支援pop()和push()等操作，建立陣列時也不需要使用new運算子。宣告陣列很簡單，值需要在變數名後加上中括號（[]）和陣列的長度。比如：
    float 

  
 

    

    
    40 WebGL著色器和著色器程式物件：initShader()函式的內部流程
      
                
首先將initShaders()函式的相關程式碼貼出：

/**
 * Create a program object and make current
 * @param gl GL context
 * @param vshader a vertex shader pr 

  
 

    

    
    14 WebGL 著色器程式語言GLSL ES的預處理指令
      
                
GLSL ES支援預處理指令。預處理指令用來在真正編譯之前對程式碼進行預處理，都以井號（#）開始。下面就是我們曾使用的預處理指令。
#ifdef GL_ES
    precision mediump float;
#endif這段程式碼檢查了是否已經定義了GL_ES巨集， 

  
 

    

    
    WebGL著色器繪制正方形
      arrays   web   著色器   eight   spa   點畫   set   int   arr   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
 

  
 

    

    
    WebGL 著色器偏導數dFdx和dFdy介紹
      
本文適合對webgl、計算機圖形學、前端視覺化感興趣的讀者。

偏導數函式（HLSL中的ddx和ddy，GLSL中的dFdx和dFdy）是片元著色器中的一個用於計算任何變數基於螢幕空間座標的變化率的指令（函式）。在WebGL中，使用的是dFdx和dFdy，還有另外一個函式fwidth = dFdx + dF 

  
 

    

    
    WebGL著色器32位浮點數精度損失問題
      問題
WebGL浮點數精度最大的問題是就是因為js是64位精度的，js往著色器裡面穿的時候只能是32位浮點數，有效數是8位，精度丟失比較嚴重。

這篇文章裡講了一些處理方式，但是視座標這種方式放在我們的場景裡不適用
http://www.yanglajiao.com/article/baidumap2 

  
 

    

    
    WebGL簡易教程(二)：向著色器傳輸資料
      
    目錄
    
        
        1. 概述
        2. 示例：繪製一個點(改進版)
        1) attribute變數
        2) uniform變數
        3) varying變數
        
        3. 結果
       

  
 

    

    
    跨多個服務器訪問不同數據庫的表的方法
      通過   open   onf   code   eight   value   use   rom   str   
/*跨多個服務器訪問不同的表的方法一
*先創建鏈接服務器TESTT,
*在MSSQL2008下不能直接修改鏈接服務器 ‘TESTT‘ 的RPC配置成TURE，可以通過語句修改如下：
*/
U 

  
 

    

    
    頂點著色器 學習筆記
      裁剪   str   cati   strong   log   href   open   rotate   程序   頂點著色器

shader的三種變量類型

uniform變量一般用來表示：變換矩陣，材質，光照參數和顏色等信息；如果在vertex和fragment兩者之間聲明方式完全一樣，則它可以在v 

  
 

    

    
    關於用兩個網址訪問一個服務器上不同站點
      com   dex   監聽   listen   解決方法   rtu   one   不同   mage   
要求就是通過http://www.xiaolu.com訪問在位置f:myblog下的文件index.html;通過http://www.xiaolu1.com訪問在位置f:myblog1下的in 

  
 

    

    
    03 傳遞貼圖給著色器
      tac   cti   arc   port   --   angle   span   com   shader       WebGL很容易把圖片傳遞給著色器程序當作貼圖。下面是一些需要註意的地方：
    1、貼圖圖片長寬像素必須是2的冪，例如16、32、64、128、256，否則貼圖無法顯示。
WebGL切換著色器 繪製不同物體

WebGL切換著色器 繪製不同物體

1、為何切換著色器

2、如何實現切換著色器

3、例項程式

相關推薦

WebGL切換著色器繪製不同物體

WebGL切換著色器繪製不同物體
