JavaScript WebGL 绘制顺序

原创 已于 2022-10-04 11:41:19 修改 · 552 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #canvas #webgl #前端

于 2022-08-08 08:40:17 首次发布
本文探讨JavaScript WebGL中绘制顺序的重要性，特别是在三维场景中。默认情况下，WebGL按照缓冲区顺序绘制，后绘制的图形会覆盖前面的。然而，三维绘制仅依赖z轴深度信息并不足够，需要开启DEPTH_TEST和正确投影来避免错误效果。同时，文章介绍了深度冲突（Z-fighting）现象及其解决方案，包括多边形偏移（polygon offset）的使用，以解决多次绘制时的显示异常问题。

引子

在 JavaScript WebGL 三维相关概念中尝试一些效果的时候，又碰到了新问题，就去查了资料，自己尝试后总结下。

绘制顺序

之前二维绘制顺序并没有产生明显的不好效果，现在绘制三维影响就比较大了。

先看看二维相同一套顶点不同顺序的效果：

两个面的形状和对应颜色始终保持一致，就是缓冲的顺序变了，发现 WebGL 默认情况下会按照缓冲区中顺序绘制，也就是后绘制的图形会覆盖先绘制的图形。这个就像一层一层贴纸一样，比较符合一般认知，所以在二维绘制时并没发现明显不对劲的地方。

关于三维绘制顺序先思考一下：三维的顶点坐标有三个分量，第三个分量是在 z 轴上表示深度信息，默认垂直屏幕向内为负方向，那么 z 值越大表示离屏幕越近，既然都有区分的依据，直接按照这个顺序绘制应该就可以了。实际试试：

