JavaScript WebGL 绘制顺序

已于 2022-10-04 11:41:19 修改
阅读量431 收藏
点赞数
分类专栏： WebGL 文章标签： javascript canvas webgl 前端
于 2022-08-08 08:40:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011194386/article/details/126220716
版权

引子

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

绘制顺序

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

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

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

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

最低0.47元/天 解锁文章
_XXHolic_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript WebGL 基础概念
XXHolic
12-01 1514
引子 看了一个库的源码，里面用到了 WebGL ，就开始找 WebGL 的资料。发现相关的知识点很多，按照自己的理解习惯进行了整理记录。 Origin My GitHub 简介 WebGL 是一个跨平台、免费的开放式 Web 标准，用于基于 OpenGL ES 的初级 3D 图形 API 。可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。在 JavaScript 中可以通过 HTML5 的 Canvas 元素使用。WebGL 1.0 基于 OpenGL ES 2
webgl图形绘制流程
qq_37987033的博客
12-11 1255
webgl基本环境搭建，webgl上下文canvas填充示例，着色器绘制图形着色器使用流程，绘制图形绘制点示例。
WebGL编程指南-22 绘制每个面指定颜色的立方体
weixin_46773434的博客
09-29 353
如上，绘制了不同面指定颜色的立方体。
WebGL入门篇（1）
feixin369的博客
04-16 1010
全文共有三个章节：无论你是否有开发经验，都能带你了解🫡webgl是什么，能做什么，以及怎么学习和使用webgl开发。言归正传什么是WebGL？WebGL（全称Web Graphics Library），它是一种3D绘图协议，技术标准支持JavaScript和OpenGL ES 2.0，WebGL能为HTML5 Canvas提供硬件3D加速渲染，可以让Web开发人员依靠系统显卡将3D场景和模型展现在浏览器，常见的有导航和数据视觉化还有类似极品飞车、魔兽这样的3D游戏。
[WebGL入门]六，顶点和多边形
热门推荐
lufy小屋
08-01 1万+
顶点就是至少包含了坐标情报的三维空间上的任意的一个点，三个点用线连接起来，表现为一个三角形的多边形。而多边形根据顶点的连接顺序不同，分为内侧和外侧，根据这个可以进行遮挡剔除。 接下来，实际进行渲染的时候，会从顶点的情报的定义开始。这时候，顶点的顺序，遮挡剔除等设定就变得非常重要了，所以一定要把这次的内容彻底理解。
JavaScript WebGL 绘制一个面
XXHolic
12-20 368
引子 JavaScript WebGL 基础疑惑点之后进行了一些优化，然后尝试绘制常见二维的面。 WebGL 中几何体最终都是由三角形构成，由三角形切入比较合适。 Origin My GitHub 绘制三角形 这是示例，基于绘制一条直线主要的变化有： 顶点 绘制图元 顶点 三角形有三个顶点，在基础疑惑点中知道坐标系是右手坐标系，个人习惯描述顶点的顺序以图形中心为原点，从第一象限到第四象限。 let vertices = [ 0.5, 0.5, 0.0, // 第一象限 -0.5,
JavaScript_一个用CSS绘制图案的web组件.zip
05-20
JavaScript提供了多种API，如Canvas 2D API和WebGL，用于在网页上绘制图形。Canvas API允许开发者通过编程方式绘制线条、形状、图像等，而WebGL则支持3D图形渲染。然而，这个压缩包中的"css-doodle_main.zip"提示...
WebGL:使用WebGL的交互式计算机图形学（Coursera）
05-23
6. **深度测试和混合**：理解如何控制物体的绘制顺序，以正确处理重叠和透明度。 7. **缓冲区和数组**：WebGL使用缓冲区对象存储顶点数据和其他图形信息，数组缓冲区和元素数组缓冲区是其中的关键。 8. **WebGL上...
WebGL插件unity.zip
08-14
WebGL使得开发者可以直接在JavaScript中调用这些图形函数，与GPU进行通信，绘制复杂的3D场景。由于它是基于标准的，因此在大部分现代浏览器中都得到了良好的支持，包括Chrome、Firefox、Safari和Edge等。 WebGL的...
WEBGL高级编程源码
08-15
深度测试确保了3D物体正确地按照远近顺序绘制，而裁剪则用于排除不在视口内的几何体。理解并应用这些技术，可以创建更真实的3D场景。 9. **状态管理** WebGL的状态包括混合模式、深度测试、着色器、纹理等。源码...
webgl编程指南源码
12-26
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中实现交互式的2D和3D图形渲染。这个“WebGL编程指南源码”很可能是为了帮助开发者深入理解WebGL的工作原理和实践技巧而编写的教程或示例代码...
javascript基础学习系列二百九十七：WebGL 上下文
m0_68635815的博客
03-08 707
在完全支持的浏览器中，WebGL 2.0 上下文的名字叫"webgl2"，WebGL 1.0 上下文的名字叫 “webgl1”。如果浏览器不支持 WebGL，则尝试访问 WebGL 上下文会返回 null。这里把 WebGL context 对象命名为 gl。大多数 WebGL 应用和例子遵循这个约定，因为 OpenGL ES2.0 方法和值通常以"gl"开头。这样可以让 JavaScript 代码看起来更接近 OpenGL 程序。18.4.2 WebGL 基础。
28 WebGL绘制立方体
现在学习也不晚
06-02 8361
案例查看地址：点击这里到现在为止，一直学的都是绘制一些简单的三角形。下面，我们将学习如何绘制如图所示的一个立方体，目标：如果按以前所学的知识，制作这个正方体就需要使用三角形两个拼一个矩形，最后拼出来六个正方形来组成这个立方体，由于绘制三角形需要重复调用顶点，虽然只需要8个顶点的位置，但是，绘制三角形的时候，却需要多次调用，所以给我们提供了一个gl.drawElements()函数的解决方案。使用该...
webgl中，使用顶点索引
webMinStudent的博客
01-04 1391
1.webgl中，使用顶点索引 需要解决的是，减少数据，可以重复利用现有的数据 1.创建顶点索引数据 var indices = new Uint8Array([ 0, 1, 2, 0, 2, 3, // front 0, 3, 4, 0, 4, 5, // right 0, 5, 6, 0, 6, 1, // up 1, 6, 7, 1, 7, 2, /
webgl中如何通过一个缓冲区，实现传递多种顶点数据.
webMinStudent的博客
12-14 1154
1.webgl中如何通过一个缓冲区，实现传递多种顶点数据. 这个要求是什么呢？一般我们创建一个缓冲区，都是对顶点坐标进行操作。如果我们要对每个顶点的尺寸也是一个缓冲区进行的赋值操作，那么我们一般又要创建一个缓冲区。如果我们又要对什么进行赋值的话，我们又又要创建一个新的缓冲区。 而我要讲的是入通过一个缓冲区，将顶点的不同信息一起传入赋值。 如何完成上面的需求呢？ 首先你要会使用webgl的缓冲 我们只需要改变 vertexAttribPointer这个API的某几个参数就可以了。 如果你不知道 如何使
JavaScript WebGL 三维相关概念
XXHolic
08-02 389
WebGL 三维相关概念理解。
JavaScript WebGL 矩阵
XXHolic
03-26 1461
引子 本以为可以开始尝试三维的效果了，查了一下资料之后发现要先了解矩阵。在这里集中收集一下相关基础知识点。 Origin My GitHub 简介 简单来说，矩阵（Matrix）是数字按行和列的矩形排列。一般描述先行后列，例如下面 2×3 矩阵： 矩阵中每个元素表示也可以根据行和列标记，例如 a1,2 表示第 1 行的第 2 列元素。 在应用数学学科中，矩阵常见于统计分析。 在物理学中，矩阵于电路学、力学、光学和量子物理中都有应用。 计算机科学中，三维动画制作需要用到矩阵。 单位矩阵 单位矩阵有如
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 463
JavaScript青少年简明教程：函数及其相关知识（下）
webgl绘制多边形
01-20
WebGL是一种用于在Web浏览器中绘制3D图形的技术。要绘制多边形，你需要定义顶点数据，并使用WebGL的绘制函数将其绘制到画布上。 以下是一个使用WebGL绘制三角形的示例： ```javascript // 获取画布元素 var canvas = document.getElementById("myCanvas"); // 获取WebGL上下文 var gl = canvas.getContext("webgl"); // 定义顶点数据 var vertices = [ -0.5, -0.5, 0.0, // 第一个顶点的坐标 0.5, -0.5, 0.0, // 第二个顶点的坐标 0.0, 0.5, 0.0 // 第三个顶点的坐标 ]; // 创建缓冲区对象 var vertexBuffer = gl.createBuffer(); // 绑定缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // 将顶点数据写入缓冲区对象 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 获取顶点着色器代码 var vertexShaderSource = ` attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1.0); } `; // 创建顶点着色器对象 var vertexShader = gl.createShader(gl.VERTEX_SHADER); // 编译顶点着色器代码 gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); // 获取片元着色器代码 var fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; // 创建片元着色器对象 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 编译片元着色器代码 gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); // 创建着色器程序对象 var program = gl.createProgram(); // 将顶点着色器和片元着色器附加到着色器程序对象上 gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // 链接着色器程序对象 gl.linkProgram(program); // 使用着色器程序对象 gl.useProgram(program); // 获取顶点位置属性的位置 var aPosition = gl.getAttribLocation(program, "aPosition"); // 启用顶点属性数组 gl.enableVertexAttribArray(aPosition); // 指定顶点属性数组的数据格式和位置 gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); // 清空画布 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // 绘制三角形 gl.drawArrays(gl.TRIANGLES, 0, 3); // 刷新画面 gl.flush(); ``` 这段代码首先获取了画布元素和WebGL上下文，然后定义了三个顶点的坐标数据。接下来，创建了顶点着色器和片元着色器，并编译它们的代码。然后，创建了着色器程序对象，并将顶点着色器和片元着色器附加到着色器程序对象上。之后，启用顶点属性数组，并指定顶点属性数组的数据格式和位置。最后，清空画布，绘制三角形，并刷新画面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值