WebGL入門教程(一)-初識webgl

時間 2019-11-18

標籤 webgl 入門教程简体版

原文原文鏈接

1、WebGL和傳統網頁的區別：javascript

普通網頁組成成分：HTML、JavaScript；css

WebGL網頁組成成分：HTML五、JavaScript和GLSL ES(着色器語言 OpenGL ES)；html

2、WebGL採用H5中的<canvas>元素來定義繪圖區域，而後經過JavaScript內嵌GLSL ES在canvas中繪製三維圖形。java

canvas能夠同時支持二維圖形和三維圖形，它不直接提供繪圖方法，而是提供一種叫上下文(context)機制來繪製圖形，web

2.1使用canvas繪製二維空間步驟：canvas

2.1.1建立HTML5 canvas瀏覽器

<canvas id="canvas" width="200px" height="200px"></canvas>

2.1.2獲取畫布 canvas 的 ID和畫布的上下文緩存

//獲取canvas元素
var canvas = document.getElementById('canvas');
//獲取繪製二維上下文
var ctx = canvas.getContext('2d');

2.1.3經過上下文提供的方法進行繪製。yii

屬性和方法參考：http://www.w3school.com.cn/tags/html_ref_canvas.aspwebgl

例如：

ctx.fillStyle ='rgba(255,0,0,1.0)';//設置填充色爲紅色
ctx.fillRect(0,0,200,200);//使用填充色填充爲矩形

2.2使用canvas繪製webgl步驟：

2.2.1建立HTML5 canvas（同上）

2.2.2獲取畫布 canvas 的 ID（同上）

2.2.3獲取WebGL

//獲取webgl上下文
var gl = canvas.getContext('webgl');

解釋：爲了獲得 WebGLRenderingContext 對象(或圖形的WebGL上下文對象或只在WebGL的狀況下)，調用當前 HTMLCanvasElement 的getContext()方法。getContext()的語法以下：

canvas.getContext(contextType, contextAttributes);

經過"webgl"字符串或"experimental-webgl" 做爲 contentType。contextAttributes參數是可選的。 (雖然在進行這一步，請確保您的瀏覽器實現了WebGL 1.0版本(OpenGL ES 2.0))。其中WebGL的參數 ContextAttributes 不是強制性的。此參數提供接受布爾值，以下面列出各類選項

Alpha	若是它的值是 true，它提供了一個alpha緩衝區到畫布上。默認狀況下，它的值是 true
depth	若是它的值是true，會獲得一個繪圖的緩衝區，其中包含至少16位的深度緩衝。默認狀況下，它的值是true
stencil	若是它的值是true，會獲得一個繪圖的緩衝區，其中包含至少8位的模板緩存。默認狀況下，它的值是false
antialias	若是它的值是true，會獲得一個繪圖緩衝區，執行抗鋸齒。默認狀況下，它的值是true
premultipliedAlpha	若是它的值是true，會獲得一個繪圖緩衝區，其中包含的顏色與預乘alpha。默認狀況下它的值是true
preserveDrawingBuffer	若是它的值是true，緩衝區將不會被清零，直到被清除或由做者改寫將保留它們的值。默認狀況下，它的值是false

例如：

//帶參數的webgl上下文
var gl = canvas.getContext('webgl', { antialias: false, stencil: true });

2.2.4編譯着色器

着色器參考：http://www.yiibai.com/webgl/webgl_shaders.html

　 2.2.4.1存儲着色器（頂點着色器和片斷着色器）以頂點着色器爲例

var VSHADER_SOURCE =
        "void main() { " +
        //設置座標
        "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
        //設置尺寸
        "gl_PointSize = 10.0; " +
        "} ";

　 2.2.4.2編譯着色器，有三步

　 (1)建立Shader對象

Object createShader (enum type)

如觀察到的語法，該方法接受預約義的枚舉值做爲參數。咱們有兩種選擇這一點：gl.VERTEX_SHADER建立頂點着色器， gl.FRAGMENT_SHADER 建立片斷着色器。

//例如：建立定點着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);

　 (2)將寫好的着色器附加到Shader上

oid shaderSource(Object shader, string source)

　其中：shader − 必須建立Shader對象傳遞做爲一個參數，Source − 必須以字符串格式傳入着色器程序代碼。

(3)編譯程序

compileShader(Object shader)

　此方法接受着色器程序對象做爲參數。建立着色器程序對象以後，附加源代碼，將對象傳遞給該方法

2.2.5合併程序

(1)建立一個程序對象

createProgram();

(2)附加着色器

attachShader(Object program, Object shader);

其中：Program − 經過建立空的程序對象做爲一個參數,Shader − 傳遞的着色器編譯程序中的一個(頂點着色器，片斷着色器)

(3)連接着色器

linkProgram(shaderProgram);

(4)使用程序

useProgram(shaderProgram);

案例：

var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

2.2.6繪製圖像

gl.drawArrays(gl.POINTS, 0, 1);

3、完整代碼

html代碼

<!DOCTYPE html>
<html>
<head>
    <meta lang="en">
    <meta charset="UTF-8">
    <title>WebGL study</title>
    <link href="style/style.css">
    <script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<canvas id="canvas" width="200px" height="200px"></canvas>
</body>
</html>

javascript代碼：

/**
 * Created by houbingshuai on 2016/12/3.
 */
window.onload = function () {

    //頂點着色器程序
    var VSHADER_SOURCE =
        "void main() {" +
            //設置座標
        "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
            //設置尺寸
        "gl_PointSize = 10.0; " +
        "} ";

    //片元着色器
    var FSHADER_SOURCE =
        "void main() {" +
            //設置顏色
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";
    //獲取canvas元素
    var canvas = document.getElementById('canvas');
    //獲取繪製二維上下文
    var gl = canvas.getContext('webgl');
    if (!gl) {
        console.log("Failed");
        return;
    }
    //編譯着色器
    var vertShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertShader, VSHADER_SOURCE);
    gl.compileShader(vertShader);

    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragShader, FSHADER_SOURCE);
    gl.compileShader(fragShader);
    //合併程序
    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertShader);
    gl.attachShader(shaderProgram, fragShader);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);

    //繪製一個點
    gl.drawArrays(gl.POINTS, 0, 1);
}

總結：初識webgl，感受還不錯，努力吧少年