最低0.47元/天 解锁文章
JavaScript WebGL 矩阵
XXHolic
03-26 1591
引子 本以为可以开始尝试三维的效果了，查了一下资料之后发现要先了解矩阵。在这里集中收集一下相关基础知识点。 Origin My GitHub 简介 简单来说，矩阵（Matrix）是数字按行和列的矩形排列。一般描述先行后列，例如下面 2×3 矩阵： 矩阵中每个元素表示也可以根据行和列标记，例如 a1,2 表示第 1 行的第 2 列元素。 在应用数学学科中，矩阵常见于统计分析。 在物理学中，矩阵于电路学、力学、光学和量子物理中都有应用。 计算机科学中，三维动画制作需要用到矩阵。 单位矩阵 单位矩阵有如
JavaScript WebGL 基础概念
XXHolic
12-01 1633
引子 看了一个库的源码，里面用到了 WebGL ，就开始找 WebGL 的资料。发现相关的知识点很多，按照自己的理解习惯进行了整理记录。 Origin My GitHub 简介 WebGL 是一个跨平台、免费的开放式 Web 标准，用于基于 OpenGL ES 的初级 3D 图形 API 。可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。在 JavaScript 中可以通过 HTML5 的 Canvas 元素使用。WebGL 1.0 基于 OpenGL ES 2
JavaScript WebGL 绘制一个面
XXHolic
12-20 542
引子 JavaScript WebGL 基础疑惑点之后进行了一些优化，然后尝试绘制常见二维的面。 WebGL 中几何体最终都是由三角形构成，由三角形切入比较合适。 Origin My GitHub 绘制三角形 这是示例，基于绘制一条直线主要的变化有： 顶点 绘制图元 顶点 三角形有三个顶点，在基础疑惑点中知道坐标系是右手坐标系，个人习惯描述顶点的顺序以图形中心为原点，从第一象限到第四象限。 let vertices = [ 0.5, 0.5, 0.0, // 第一象限 -0.5,
javascript基础学习系列七百六十八：WebGL
m0_68635815的博客
04-08 338
本节假设读者了解OpenGL ES 2.0 的基本概念，并简单介绍OpenGL ES 2.0 在WebGL 中实现的部分。在完全支持的浏览器中，WebGL 2.0 上下文的名字叫"webgl2"，WebGL 1.0 上下文的名字叫。 preserveDrawingBuffer：布尔值，表示绘图完成后是否保留绘图缓冲区，默认为false。 antialias：布尔值，表示是否使用默认机制执行抗锯齿操作，默认为true。 alpha：布尔值，表示是否为上下文创建透明通道缓冲区，默认为true。
JavaScript-WebGL學習筆記
lee353086的专栏
03-19 406
對有DX/OpenGL基礎的人,通過下面的代碼可以快速有一個WebGL概念示例有兩個文件組成webgl.html<html> <head> <!-- Date: 2018-3-16 Author: kagula Prologue: 对已经有DirectX/OpenGL基础的，通过这里的代码快速对W...
WEBGL保姆级教程(五):WebGL图形绘制基础之绘制基本图形
分享知识，拥抱变化
08-12 982
本文系统介绍了WebGL中基本图形的绘制方法，包括点(POINTS)、线(LINES/LINE_STRIP/LINE_LOOP)和三角形(TRIANGLES/TRIANGLE_STRIP/TRIANGLE_FAN)三类图元。详细讲解了WebGL绘制的标准流程：准备顶点数据、创建缓冲区、编写着色器、关联数据与属性、执行绘制命令。通过具体案例演示了点、折线和扇形的实现方法，并总结了数据格式、图元选择、问题排查和性能优化等关键注意事项。全文从基础概念到实践应用，为WebGL初学者提供了完整的图形绘制入门指导。
WebGL绘制和变换三角形
qq_34754747的博客
04-19 323
缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。gl.vertexAttrib3f()一次只能向顶点着色器传入一个顶点，而绘制三角形、矩形和立方体等，你需要一次性将图形的顶点全部传入顶点着色器。不管三维模型的形状多么复杂，其基本组成部分都是三角形，只不过复杂的模型由更多的三角形构成而已。相应地，gl.deleteBuffer(buffer)函数可用来删除被gl.createBuffer()创建出来的缓冲区对象。
WEBGL保姆级教程(十二):WebGL性能优化之优化绘制流程
最新发布
分享知识，拥抱变化
08-12 996
本文系统介绍了WebGL绘制流程的优化方法，主要围绕三个核心环节展开：减少绘制调用、优化状态管理、高效数据传输。通过实例化渲染和批次合并可显著降低绘制调用次数；按状态分组渲染能减少GPU状态切换开销；合理使用缓冲区和Uniform块可优化CPU-GPU通信效率。文章还介绍了视锥体剔除、LOD等辅助优化技术，并推荐使用性能分析工具定位瓶颈。这些优化策略能有效提升WebGL应用的渲染性能，帮助开发者在画质和性能间取得平衡。
JavaScript WebGL 三维相关概念
XXHolic
08-02 495
WebGL 三维相关概念理解。
前端每日一学：WebGL —— 用 JavaScript 实现高性能 3D 渲染
m0_56406634的博客
02-24 688
你需要开发（如数据大屏、游戏、产品展示），或实现（如滤镜、特效），同时要求高性能渲染。
JavaScript WebGL 基础疑惑点
XXHolic
12-13 235
引子 尝试 JavaScript WebGL 绘制一条直线 之后总算是熟悉了一点，但还是有些疑惑，在此集中记录一下。 Origin My GitHub 顶点坐标范围为什么要在 -1.0 到 1.0 之间 ？ 在绘制直线的示例中，如果按照 Canvas 的大小修改顶点坐标，发现大都看不到对应的点。查资料说每个顶点的 x，y，z 坐标都应该在 -1.0 到 1.0 之间，超出这个坐标范围的顶点都将不可见。原因是整个过程中涉及到多个坐标系统的转换。 多个坐标系转换的优点是，一些操作或运算在特定的坐标系中才有意
JavaScript系列（46）-- WebGL图形编程详解
欢迎来到这里，希望文章能对你有所帮助
01-27 697
JavaScript之旅第四十六站
[WebGL入门]六，顶点和多边形
热门推荐
lufy小屋
08-01 1万+
顶点就是至少包含了坐标情报的三维空间上的任意的一个点，三个点用线连接起来，表现为一个三角形的多边形。而多边形根据顶点的连接顺序不同，分为内侧和外侧，根据这个可以进行遮挡剔除。 接下来，实际进行渲染的时候，会从顶点的情报的定义开始。这时候，顶点的顺序，遮挡剔除等设定就变得非常重要了，所以一定要把这次的内容彻底理解。
javascript之WebGL第一篇 —— 着色器
霍霍的博客
05-22 969
HTML页面： <body> <canvas id="canvas" width="300" height="300"></canvas> <body/> 一谈起着色器就不得不说下GLSL了，GLSL是一种OpenGL着色语言，WebGL是基于OpenGL ES 2.0实现的。所 以 OpenGL 中使用的着色器可以直接在 WebGL 中使用。...
Webgl可视化常规矩阵JS代码
lyz2015lyz的博客
03-18 296
1. 4*4 矩阵的行列式： function determinant(out, a) { let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3]; let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7]; let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11]; let a30 = a[12], a31 = a[13], a32 =...
WebGL编程指南-22 绘制每个面指定颜色的立方体
weixin_46773434的博客
09-29 463
如上，绘制了不同面指定颜色的立方体。
WebGL入门篇（1）
caixin185的博客
04-16 1252
全文共有三个章节：无论你是否有开发经验，都能带你了解🫡webgl是什么，能做什么，以及怎么学习和使用webgl开发。言归正传什么是WebGL？WebGL（全称Web Graphics Library），它是一种3D绘图协议，技术标准支持JavaScript和OpenGL ES 2.0，WebGL能为HTML5 Canvas提供硬件3D加速渲染，可以让Web开发人员依靠系统显卡将3D场景和模型展现在浏览器，常见的有导航和数据视觉化还有类似极品飞车、魔兽这样的3D游戏。
WebGL模型矩阵
dabaooooq的博客
08-30 711
在JavaScript中计算＜旋转矩阵＞×＜平移矩阵＞，然后将得到的矩阵传入顶点着色器。像这样，我们就可以把多个变换复合起来了。一个模型可能经过了多次变换，将这些变换全部复合成一个等效的变换，就得到了模型变换（model transformation），或称建模变换（modeling transformation），相应地，模型变换的矩阵称为模型矩阵（model matrix）。
webgl图形绘制流程
qq_37987033的博客
12-11 1652
webgl基本环境搭建，webgl上下文canvas填充示例，着色器绘制图形着色器使用流程，绘制图形绘制点示例。
webgl 绘制圆柱
03-21
好的，用户想了解如何使用WebGL绘制圆柱体，并且需要示例。首先，我需要回忆WebGL的基本绘制流程，通常包括初始化着色器、创建缓冲区、定义顶点数据、设置投影和视图矩阵等步骤。 圆柱体可以分解为顶部、底部和侧面...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值