麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

WebGL学习笔记之认识WebGL上下文

在之前的文章《WebGL学习笔记之使用Canvas》中介绍了使用WebGL的载体标签Canvas,不过绘制的还是Canvas,而不是WebGL。本文将介绍写一个最简单的WebGL程序。直接上Demo

直接上Demo

  const canvas = document.querySelector('#webgl');
  const gl = canvas.getContext('webgl');

  if (gl) {
    gl.clearColor(0, 1, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
  } else {
    console.log('WebGL not supported');
  }

代码解释

  1. 获取Canvas标签
  2. 告诉Canvas,老子要用WebGL
  3. 设置一个clearColor(相当于刷子蘸点这个颜色的颜料)
  4. 刷!(COLOR_BUFFER_BIT,就是第三步设置的颜色放在这个变量里了)

全部代码:https://github.com/sailor103/LearningWebGL/blob/master/src/2-webgl-context/index.html

运行效果如图:

WebGL上下文

是不是很简单?通过这个Demo我们可以发现Canvas的另一面,他不仅仅可以绘制普通的2D图形,还隐藏着一个大招:WebGL。

PS:注意不同浏览器初始化这个webgl的环境写法可能有点区别,但学习原理的时候不必关注这个,本文的代码在Chrome下完美运行,建议您也用它。

Web 3D GIS 之WebGL全部教程

全部文章见这里:新手的 Web 3D GIS 学习笔记之WebGL篇

相关阅读

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
公众号关注
B站关注
手机阅读
麻辣GIS微信公众号关注
最新GIS干货
麻辣GIS小破B站
有趣的技术视频

留言板(小编看到第一时间回复)