webgl学习（一）

    第一次知道webgl是因为项目需要，老板让我去看看webgl。打开网站一堆英文表示看不懂，心累。意外发现了threejs，它是一个基于webgl的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。这都没啥，重要的是他太炫了。在浏览器上直接搞3d，不需要你搭建什么环境也不需要你引入什么库。只要你的浏览器支持webgl就行。这要求很低了吧，感觉瞬间上来了。真香~

    上网买了一本《webgl编程指南》开始了痛并快乐的学习。所以本文的代码很多都可以从书上找到的。

先搞一个入门的例子，清空缓冲区：

1、准备一个canvas

2、获取canvas元素

let canvas = document.getElementById('example');

3、获取绘图上下文

 let gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") || canvas.getContext("webgl2");

说到这里就要说到getContext了。

     语法：canvas.getContext(contextID);

      contextID指的是您想要在画布上绘制的类型，它可用的值有

1.  2d  创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。用来画2维的东西。
2. webgl 创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 1（OpenGL ES 2.0）的浏览器上可用。
3. experimental-webgl 和webgl一样（除了有些地方可能不稳定），实验性特性。
4.  webgl2 创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2（OpenGL ES 3.0）的浏览器上可用。
5. bitmaprenderer 创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。

4、清空canvas

 gl.clearColor(0.0, 10.0, 0.0, 1.0);
 gl.clear(gl.COLOR_BUFFER_BIT);

 

 第一次看到这个函数clearColor()还不明白为啥设置了颜色还没清空。还要执行clear()。你看人家函数名都是clearColor了。

      其实是我想差了，这一步是设置清空颜色缓冲区的颜色。或者说是设置了用那种颜色清空颜色缓冲区，但是还没有清空颜色，还差一步执行。

举个例子：你在画板上画画，我拿给你一瓶白色的颜料说：你画好了，就用这个白色的颜料把你画的给覆盖掉。

你看，我给你颜料(clearColor())，你去覆盖你的画(gl.clear()))。很形象吧，你以为就这些吗，不。

我给你白的颜料了，在我不给你新的颜料之前，你都可以用她覆盖掉你的画。clearColor()也是如此，

clearColor()设置好后，就被保存在webgl系统中。除非你设置别的颜色，否则之后清空颜色缓冲区将会一直使用它。

5、效果

index.html

 

index.js

function init3d() {
    //这一步就是获取指定的canvas元素了，接下来的操作都是在这个叫example的canvas上。
    let canvas = document.getElementById('example');
    //这一步是获取canvas绘图的上下文。
    /**
     * 说到这里就要说到getContext了。
     * 语法：canvas.getContext(contextID);
     * contextID指的是您想要在画布上绘制的类型，它可用的值有
     * 2d  创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。用来画2维的东西。
     * webgl 创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 1（OpenGL ES 2.0）的浏览器上可用。
     * experimental-webgl 和webgl一样（除了有些地方可能不稳定），实验性特性。
     * webgl2 创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2（OpenGL ES 3.0）的浏览器上可用。
     * bitmaprenderer 创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。
     * 
     */

    let gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") || canvas.getContext("webgl2");
    if (!gl) {
        return false;
    }
    //
    /**
     * 第一次看到这个函数clearColor()还不明白为啥设置了颜色还没清空。还要执行clear()。你看人家函数名都是clearColor了。
     * 其实是我想差了，这一步是设置清空颜色缓冲区的颜色。或者说是设置了用那种颜色清空颜色缓冲区，但是还没有清空颜色，还差一步执行。
     * 
     * 举个例子：你在画板上画画，我拿给你一瓶白色的颜料说：你画好了，就用这个白色的颜料把你画的给覆盖掉。
     * 
     * 你看，我给你颜料(clearColor())，你去覆盖你的画(gl.clear()))。很形象吧，你以为就这些吗，不。
     * 我给你白的颜料了，在我不给你新的颜料之前，你都可以用她覆盖掉你的画。clearColor()也是如此，
     * clearColor()设置好后，就被保存在webgl系统中。除非你设置别的颜色，否则之后清空颜色缓冲区将会一直使用它。
     */
    gl.clearColor(0.0, 10.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
}