- 综合排序
- 最热优先
- 最新优先
- 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之从WebGL1迁移到WebGL2
获取WebGL2上下文 获取WEBGL2和获取WebGL1的上下文的方式并不完全一致： 通过canvas的getContext方法获取WebGL2的上下文，这和WebGL1是一致的 getContext 方法传入的参数是"webgl2",而不是"webgl". 以下是获取WEBGL2上下文的代码 var canvas = document.createElement('canvas'); var gl2 = canvas.getContext('webgl2 ---- 除了以上所说的两点，webgl1的其他功能，WebGL2都可以很好的兼容。 当如，为了能够使用一些WebGL2的高级特性，我们需要做一些改变。 后面的章节，会陆续介绍WebGL2 相关的特性。
2.3K30发布于 2019-05-28 - 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之图元重启
在WebGL2中，可以通过图元重启的特性来解决这个问题。 启动图元重启功能 在OPENGL中，可以通过以下方法启动图元重启功能： glEnable(GL_PRIMITIVE_RESTART_FIXED_INDEX); 而在WEBGL2中，图元重启功能默认是开启的 参考WebGL2 文档：https://www.khronos.org/regis...
79840发布于 2019-05-28 - 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之引言
引子 时光荏苒岁月如梭，不知不觉间，青丝变白发，哦不是，应该是WebGL已经发展到了2.0阶段:WebGL2，WebGL2相比WebGL增加了很多新的特性，这些新的特性能够帮助程序开发人员实现更多 更酷 本系列文章将会向读者展示WEBGL2开发与WebGL的区别和WEBGL2的一些重要的新特性进行介绍. ---- WebGL2的新特性 WEBGL2的主要新特性包括： （但不限于 可能列举不全，后续会陆续补充） OPENGL ES着色器语言3.0 vertex array objects (VAOs) 三维纹理 Buffers (WEBGL_draw_buffers) Non-Power of 2 Texture Support Floating Point Framebuffer Attachments 总结 可以看出WebGL2 相比于WebGL有很多新玩意；事实上WebGL2是基于OpenGL ES 3.0，很多新的特性是从OpenGL ES 3.0而来的。
1.1K20发布于 2019-05-29 - 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之多采样渲染缓冲对象
多采样渲染缓冲对象 在WebGL2中，有了一个新的特性，叫做Multisampled Renderbuffer，恩，中文呢就叫做： 多采样渲染缓冲对象吧；通过多采样渲染缓冲对象，可以在帧缓冲区的渲染缓冲对象上实现 多采样纹理附件 多采样纹理附件又是什么东西呢，好吧，其实在WebGL2中，没有这个多采样纹理附件，在OPENGL才有，为什么提到这个多采样纹理附件，大部分时间，我们的离屏渲染都需要渲染到一个纹理对象上面 READ_FRAMEBUFFER和DRAW_FRAMEBUFFER 在webgl1中，帧缓冲区的对象的目标只能是gl.FRAMEBUFFER,而在WebGL2中，增加两种目标： gl.READ_FRAMEBUFFER
1.2K20发布于 2019-07-15 - 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之不可变纹理
在WebGL1中，纹理包括2D纹理和立方体纹理，在实际的使用中，如果纹理的图片是宽和高是2的幂，可以自动生成纹理的mipmap。 除此之外，还可以通过gl.texImage2D函数独立指定纹理的每个mipmap的级别。 因此，这会导致一个一般的编程人员不易觉察的问题，这涉及到显卡底层驱动。 简单来说，就是会导致驱动程序无法在绘图之前确定纹理是否完全指定，因此它必须检查每一个mip贴图级别或者子图像的格式是否相符、每一个级别的大小是否正确以及是否有足够的内存。这种绘图时检查可能代价很高，而使用不可变纹理可以避免这种情形。
89610发布于 2019-05-29 - 来自专栏若城技术专栏
WebGL2 Shader实现的动态图形效果
前言 本文将介绍如何使用WebGL2创建一个动态的图像效果，该效果基于一个经典的着色器。我们将使用JavaScript和GLSL编写代码，并通过使用顶点着色器和片段着色器将其传递给WebGL上下文。 效果图 创建画布和WebGL上下文 创建一个canvas元素，并赋值给变量canvas 通过canvas.getContext("webgl2")获取WebGL上下文对象，并赋值给变量gl const canvas = document.createElement("canvas") const gl = canvas.getContext("webgl2") 设置页面标题和样式 将页面标题设置为"? 对下面的代码进行分点分标题讲解说明， 并且代码与标题要对应 ； const canvas = document.createElement("canvas") const gl = canvas.getContext("webgl2
68110编辑于 2024-02-29 - 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之实例数组(Instanced Arrays)
实例化是一种只调用一次渲染函数却能绘制出很多物体的技术，它节省渲染一个物体时从CPU到GPU的通信时间。 实例数组是这样的一个对象，使用它，可以把原来的的uniform变量转换成attribute变量，而且这个attribute变量对应的缓冲区可以被多个对象使用；这样在绘制的时候，可以减少webgl的调用次数。
1.9K30发布于 2019-05-29 - 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之顶点数组对象
顶点数组对象，在WebGL1中，是一个扩展对象，该扩展对象的名称是OES_vertex_array_object；而在WebGL2中可以直接使用；如果你在WebGL1中已经使用过OES_vertex_array_object ，那么你只需要了解在WebGL2和WebGL1的调用方式的差异即可 下面会对顶点数组对象做详细的介绍。
1.4K30发布于 2019-05-28 - 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之采样器对象
采样器对象 在WebGL2中，引入了采样器对象，使用采样器对象，可以把纹理的过滤方式封装到采样器对象上面，而原本的纹理对象可以不用在指定过滤方式，因此一张图片可以只用创建一个纹理对象，对于不同的过滤方式
85210发布于 2019-09-09 - 来自专栏计算机图形学 前端可视化 WebGL
WebGL2系列之多采样渲染缓冲对象
多采样渲染缓冲对象 在WebGL2中，有了一个新的特性，叫做Multisampled Renderbuffer，恩，中文呢就叫做： 多采样渲染缓冲对象吧；通过多采样渲染缓冲对象，可以在帧缓冲区的渲染缓冲对象上实现 #多采样纹理附件 多采样纹理附件又是什么东西呢，好吧，其实在WebGL2中，没有这个多采样纹理附件，在OPENGL才有，为什么提到这个多采样纹理附件，大部分时间，我们的离屏渲染都需要渲染到一个纹理对象上面 ##READ_FRAMEBUFFER和DRAW_FRAMEBUFFER 在webgl1中，帧缓冲区的对象的目标只能是gl.FRAMEBUFFER,而在WebGL2中，增加两种目标： * gl.READ_FRAMEBUFFER
1.4K30发布于 2019-07-18 - 来自专栏灵光独耀
safari无法打开轻量服务器的控制台界面
这是由于safari浏览器本身的渲染特性不受支持导致的，在safari的开发标签下-试验性功能中关闭webgl2.0 图片 关闭后的渲染情况： 图片 经排查，safari 15/16版本对webgl2 的支持存在问题，代码检测支持webgl2，但是使用webgl渲染时会抛异常。 社区方案是 在开发选项中关闭 webgl2之后 正常回退渲染。参考: https://github.com/xtermjs/xterm.js/issues/3357。 我们跟进下 对safari关闭webgl2的渲染。 已经反馈给腾讯云官方，官方回退了版本以支持兼容safari，感动。如能正常使用，可以忽略本篇文章。
2.3K40编辑于 2023-02-16 - 来自专栏数字孪生
WebGL开发框架的比较
数据可视化库2.1 Deck.gl特点： WebGL2 驱动： 充分利用 WebGL2 的新特性，提供高性能的渲染能力。 3.2 luma.gl特点： WebGL2 驱动与模块化： 充分利用 WebGL2 的新特性，并采用模块化设计，开发者可以按需引入功能。 对 WebGL2 特性有深入需求，且希望在 Vis.gl 生态内进行开发的场景。总结选择指南：1.项目类型：通用 3D 应用/游戏： 优先考虑 Three.js 或 Babylon.js。
77710编辑于 2025-05-22 - 来自专栏数字孪生
WebGL开发框架的性能比较
Deck.gl:特点: 基于 WebGL2 的高性能可视化框架，采用分层架构，擅长渲染海量的点、线、多边形和 3D 对象。 luma.gl:特点: Vis.gl 生态系统的一部分，是一个模块化的 WebGL2 实用工具库，提供 GPU 编程抽象和性能工具。Deck.gl 和 Kepler.gl 都构建在它之上。 性能特点: WebGL2 优化: 充分利用 WebGL2 的新特性，如 Transform Feedback、Uniform Buffer Objects 等，以提高性能。 总结: luma.gl 提供了构建高性能 WebGL2 应用所需的底层工具和抽象，如果你在 Vis.gl 生态系统内开发，其性能优势会自然体现。在选择框架时，性能通常不是唯一考量。
59610编辑于 2025-05-22 - 来自专栏acoolgiser_zhuanlan
canvas中的getContext()方法 以及 webgl中的getContext()方法
“webgl2”,创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用。 要获得此接口的对象，调用getContext()一对<canvas>元素，提供“webgl2”作为参数： var canvas = document.getElementById('myCanvas') ; var gl = canvas.getContext('webgl2'); WebGL 2是WebGL 1的扩展。
6.6K30发布于 2019-01-17 - 来自专栏数字孪生
WebGL 的开发框架
Vis.gl (Deck.gl 的父项目):特点: 一个更广泛的基于 WebGL 的数据可视化库集合，除了 Deck.gl，还包括 luma.gl（WebGL2 实用工具库）和 react-map-gl luma.gl (Vis.gl 的一部分):特点: 一个模块化的 WebGL2 实用工具库，提供了 GPU 编程的抽象和性能工具。Deck.gl 和 Kepler.gl 都建立在它之上。 优点: 专注于 WebGL2 的新特性，提供高性能的缓冲区管理、着色器工具等。缺点: 更底层，不提供完整的 3D 场景管理。适用场景: 需要高度定制化 WebGL2 渲染管道的开发者。
54410编辑于 2025-05-22 - 来自专栏羽月技术
快速入门 WebGL
const canvas = document.createElement('canvas')const gl = ( canvas.getContext('webgl2') || canvas.getContext ('webgl') || canvas.getContext('experimental-webgl') ) 上面代码中是按照 webgl2、webgl、experimental-webgl 的顺序获取 webgl2 是最新版本，它几乎完全兼容 WebGL1。experimental-webgl 用来兼容老浏览器，如 IE 11。 兼容性 大多数浏览器都支持 WebGL1。 也有很多现代浏览器支持 WebGL2，但是苹果还不支持 WebGL2，所以编写 WebGL 程序时，需要向下降级到 WebGL1。 WebGL2 基于 OpenGL ES 3.0。 GPU WebGL 性能高的原因是它使用到了 GPU。
3.7K11编辑于 2022-11-11 - 来自专栏数字孪生
WebGL开发医学影像软件中的优化
硬件加速WebGL2: 如果可能，使用WebGL2，它提供了更多的功能和性能改进。WebGPU: 探索WebGPU，这是WebGL的下一代API，提供了更现代的GPU编程模型。6.
33800编辑于 2025-03-14 - 来自专栏项目实战
新零售实战 | 智能决策沙盘：实时大屏与预警系统的联邦学习协同框架
35IndexedDB：浏览器端特征存储（TTL 24小时）特征对齐采用基于SimHash的近似匹配算法2数据流架构：3.4 WebGL动态热力渲染3.4.1 可视化引擎设计/** * 热力图渲染器类，基于WebGL2 实现热力图绘制功能 */class HeatmapRenderer { /** * 构造函数，初始化WebGL2上下文并编译着色器程序 * @param {HTMLCanvasElement} canvas - 用于渲染的目标画布元素 */ constructor(canvas) { // 初始化WebGL2渲染上下文 this.gl = canvas.getContext ('webgl2'); // 编译顶点和片段着色器，创建着色器程序 this.program = this. GPU运算层：通过WebGL2实现并行化渲染计算。采用数据-视图分离设计，update()方法实现增量更新。（2）性能优化特性顶点数据直接映射（Float32Array）。
43330编辑于 2025-05-09 - 来自专栏历史专栏
【愚公系列】2023年08月 WEBGL专题-canvas和webgl的区别 | 技术创作特训营第一期
WebGL2的主要作用包括：支持更先进的图形效果和更高的图形性能，可以渲染比WebGL1更复杂的场景。提供更强大的图形处理能力，支持更多的着色器功能和更多的纹理贴图。 <script> const canvas = document.querySelector('#canvas'); const gl = canvas.getContext('webgl2 【创作提纲】1、canvas（主要讲解canvas概念和基本使用）2、webgl（主要讲解webgl概念和基本使用）3、webgl2（主要讲解webgl2概念和基本使用）
1.3K31编辑于 2023-08-27 - 来自专栏Rust语言学习交流
【Rust日报】2021-11-17 Neon - 使用 Rust 创建内存和类型安全的 Node.js 模块
DirectX 11、WebGL2 和 WebGPU 支持正在进行中。 使用您自己的自定义着色器来获得特殊效果。 完美像素边界上的硬件加速缩放。 支持非方形像素纵横比。
74520发布于 2021-11-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号