webgl学习笔记一-绘图单点

写在前面

WebGl（全称：Web Graphics Library ： web图形库）是基于OpenGL ES 2.0的3D绘图协议。
WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

绘图一个点的步骤

创建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);

附上代码

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

写在最后

新博客

优质内容筛选与推荐>>
1、JAVA数据结构之链表
2、Python module中的全局变量
3、js封装用户选项传递给Servlet之考试系统二
4、项目　数据可视化３
5、虚函数

html

javascript

朋友将在看一看看到

分享想法到看一看