webgl （原生）基础入门指南【一】

2019年9月8日 205次阅读 来源: 安安

来看这篇文章的同学一定是被近来的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 对象。不同的浏览器内核支持的参数不同，具体如下：
《webgl （原生）基础入门指南【一】》

清屏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…

    原文作者：安安
    原文地址: https://segmentfault.com/a/1190000009036238
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