初涉WebGL
之前一直在捣鼓Vue和React栈,对组件化架构项目有了些理解和体会。今天尝尝WebGL,当然,并不打算现在深入,只是略作了解,我知道这个坑很深。
js的图形库、3d库也有好几款比较流行的,如游戏开发方面的three.js、数据可视化的图表库echarts.js、GIS方面的百度地图、google地图等,最近打算学习下。
言归正传,以前学canvas的时候,只是简单地学习2d context的一些api写写画画,webGL显然更高级些,在MDN文档的介绍中:
WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML
<canvas>
in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.
提到了WebGL可以让网页内容中的canvas元素实现3d渲染,其编程由两部分组成,一部分是由js写的控制代码,一部分是在用户设备gpu上执行的实现特定效果的代码(GLSL,注意,GLSL是一门针对GPU的编程语言)。不过WebGL只兼容IE11+
教程假设我们会一些基本的3d图像的概念。Learn WebGL for 2D and 3D graphics这篇入门教程指出,需要我们会一点html和css知识,以及较深的js功底,能理解闭包、原型链、构造函数等概念。
第一步,检测设备是否支持WebGL:
function detectWebGLContext () {
// Create canvas element. The canvas is not added to the
// document itself, so it is never displayed in the
// browser window.
var canvas = document.createElement("canvas");
// Get WebGLRenderingContext from canvas element.
var gl = canvas.getContext("webgl")
|| canvas.getContext("experimental-webgl");
// Report the result.
if (gl && gl instanceof WebGLRenderingContext) {
paragraph.innerHTML =
"Congratulations! Your browser supports WebGL.";
} else {
paragraph.innerHTML = "Failed to get WebGL context. "
+ "Your browser or device may not support WebGL.";
}
}
跟一般的功能检测一样,其实就是判断 gl = canvas.getContext("webgl")|| canvas.getContext("experimental-webgl") 是不是 WebGLRenderingContext 的一个实例。一旦我们的canvas元素有这个rendering context,我们就可以使用它的api进行渲染。
第二步,开始简单的example
-----填充WebGLContext
1.获取(set up)rendering context ,就是上一步的gl。
2.然后drawing buffer(现在先理解为画布)填充颜色。这个过程分两步:
//确定渲染的范围
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
//设定WebGL的内部状态--设定颜色
// Set the clear color to darkish green.
gl.clearColor(0.0, 0.5, 0.0, 1.0);
//输出其状态--填充颜色
// Clear the context with the newly set color. This is
// the function call that actually does the drawing.
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport()中前两个参数是相对于左下角的距离。后两个是宽,高。
在定义了drawing buffer的 范围后,我们执行了两个动作,先是设定WebGL的内部状态(颜色为绿色),然后执行语句让drawing buffer 变成WebGL内部状态所设定的样子。所以,WebGL实际上是一个状态机。我们可以回想下,在getContext(“2d”)的时候,要画一个矩形,我们也是遵循同样的操作步骤:
//定义样式(即内部状态)
cxt.fillStyle="#FF0000";
//输出图形(将样式状态输出到画布中)
cxt.fillRect(0,0,150,75);
最后,WebGL中颜色定义都是使用RGBA格式的。
-----开始将WebGL和用户交互结合
Clearing by clicking一例由上面的简单例子延伸而来,对canvas和button绑定了click事件,触发switchColor函数。
该函数先判断是否支持WebGL,再确定画布的范围,之后再执行三行代码:
//产生随机颜色
// Get a random color value using a helper function.
var color = getRandomColor();
//设置WebGL内部状态的颜色新值
// Set the clear color to the random color.
gl.clearColor(color[0], color[1], color[2], 1.0);
//将新值输出到画布
// Clear the context with the newly set color. This is
// the function call that actually does the drawing.
gl.clear(gl.COLOR_BUFFER_BIT);
----裁剪:
//开启裁剪功能
// Enable scissoring operation and define the position and
// size of the scissoring area.
gl.enable(gl.SCISSOR_TEST);
//设定可更新的区域
gl.scissor(60, 60, 60, 130); // Clear the drawing buffer solid yellow.
gl.clearColor(1.0, 0.6, 0.0, .1);
gl.clear(gl.COLOR_BUFFER_BIT);
getContext("2d")中也有相似的api。只有在指定的区域中画布才会被更新(显示)。
----不设置高宽会导致不符合预期的渲染结果
我们知道设置css可以改变元素的视觉高宽,canvas也一样。但如果我们只是单纯设置了css样式,不对其dom节点设置高宽,将导致诡异的渲染效果。
其实不止“webgl”的RenderingConext,“2d”的context也会有这种情况。
以前研究过canvas这个问题,因为css只是改变canvas元素呈现在页面上的视觉大小,但是其逻辑像素默认是300*150.
当我们调用api时,往api中传入表示高宽或x、y轴位置的参数时,一旦超出y轴方向的150和x轴方向的300,就会超出画布。
所以必要的时候,我们得获取canvas节点,然后js设定其逻辑高宽。canvas.height=xx;canvas.width=xx;
----封装WebGL 方法
function getRenderingContext() {
var canvas = document.querySelector("canvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var gl = canvas.getContext("webgl")
|| canvas.getContext("experimental-webgl");
if (!gl) {
var paragraph = document.querySelector("p");
paragraph.innerHTML = "Failed to get WebGL context."
+ "Your browser or device may not support WebGL.";
return null;
}
gl.viewport(0, 0,
gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
return gl;
}
这一节没什么新内容,只是把几个基本的语句进行封装。函数做了两件事情,判断是否支持webgl,然后将画布填充成黑色并返回RenderingContext这个接口。
//日后补充
初涉WebGL的更多相关文章
- Webgl的2D开发方案(一)spritebatcher
使用TypeScript 和 webgl 开发 第一步:实现了SpriteBatcher 例子如下 http://oak2x0a9v.bkt.clouddn.com/test/index.html ...
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)
我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...
- 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)
今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...
- 基于HTML5的WebGL应用内存泄露分析
上篇(http://www.hightopo.com/blog/194.html)我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动, ...
- 基于WebGL 的3D呈现A* Search Algorithm
http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现 ...
- 20个不可思议的 WebGL 示例和演示
WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示.WebGL 可以为 Canvas 提供硬件3D加速渲 ...
- webgl 循环传参画10个点
function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(c ...
随机推荐
- SpringCloud-Alibaba-Nacos 服务注册中心&配置中心
Spring Cloud Alibaba 由于 Spring Cloud Netflix 项目进入维护模式(将模块置于维护模式意味着 Spring Cloud 团队将不会再向模块中添加新功能,只会修复 ...
- php 推荐密码加密的方法
password_hash() 函数 password_hash() 函数用于创建密码的散列(hash) PASSWORD_DEFAULT - 使用 bcrypt 算法 (PHP 5.5.0 默认). ...
- 利用python画出SJF调度图
最先发布在csdn.本人原创. https://blog.csdn.net/weixin_43906799/article/details/105510046 SJF算法: 最短作业优先(SJF)调度 ...
- 编写管理IP地址参数脚本(永久性)
1.用各种命令取出/etc/passwd文件前5行的最后一个字母.(2种) 2.编写管理IP地址参数脚本(永久性) a.只能用sed命令完成 b.提示用户变量赋值(IP.子网掩码.网关.DNS等) c ...
- 初篇:我与Linux
据悉,红帽认证将于本年的8月份更换Rhel7为Rhel8.所以我想趁这次机会搏一搏. 我个人是初中就神仰Linux已久,只不过那个时候的我只知道Linux系统,不知道有什么区分.奈何那 ...
- 【集群实战】Rsync试题-异机数据备份解决方案
企业案例:Rsync上机实战考试题: 某公司有一台Web服务器,里面的数据很重要,但是如果硬盘坏了,数据就会丢失,现在领导要求你把数据在其它机器上做一个周期性定时备份. 要求如下: 每天晚上00点整在 ...
- Python之路【第二十八篇】:生成器与迭代器
#!/usr/bin/env python # -*- coding:utf-8 -*- #只要函数的代码里面出现了yield关键字,这个函数就不再是一个普通的函数了,叫做生成器函数 #执行生成器函数 ...
- 矩阵快速幂--HDU 6030 Happy Necklace
Problem Description Little Q wants to buy a necklace for his girlfriend. Necklaces are single string ...
- C++入门编程题目 NO.1
题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. #incl ...
- LeetCode 56,区间合并问题
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题的第33篇文章,我们一起来看LeetCode的第56题,它的难度是Medium. 题意 这道题的题意也很简单,只有 ...