【WebGL连载教程五】H5开发3D引擎：认识Canvas之WebGL篇

在上一节，我们认识了<canvas>标签，并在ts中调用它绘制了一个2d矩形。

这一节，我们继续接着讲如何调用WebGL的绘图api。

使用WebGL，不仅可以绘制2D图形，更强大的地方在于它可以轻松的绘制各种复杂的3D图形。

利用3D图形绘制API，可以使用它来创建许多真实的场景和3D游戏！

【1】获取WebGL绘图接口：

之前我们使用：canvas.getContext("2d")来获取二维上下文。

//获取一个绘图上下文，这里我们的参数是：2d。表明我们绘制二维图形  
var context:CanvasRenderingContext2D = <CanvasRenderingContext2D>canvas.getContext("2d");

想要使用WebGL来绘制三维3D上下文，需要更改一下传入参数。

默认情况下，只需要将参数2d改为webgl即可，像下面的代码这样

//获取WebGL的绘图上下文
var context:WebGLRenderingContext = <WebGLRenderingContext>canvas.getContext("webgl");

返回的类型变成了：WebGLRenderingContext 它是一个WebGL的上下文，提供了WebGL的API。

【2】更具兼容性的WebGL获取方法：

但是，WebGL由于不同的浏览器差异不同，所以需要封装成一个兼容的获取方法：create3DContext。

//获取一个兼容的webgl上下文
private create3DContext(canvas: HTMLCanvasElement): WebGLRenderingContext | any {
    var names: string[] = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
    for (var i = 0; i < names.length; i++) {
        try {
            var context: WebGLRenderingContext = <WebGLRenderingContext>canvas.getContext(names[i]);
            if (context) {
                return context;
            }
        } catch (e) { }
    }
    return null;
}

我们使用了一个字符串数组来定义所有可能的情况：["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];

数组的顺序决定了获取的优先级。遍历的时候，当能获取到正确的WebGL时，就返回。

这样我们就在不同的浏览器标准中，获得了正确的WebGL接口：WebGLRenderingContext

【3】最短的WebGL程序：清空绘图区

我们这就使用ts语言开始编写世界上最短的WebGL程序。这个程序的功能就是清空并使用黑色来填充<canvas>区域。

//获取一个3d绘图上下文，表明我们将使用webgl相关的api
var gl: WebGLRenderingContext = this.create3DContext(canvas);
if (gl == null) {
    console.log("错误：无法获取到 WebGL 上下文！");
    return;
}

//清空指定<canvas>的颜色
gl.clearColor(0.0,0.0,0.0,1.0);

//清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);

当我们获取到正确的WebGL接口后，使用clear进行清除，具体如下。

（a）调用gl.clearColor清空指定颜色，

gl.clearColor(红，绿，蓝，透明度) 颜色值范围在0.0~1.0之间，用于在指定清空后的背景填充色。

（b）调用gl.clear清空canvas的缓冲区：

参数 gl.COLOR_BUFFER_BIT 表示是颜色缓冲区，还有很多缓冲区类型，后边会慢慢学到。

在浏览器中，如果不出意外，你将会看到如下图所示的结果：

使用WebGL调用clear清空颜色缓冲区，并指定黑色填充了整个<canvas>渲染区域。

HelloCanvas.ts 的完整代码如下：

 
   namespace 
   sunnyboxs { 
   //namespace命名空间 
  
   export 
   class 
   HelloCanvas { 
   //类名 
  
   constructor() 
   //构造函数 
  
    { 
  
   //通过元素id来获取对象 
  
   var 
   canvas: 
   HTMLCanvasElement = < 
   HTMLCanvasElement> 
   document. 
   getElementById( 
   'my-canvas'); 
  
   if (! 
   canvas) { 
  
   console. 
   log( 
   "错误：无法获取到 Canvas 元素！"); 
  
   return; 
  
    } 
  
   //获取一个3d绘图上下文，表明我们将使用webgl相关的api 
  
   var 
   gl: 
   WebGLRenderingContext = 
   this. 
   create3DContext( 
   canvas); 
  
   if ( 
   gl == 
   null) { 
  
   console. 
   log( 
   "错误：无法获取到 WebGL 上下文！"); 
  
   return; 
  
    } 
  
   //清空指定<canvas>的颜色 
  
   gl. 
   clearColor( 
   0.0, 
   0.0, 
   0.0, 
   1.0); 
  
   //清空<canvas> 
  
   gl. 
   clear( 
   gl. 
   COLOR_BUFFER_BIT); 
  
    } 
  
   //获取一个兼容的webgl上下文 
  
   private 
   create3DContext( 
   canvas: 
   HTMLCanvasElement): 
   WebGLRenderingContext | 
   any { 
  
   var 
   names: 
   string[] = [ 
   "webgl", 
   "experimental-webgl", 
   "webkit-3d", 
   "moz-webgl"]; 
  
   for ( 
   var 
   i = 
   0; 
   i < 
   names. 
   length; 
   i++) { 
  
   try { 
  
   var 
   context: 
   WebGLRenderingContext = < 
   WebGLRenderingContext> 
   canvas. 
   getContext( 
   names[ 
   i]); 
  
   if ( 
   context) { 
  
   return 
   context; 
  
    } 
  
    } 
   catch ( 
   e) { } 
  
    } 
  
   return 
   null; 
  
    } 
  
    } 
  
    }

最后：HelloCanvas.ts如何调用，如何被编译成JS，如果你还不知道。建议你去翻看我前面的几篇教程。

再次提醒：

编译后得到的Main.js文件（如果提示Main.ts和HelloCanvas.ts类的依赖顺序提示发生了错误）；

建议使用typescript-box编译器进行编译。它能实现正确的排序编译，完美解决ts编译后的引用错误。

具体教程在本博客：https://blog.csdn.net/sjt223857130/article/details/80086178

以后的文章中，将不再重复提示这个问题。

下一节，我们将继续一步一步学习WebGL！

欢迎关注~

【WebGL连载教程五】H5开发3D引擎：认识Canvas之WebGL篇

猜你喜欢