WebGL（画一个点）

作者: JetLu | 来源:发表于2016-07-26 22:23 被阅读487次

WebGL（画一个点）
webgl 3.画一个点
webgl 4.画一个点2
webgl基础图形
WebGL 的 Hello World
webgl 9.画一个圆
webgl 8.画一个正方形
threejs Light
threejs Light
WebGL入门

什么是WebGL

WebGL使得在支持HTML的canvas标签的浏览器中，不需要安装任何插件，便可以使用基于OpenGL ES 2.0的API在canvas中进行3D渲染。WebGL程序包括用JavaScript写的控制代码，以及在图形处理单元（GPU）中执行的特效代码（shader code）。WebGL元素可以和其他 HTML元素混合使用，并且可以和网页其他部分或者网页背景结合起来。—— MDN

虽然WebGL也是利用HTML的canvas元素，但是比2D难以驾驭多了。下面先从画一个点开始，进入WebGL的世界。

准备一个html文件

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            canvas {
                position: absolute;
                display: block;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                border: 1px solid #999;
            }
        </style>
    </head>
    <body>
        <canvas width="1000" height="500"></canvas>
        <!--引入js路径-->
        <script src="gl.js" charset="utf-8"></script>
    </body>
</html>

上面这段代码很简单，就是创建一个html文件里面包含一个canvas元素，并设置一下相关样式。

创建gl.js文件

const gl = document.querySelector('canvas').getContext('webgl')

if (!gl) alert('Failed to get webgl')



// 着色器源代码
const VSHADER_SRC = `
    void main() {
        gl_Position     = vec4(.0, .0, .0, 1.0);
        gl_PointSize     = 10.0;
    }
`

const FSHADER_SRC = `
    void main() {
        gl_FragColor = vec4(.0, .0, 1.0, 1.0);
    }
`
gl.clearColor(1.0, .0, .0, .2)
gl.clear(gl.COLOR_BUFFER_BIT)


// 创建着色器对象
const fShader = gl.createShader(gl.FRAGMENT_SHADER)
const vShader = gl.createShader(gl.VERTEX_SHADER)

// 将着色器源码写入对象
gl.shaderSource(vShader, VSHADER_SRC)
gl.shaderSource(fShader, FSHADER_SRC)

// 编译着色器
gl.compileShader(vShader)
gl.compileShader(fShader)

// 创建程序
const program = gl.createProgram()

// 程序绑定着色器
gl.attachShader(program, vShader)
gl.attachShader(program, fShader)

// 链接程序
gl.linkProgram(program)

// 使用程序
gl.useProgram(program)

// 绘制点
gl.drawArrays(gl.POINTS, 0, 1)

如果你没有研究过WebGL一定对上面的代码很陌生，是不是没有一点JavaScript的感觉。哈哈，那就对了。运行成功后，应该是这个样子。