webgl學習筆記一-繪圖單點

時間 2019-11-08

標籤 webgl 學習筆記繪圖單點简体版

原文原文鏈接

寫在前面javascript

WebGl（全稱：Web Graphics Library ： web圖形庫）是基於OpenGL ES 2.0的3D繪圖協議。html
WebGL完美地解決了現有的Web交互式三維動畫的兩個問題：第一，它經過HTML腳本自己實現Web交互式三維動畫的製做，無需任何瀏覽器插件支持;第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是經過統一的、標準的、跨平臺的OpenGL接口實現的。java

繪圖一個點的步驟web

建立HTML5 canvas

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

獲取畫布canvas的Id

var canvas = document.getElementById('canvas');

獲取畫布webgl的上下文

var gl = canvas.getContext('webgl');

編寫存儲着色器程序

頂點着色器：指定了點的位置和尺寸

//頂點着色器程序
        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);" +
        "}";

編譯着色器。三步曲

建立Shader（着色器）對象

Object createShader (enum type)

type 兩種選擇 ：
gl.VERTEX_SHADER建立頂點着色器 ，  gl.FRAGMENT_SHADER 建立片斷着色器。

將前面的着色器程序綁定到Shader對象上

shaderSource(Object shader, string source)
shader ：着色器對象
source ：着色器程序

編譯程序

compileShader(Object shader)

合併程序：將頂點着色器和片元着色器合併，並連接到程序中。四步走
- 建立一個程序對象
```
createProgram();
```
- 附件着色器
```
attachShader(Object program, Object shader);
```
- 連接着色器
```
linkProgram(shaderProgram);
```
- 使用程序
```
useProgram(shaderProgram);
```
繪圖

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

附上代碼canvas

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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



</body>
</html>

javascript

<script>

    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');
        //獲取繪製webgl繪圖上下文
        var gl = canvas.getContext('webgl');
        if (!gl) {
            console.log("Failed");
            return;
        }
        //編譯着色器
//        （1）建立Shader（着色器）對象
//        （2）將着色器程序附加到Shader上
//        （3）編譯程序
        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);
        //合併程序
//        （1）建立一個程序對象
//        （2）附加着色器
//        （3）連接着色器
//        （4）使用程序
        var shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertShader);
        gl.attachShader(shaderProgram, fragShader);
        gl.linkProgram(shaderProgram);
        gl.useProgram(shaderProgram);

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

</script>