javascript七基础学习系列一千四百七十五:WebGL1 与WebGL2

WebGL1 代码几乎完全与WebGL2 兼容。在使用WebGL2 上下文时,唯一可能涉及修改代码以保证
兼容性的就是扩展。在WebGL2 中,很多扩展都变成了默认功能。
例如,要在WebGL1 中使用绘制缓冲区,需要先测试相应扩展后再使用:
let ext = gl.getExtension(‘WEBGL_draw_buffers’);
if (!ext) {
// 没有扩展的代码
} else {
ext.drawBuffersWEBGL([…])
}
而在WebGL2 中,这里的检测代码就不需要了,因为这个扩展已经直接暴露在上下文对象上了:
gl.drawBuffers([…]);
以下特性都已成为WebGL2 的标准特性:
 ANGLE_instanced_arrays
 EXT_blend_minmax
 EXT_frag_depth
 EXT_shader_texture_lod
 OES_element_index_uint
 OES_standard_derivatives
 OES_texture_float
 OES_texture_float_linear
 OES_vertex_array_object
 WEBGL_depth_texture
 WEBGL_draw_buffers
 Vertex shader texture access
小结
requestAnimationFrame 是简单但实用的工具,可以让JavaScript 跟进浏览器渲染周期,从而更
加有效地实现网页视觉动效。
HTML5 的元素为JavaScript 提供了动态创建图形的API。这些图形需要使用特定上下文
绘制,主要有两种。第一种是支持基本绘图操作的2D 上下文:
 填充和描绘颜色及图案
 绘制矩形
 绘制路径
 绘制文本
 创建渐变和图案
第二种是3D 上下文,也就是WebGL。WebGL 是浏览器对OpenGL ES 2.0 的实现。OpenGL ES 2.0
是游戏图形开发常用的一个标准。WebGL 支持比2D 上下文更强大的绘图能力,包括:
 用OpenGL 着色器语言(GLSL)编写顶点和片段着色器;
 支持定型数组,限定数组中包含数值的类型;
 创建和操作纹理。
目前所有主流浏览器的较新版本都已经支持标签。

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值