webgl (原生)基础入门指南【一】

北城余情 提交于 2020-03-18 12:29:19

来看这篇文章的同学一定是被近来的3D场景效果所震撼,抱着‘这TM怎么做的!’的来心态来学习webgl的吧。
也行你已经有threejs或其他3d场景开发框架的使用经验,却不知道webgl原生到底怎么写。本系列将从最简单最基础的原生API入手,手把手教你写webgl

准备webgl上下文

同二维场景一样,我们需要一个画布来绘制,在html中建立一个 canvas 元素。代码如下:

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Webgl  Hello world!</title>
</head>
<body onload="start()">
  <canvas id='main' width=500 height=400></canvas>
  <script src="./index.js"></script>
</body>
</html>

start() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。

// index.js
function start() {
  var canvas = document.getElementById("main");
  // 初始化 WebGL 上下文
  var gl = initWebGL(canvas);
  // 开始渲染
  ......
}
function initWebGL(canvas) {
  // 创建全局变量
  var gl = null;
  
  try {
    // 尝试获取标准上下文,如果失败,回退到试验性上下文
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}
  
  // 如果没有GL上下文,马上放弃
  if (!gl) {
    alert("WebGL初始化失败,可能是因为您的浏览器不支持。");
    gl = null;
  }
  return gl;
}

getContext('context 参数') 返回参数支持的上下文,如果参数无效,则返回 null 。我们在画二维canvas的时候才用的是.getContext('2d'),返回 CanvasRenderingContext2D 对象 ;三维却并不是想当然的'3d'而是canvas.getContext("webgl") 或者 canvas.getContext("experimental-webgl"),返回一个WebGLRenderingContext 对象。不同的浏览器内核支持的参数不同,具体如下:

清屏clearColor

画过canvas的亲应该都会使用一个颜色填充来清理帧画面。webgl同意需要这样一个清理函数在绘制下一画面的时候。webgl才用rgba的四色系统来定义颜色。与我们平时所用的颜色系统不一样的是,RGBA四个分量使用0.0~0.1之间的数值来表示。前三个分量表示三原色的饱和度,最后一个表示不透明度。

值得一提的是,webgl计算都是才用浮点计算,所以数值一般1写为1.0,数值 0 写为 0.0

这里我们需要进行四个初始化步骤

  1. 设置清除颜色(蓝色,不透明)

    gl.clearColor(0.0, 1.0, 1.0, 1.0);

  2. 深度清理

    gl.clearDepth(1.0);

  3. 开启“深度测试”, Z-缓存

    gl.enable(gl.DEPTH_TEST);

  4. 设置深度测试,近的物体遮挡远的物体

    gl.depthFunc(gl.LEQUAL);

清理画布的时候调用 gl.clear(gl.COLOR_BUFFER_BIT);来清理画布。
这样我们便准好了一个webgl的画布可以开始绘图了。
demo地址:http://codepen.io/leanneCC/pe...

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!