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

JerryC 发布于2019-08-01 16:39 / 1109人阅读

摘要：本系列将从最简单最基础的原生入手，手把手教你写准备上下文同二维场景一样，我们需要一个画布来绘制，在中建立一个元素。前三个分量表示三原色的饱和度，最后一个表示不透明度。

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

准备webgl上下文

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

// index.html



  
  
  Webgl  Hello world!

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

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

设置清除颜色(蓝色，不透明)

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

深度清理

gl.clearDepth(1.0);

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

gl.enable(gl.DEPTH_TEST);

设置深度测试，近的物体遮挡远的物体

gl.depthFunc(gl.LEQUAL);

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

专线服务超融合服务器入门基础基础入门 python入门基础 python基础入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50665.html

Threejs教程之着色器

摘要：学习基础具备基本和着色器语言知识，不一定要深入学习。着色器所谓的材质对象本质上就是着色器代码和需要传递的数据光源颜色矩阵。比更方便些，着色器中的很多变量不用声明，系统会自动帮你设置，比如顶点坐标变量投影矩阵视图矩阵 Three.js着色器很多时候如果想写一些特效，往往需要编写着色器代码GLSL，如果你不熟悉着色器语言，自然需要学习着色器语言语法，如果你有着色器语言基础，直接使用Thr...

darkbaby123 2019-08-23 12:08 评论0 收藏0
SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
JavaScript矢量化地图库 – 快速入门

摘要：注意在代码中将其替换为自己刚刚申请的运行，显示地图修改保存之后点击运行就可以得到一幅矢量地图了，此过程可能会稍微有点长，要耐心多等一会儿。 VectorMap.js是一个开源地图渲染JavaScript库，可以使用WebGL或者HTML5两种方式进行交互式矢量地图（包括矢量瓦片地图，一般性矢量数据地图）和栅格瓦片地图的渲染。 WebGL渲染意味着高性能，大数据， HTML5渲染意...

MiracleWong 2019-08-23 17:19 评论0 收藏0
WebGL入门demo

摘要：而是一款框架，由于其易用性被广泛应用。如果要学习，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。需要相机，演员这里是地球，场景，导演。最后拍好了戏交给渲染器来制片，发布。状态也在不停的更新。 WebGL入门demo three.js入门开场白哇哦，绘制气球耶，在网页上？对啊！厉害了！3D效果图也能在网页上绘制出来啊，这么好玩的事情，赶紧来看看！这里是属于WebGL的应用，...

lijinke666 2019-08-21 11:52 评论0 收藏0