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>

参考文献浏览器

webgl API

写在最后动画

新博客webgl