
WebGl
文章平均质量分 62
小白菜学前端
我很懒,懒得介绍……
展开
-
WebGL 3D基础
1. 归一化函数对一个向量进行归一化处理,即调整向量的模长(长度)为1,同时保持其方向不变。原创 2024-10-25 15:27:06 · 751 阅读 · 0 评论 -
WebGL 基础知识点
是从顶点着色器传递到片元着色器的纹理坐标。来指定取样器应该引用哪个纹理单元。关键字来声明变量的默认精度。纹理取样器变量通常声明为。在着色器中,纹理采样函数。用于从纹理中获取颜色值。在WebGL中,可以通过。在片源着色器中,可以通过。原创 2024-10-24 14:54:46 · 1209 阅读 · 0 评论 -
WebGL 添加背景图
ST纹理坐标(也称为UV坐标)是一种二维坐标系统,用于在三维模型的表面上精确地定位二维纹理图像。这种坐标系统通常将纹理的左下角映射到(0,0),而右上角映射到(1,1)。S坐标(U坐标):通常对应纹理图像的水平方向,即纹理的宽度。T坐标(V坐标):通常对应纹理图像的垂直方向,即纹理的高度。原创 2024-10-23 16:37:37 · 980 阅读 · 0 评论 -
WebGl 旋转矩阵
旋转矩阵是一个正交矩阵,用于在二维或三维空间中描述一个坐标系绕原点的旋转。在三维空间中,旋转矩阵通常用于沿x轴、y轴或z轴进行旋转,或者沿任意给定轴线进行旋转。旋转矩阵具有一些重要性质,例如它们是正交的,即它们的共轭转置等于其逆矩阵,而且它们保持向量的长度和夹角不变。原创 2024-10-22 16:26:38 · 464 阅读 · 0 评论 -
WebGl 缩放矩阵
缩放矩阵是线性代数中的一种矩阵,用于描述图形在空间中沿着各个坐标轴进行均匀缩放的变换。在3D图形编程中,缩放矩阵通常用于调整物体的大小,而不改变其形状。其中,(x, y, z)是缩放向量,表示沿着x、y、z轴的缩放比例。如果x、y、z都等于1,则矩阵表示不进行缩放;如果小于1,则表示缩小;如果大于1,则表示放大。原创 2024-10-22 15:49:43 · 558 阅读 · 0 评论 -
WebGl 使用平行矩阵实现图像平移
用于设置着色器程序中的统一矩阵(uniform matrix)变量。这个函数允许开发者将一个4x4的浮点矩阵传递给顶点着色器或片段着色器中的矩阵属性。这个矩阵可以用于多种变换,包括平移、旋转和缩放。平行矩阵,也称为平移矩阵,是一种在二维或三维空间中应用平移变换的矩阵。平移矩阵的作用是将空间中的每个点沿着一定的方向移动固定的距离,而不改变点之间的相对位置和距离。在顶点着色器中,我们定义了一个uniform变量mat,用来接收平移矩阵。在三维空间中,平移矩阵的形式为。原创 2024-10-22 14:57:47 · 629 阅读 · 0 评论 -
WebGl 实现图片平移、缩放和旋转
在WebGL中实现图片平移,可以通过修改顶点着色器中的顶点位置来实现。在顶点着色器中,可以通过添加或减去一个统一的偏移量(uniform variable)来实现这一点。图片的旋转可以通过在顶点着色器中应用旋转矩阵来实现。在二维空间中,通常围绕原点旋转,可以使用欧拉公式来计算旋转后的顶点位置。实现图片缩放,可以通过在顶点着色器中对顶点位置进行缩放来完成。在JavaScript中,可以通过设置u_Translation的值来控制平移的距离和方向。在JavaScript中,可以通过设置。的值来控制旋转的角度。原创 2024-10-22 10:32:49 · 555 阅读 · 0 评论 -
WebGl 多缓冲区和数据偏移
【代码】WebGl 多缓冲区和数据偏移。原创 2024-10-21 14:33:30 · 575 阅读 · 0 评论 -
WebGl 实现多种图形的绘制
gl.drawArrays函数是WebGL中用于绘制图形的核心函数之一。它根据指定的模式(mode)从当前激活的顶点缓冲区(VBO)中提取顶点数据,并将它们绘制成图形。原创 2024-10-21 15:45:57 · 353 阅读 · 0 评论 -
WebGl 使用缓冲区对象绘制多个点
缓冲区对象是WebGL系统中为一块内存区域,可以一次性地向缓冲区对象中填充大量的顶点数据,然后将这些数据保存在其中,供顶点着色器使用。原创 2024-10-17 14:52:16 · 2178 阅读 · 0 评论 -
WebGl 使用uniform变量动态修改点的颜色
在WebGL中,uniform变量用于在顶点着色器和片元着色器之间传递全局状态信息,这些信息在渲染过程中不会随着顶点的变化而变化。uniform变量可以用来设置变换矩阵、光照参数、材料属性等。由于它们在整个渲染过程中共享,因此可以被所有使用该着色器程序的顶点和片元访问。原创 2024-10-14 16:26:29 · 613 阅读 · 0 评论 -
WebGl 如何给页面绑定点击事件
在WebGL中给页面绑定点击事件,可以通过为WebGL的绘图上下文所在的元素添加事件监听器来实现点击事件的处理。原创 2024-10-14 14:26:08 · 509 阅读 · 0 评论 -
WebGl学习使用attribute变量绘制一个水平移动的点
在WebGL编程中,attribute变量是一种特殊类型的变量,用于从客户端传递数据到顶点着色器。这些数据通常包括顶点的位置、颜色、纹理坐标等,它们是与每个顶点直接相关的信息。attribute变量在顶点着色器中声明,并且对于每个顶点来说都是独立的。原创 2024-10-12 16:21:09 · 795 阅读 · 0 评论 -
了解WebGL三维坐标系
在WebGL中,三维坐标系是构建和渲染三维场景的基础。默认情况下,WebGL使用右手坐标系,其中X轴向右,Y轴向上,Z轴指向观察者,原点位于画布的中心。原创 2024-10-12 15:10:32 · 544 阅读 · 0 评论 -
WebGL 小白入门学习
(1)着色器:就是让开发者自己去编写一段程序,用来代替固定渲染管线,来处理图像的渲染。原创 2024-10-12 14:48:37 · 788 阅读 · 0 评论