3D可视化-数字孪生
关注
分享
扫一扫
文章平均质量分 94
3D可视化-数字孪生专题
愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
展开
-
【愚公系列】2023年08月 3D数学-矩阵运算和变换
矩阵是由数字或符号排成的矩形阵列。矩阵中的每个数字或符号称为元素。矩阵用于在数学、物理学、工程学和计算机科学等领域中描述和解决线性方程组、向量、转换、空间几何等问题。矩阵通常由方括号表示，如下所示：A=[a11a12⋯a1na21a22⋯a2n⋮⋮⋱⋮am1am2⋯amn]A = \begin{bmatrix}a_{11} & a_{12} & \cdots & a_{1n} \\a_{21} & a_{22} & \cdots & a_{2n} \\\vdots & \vdots & \ddots原创 2023-08-23 23:32:39 · 19345 阅读 · 17 评论 -
【愚公系列】2023年08月 3D数学-向量的运算
向量的运算包括加法、减法、数量积和向量积四种。具体如下：向量加法：将两个向量相加，即将一个向量的终点与另一个向量的起点重合，然后从它们的起点（或终点）出发，到达它们的终点（或起点）。向量加法满足交换律和结合律。向量减法：将一个向量的反向量与另一个向量相加，即将一个向量的起点与另一个向量的起点重合，然后从它们的终点开始，到达另一个向量的终点。向量减法也满足交换律和结合律。数量积（点积）：将两个向量的对应分量相乘再相加得到一个标量。原创 2023-08-23 00:21:21 · 19831 阅读 · 44 评论 -
【愚公系列】2023年08月 3D数学-叉积
叉积，也称向量积或叉乘，是两个三维向量之间的一种运算，表示为a⃗×b⃗a×b，结果是另一个向量，垂直于a⃗\vec{a}a和b⃗\vec{b}b所在的平面，方向由右手定则确定。原创 2023-08-22 22:43:00 · 19562 阅读 · 5 评论 -
【愚公系列】2023年08月 3D数学-点积
点积，也叫内积，是向量运算中的一种。对于两个nnn维向量a⃗a1a2anaa1a2an和b⃗b1b2bnbb1b2bna⃗⋅b⃗∑i1naibia1b1a2b2⋯anbna⋅bi1∑naibia1b1a2b2⋯anbn点积的本质是将两个向量投影在彼此上的结果相加。原创 2023-08-21 23:04:38 · 19008 阅读 · 11 评论 -
【愚公系列】2023年08月 3D数学-归一化函数
归一化函数是指将一组数据映射到某个特定区间内的函数。常见的归一化函数有最小-最大归一化、z-score归一化、基于平均值的归一化等。其目的是将各种不同规模、不同单位的数据统一在一个相同的区间内进行比较和处理，避免数据的规模和单位对分析结果造成影响。常见的特定区间包括[0,1]、[-1,1]等。原创 2023-08-20 22:20:33 · 19833 阅读 · 27 评论 -
【愚公系列】2023年08月 3D数学-向量的长度和距离计算
向量的长度指的是该向量的模长，也就是从向量的起点到终点所形成的直线段的长度。记作||v||。距离指的是两个点之间的距离，可以看作是由这两个点所形成的向量的长度。记作d(P,Q)。原创 2023-08-19 23:02:58 · 25137 阅读 · 2 评论 -
【愚公系列】2023年08月 3D数学-向量和标量
因此，向量 kv 的大小是原始向量 v 的大小乘以标量 k 的绝对值，向量 kv 的方向与原始向量相同（除非 k 为负数，这会翻转向量的方向）。向量乘标量的应用非常广泛，它可以用来进行向量的缩放，调整向量的大小和方向，生成新的向量等操作。这意味着，我们可以改变乘法的顺序，先乘 a 和 b ，再乘以向量 v，或先乘 b 和向量 v，再乘以标量 a，最终得到的结果是相同的。向量叉乘的结果是一个向量，长度等于两个向量构成的平行四边形面积，方向垂直于这个平行四边形（由两个向量构成的平面），原创 2023-08-18 22:06:49 · 19074 阅读 · 17 评论 -
【愚公系列】2023年08月 3D数学-三角函数
在数学中，函数是一种映射关系，它将一个集合中的元素映射到另一个集合中的元素。通常来说，一个函数由三个部分组成：输入、输出和规则。输入是指函数接收的变量或数值，输出是指函数根据规则计算后得到的结果，规则则是描述输入与输出之间关系的公式或算法。例如，一个简单的函数可以表示为：f(x) = x^2。在这个函数中，x是输入变量，f(x)是输出，规则是将输入的值乘以自身再输出。因此，当x=2时，函数的输出为f(2) = 2^2 = 4。函数的定义域是指所有可输入的值的集合，值域是指函数可能得到的所有输出值的集合。原创 2023-08-17 23:13:00 · 19415 阅读 · 3 评论 -
【愚公系列】2023年08月 Three.js专题-骨骼动画
骨骼动画是一种计算机动画技术，它通过将虚拟模型的结构分解为许多骨骼并随着动画的播放而移动这些骨骼，从而为观众呈现出更为逼真的动画效果。骨骼动画通常使用三维计算机图形软件来创建，可以应用于各种动画领域，包括游戏制作、电影制作、视觉特效等。Three.js是一个JavaScript库，用于在Web浏览器中创建3D图形和动画。它提供了骨骼动画的支持，可以使用Three.js的骨骼系统来创建复杂的动画效果。原创 2023-08-12 15:26:11 · 19606 阅读 · 1 评论 -
【愚公系列】2023年08月 Three.js专题-模型加载
模型加载是指将3D模型文件加载到应用程序中，以便进行操作和渲染。常见的3D模型格式包括OBJ、FBX、STL、Collada等。加载模型通常需要一个3D引擎或渲染引擎，例如Unity、Unreal Engine、Three.js等。在加载模型时，需要指定模型文件的路径，并根据需要进行调整和设置，例如缩放、位置、旋转等。加载后，可以对模型进行各种操作，例如添加材质、添加动画、进行碰撞检测等。原创 2023-08-10 17:18:06 · 19805 阅读 · 18 评论 -
【愚公系列】2023年08月 Three.js专题-事件
事件是指发生在某个时间和地点的具体事情或活动，常常具有重要性和意义。事件可以是任何形式的事情，例如自然灾害、政治事件、文化活动、体育比赛、社会活动等等。人们通常把事件看作是引起公众广泛关注和讨论的重要现象，可以对社会、政治和文化生活产生深远的影响。在计算机程序中，事件是指由用户操作或其他程序引发的某些特定操作或状态的发生。例如，当用户单击按钮或键盘上的键时，会触发相应的事件。程序员可以编写代码来捕获这些事件，然后处理它们。这些事件可以用来控制程序的执行流程，向用户提供反馈，或者执行其他自定义的操作。原创 2023-08-10 16:57:11 · 19146 阅读 · 2 评论 -
【愚公系列】2023年08月 Three.js专题-特效合成器
特效合成器（英文名：Special Effects Compositor）指的是一种计算机软件，用于将不同的视觉特效、图像和视频元素合成在一起，以创造出各种令人惊叹的视觉效果。通常，特效合成器是电影制作、电视节目制作和广告制作等行业中用于增强影像和视频质量的一个重要工具。特效合成器可以使用各种技术，如蓝/绿屏合成、3D建模、摄影和覆盖等，以创建高质量的视觉特效。常用的特效合成器软件包括Nuke、After Effects和Fusion等。原创 2023-08-13 18:22:55 · 19022 阅读 · 16 评论 -
【愚公系列】2023年08月 Three.js专题-场景
场景是指某个特定环境中出现的情景、事件和人物。它通常指现实生活中的某种情境或虚构世界中的场景，如戏剧、电影、小说、游戏等。在不同的领域和文化中，场景的概念和应用也不尽相同。在设计与艺术领域中，场景指的是特定的环境或氛围，如展示场所、街头表演、舞台设计等；在市场营销中，场景通常指的是一个为特定产品或服务所设计的环境和情境，以便引起消费者的积极反应和购买欲望。原创 2023-08-09 09:36:00 · 15837 阅读 · 0 评论 -
【愚公系列】2023年08月 Three.js专题-几何体
几何体是指由点、线、面所构成的空间实体。其中，点、线、面是几何体的基本元素，几何体包括球体、立方体、圆锥体、圆柱体、棱柱、棱锥、棱台等。这些几何体都有自己的特定形状和特征，可以应用于各种数学、物理和工程领域。Three.js中的二维几何体包括：二维点（THREE.Points）：表示一个点或一组点。二维线段（THREE.Line）：表示一条直线或折线。二维多段线（THREE.LineSegments）：表示多条线段连接而成的图形。二维圆形（THREE.Circle）：表示一个圆形，可以设置半径和线段数。二维原创 2023-08-09 09:55:46 · 16115 阅读 · 0 评论 -
【愚公系列】2023年08月 Three.js专题-基本概念和使用
Three.js是一个用于创建和呈现3D图形的JavaScript库。它提供了一组易于使用的工具和API，使得开发人员可以轻松地在Web应用程序中创建复杂的3D场景和动画。Three.js可以与其他JavaScript库和框架一起使用，如jQuery和React等。它是一个开源项目，有一个活跃的社区在支持和扩展它。Three.js的优势主要有：使Web应用程序变得更加生动和交互性：通过使用Three.js，开发人员可以轻松地为Web应用程序添加令人惊叹的3D图形和动画，从而使用户体验更加生动和交互性。原创 2023-08-08 16:43:19 · 16192 阅读 · 10 评论 -
【愚公系列】2023年08月 Three.js专题-相机控件
相机控件是一种可以在移动设备上使用的软件工具，它可以让开发者轻松地在应用程序中添加相机功能。相机控件可以提供诸如拍照、录像、闪光灯控制、对焦等功能，并允许开发人员对其进行自定义配置和调整。使用相机控件，开发者可以快速构建相机应用程序或将相机功能集成到现有应用程序中，从而为用户提供更好的拍照和录像体验。原创 2023-08-11 23:50:54 · 19907 阅读 · 24 评论 -
【愚公系列】2023年08月 Three.js专题-材质
材质是指制造物品所使用的原料或物质的种类，常见的材质包括金属、塑料、木材、玻璃、石头等。材质的选择取决于所制造物品的用途、设计和预算等因素。不同的材质有不同的特点和优缺点，如金属通常较为坚固，但较重且易锈蚀；塑料轻便且不易损坏，但耐久性较差。材质也会影响制造物品的外观和质感，如木材可以赋予物品自然美感，而玻璃则可以营造现代感。决定物体如何与背景融合控制底层 webgl 上下文如何渲染物体原创 2023-08-09 14:46:31 · 19419 阅读 · 26 评论 -
【愚公系列】2023年08月 Three.js专题-动画
动画是一种通过图像快速连续播放的技术，以创造出一种运动和变化的错觉。通常是通过制作一系列静态的图像，然后将它们连续播放以产生运动的效果。动画常用于电影、电视、广告、游戏和教育等领域，可以创造出各种形式的角色和场景，提供视觉上的乐趣和教育价值。常见的动画类型有手绘动画、数字动画、3D动画等。原创 2023-08-10 14:29:23 · 19248 阅读 · 4 评论 -
【愚公系列】2023年08月 Three.js专题-粒子特效案例
粒子特效是一种视觉效果，可以模拟出许多粒子在空间中的运动和变化，形成各种美丽的图案和动态效果。常见的粒子特效包括烟雾、火焰、水流、星空、气泡等，可以在电影、电视、游戏等领域中得到广泛应用。实现粒子特效，需要使用计算机图形学技术，如粒子系统、计算流体力学等。粒子平面是指在计算机图形学中，用于呈现粒子特效的平面。粒子特效是通过模拟大量的粒子运动和变化来实现的，而为了在视觉上呈现这些粒子，需要将它们以一定的规律排列在一个平面上，使得观众可以看到这些粒子的动态变化。因此，粒子平面常常被用作粒子特效的载体，通过对平面原创 2023-08-13 19:24:11 · 20218 阅读 · 15 评论 -
【愚公系列】2023年08月 Three.js专题-纹理
纹理是指由于物体内部或表面的微观结构、形态、组成、排列等因素所形成的外观或质感特征。它可以是线性的、非线性的、均匀的或不均匀的，可以在物体的表面或内部出现。纹理可以是自然界中的，也可以是人工制造的，是视觉艺术和设计中一个非常重要的元素。在数字图像处理中，纹理是图像分析和识别的一个重要因素。Three.js中的纹理贴图方式有以下几种：基础纹理：使用纹理图像创建基本纹理，可以使用图片或视频等多种类型的纹理贴图。环境贴图：创建环境贴图可以添加反射和折射效果，可以使用天空盒子或立方体纹理等。光照贴图：使用光照贴图可原创 2023-08-12 17:00:24 · 19098 阅读 · 20 评论 -
【愚公系列】2023年08月 Three.js专题-光源
光源是能够发出光的物体或设备，它能够发出光线，使我们看到周围的环境和物体。常见的光源包括太阳、灯泡、蜡烛、火把、手电筒等。根据发光方式不同，光源可以分为自发光源和非自发光源。自发光源是指能够自行发出光线的物体，如太阳等；而非自发光源是指需要外部能量刺激才能发出光线的物体，如灯泡、荧光棒等。在Three.js中，提供了不同类型的光源，每种光源的不同之处在于其照射场景的方式和效果。下面是常用的几种类型的光源以及它们的说明：点光源（THREE.PointLight）：将光源放置在场景中的一个点上，向所有方向发出光原创 2023-08-09 11:29:01 · 19399 阅读 · 7 评论 -
【愚公系列】2023年08月 Three.js专题-相机
相机是一种用来记录图像或视频的设备。现代相机通常由镜头、图像传感器、取景器、快门和图像处理器等部件组成。相机可以拍摄各种类型的照片，包括家庭照片、肖像照片、风景照片、动物照片和艺术照片等。现在，许多相机还具有额外的功能，例如视频录制、自动对焦和无线连接等。随着技术的发展，相机变得更加便携和高质量，已成为记录和分享生活的重要工具。原创 2023-08-09 10:26:30 · 19519 阅读 · 0 评论 -
【愚公系列】2023年08月 WEBGL专题-3D特效-绘制波浪点
波浪点特效可以为网页设计、视觉效果等方面增加一些动态效果，加强网页的可视性和吸引力，让用户更加易于注意和理解网页内容。此外，波浪点特效也可以用于游戏开发、电子书设计等方面，增强用户体验和互动性。原创 2020-06-29 21:20:22 · 568391 阅读 · 0 评论 -
【愚公系列】2023年08月 WEBGL专题-3D特效-半透明
半透明物体是指在光线透过时，可以看到模糊的影像，但不完全透明的物体。这种物体通常具有一定的透明性，但不完全透明，仍然存在某种程度上的不透明性。半透明物体的意义在于它可以在不影响视线的情况下，让光线穿过物体，使得我们能够观察到物体背后或者内部的部分。这种特性在许多应用中都非常有用，比如建筑物中的玻璃窗、医疗设备中的透明塑料、以及电子设备中的显示屏。此外，半透明物体还具有一定的艺术效果，可以让物体呈现出半透明的质感和神秘感，增强视觉体验。在WebGL中创建半透明物体需要遵循以下步骤：在片元着色器中定义透明度属性原创 2023-08-08 16:03:46 · 15886 阅读 · 3 评论 -
【愚公系列】2023年08月 WEBGL专题-3D特效-雾化
在3D图形渲染中，雾化是一种用于创建深度感的技术。它模拟了真实世界中的雾气效果，使远距离的物体看起来模糊不清，并且与背景融合在一起，从而增强了场景的真实感。实现3D中的雾化技术，通常通过在场景中添加一层透明的雾气效果，即雾层。这个雾层可以是线性的或指数的，具体的数学公式可以用来计算每个像素的雾化强度。这种技术使得远距离的物体看起来像是遮盖在一层雾气中，从而增强了场景的深度感。雾化技术在电影、游戏等领域广泛应用，能够提高场景的视觉效果和真实感。WEBGL中的雾化是一种视觉效果，可以模拟远处物体出现“雾气”或“原创 2023-08-07 16:44:00 · 16003 阅读 · 18 评论 -
【愚公系列】2023年08月 WEBGL专题-物体的选中
点击事件是用户在计算机屏幕或移动设备上单击（或轻敲）鼠标或触摸屏幕时发生的事件。当用户单击一个可交互元素时，例如按钮、链接或图像，浏览器会触发一个点击事件，通知网页代码用户已单击了该元素。在Web开发中，开发人员可以通过JavaScript编写代码来响应点击事件，并在用户点击时执行某些操作，例如显示弹出窗口、打开新的页面或更改网页内容。点击事件不仅适用于Web开发，也适用于桌面应用程序和移动应用程序，例如在Windows操作系统中单击鼠标左键或在iOS或Android设备上轻敲屏幕。点击事件是用户在计算机屏原创 2023-08-07 15:37:46 · 15855 阅读 · 6 评论 -
【愚公系列】2023年08月 WEBGL专题-光的使用
WebGL中的光与现实世界中的光类似，是一种物理光线模拟。WebGL使用光线追踪算法来模拟光在3D场景中的反射、折射和散射等现象，以实现逼真的光影效果。在WebGL中，光源是光的来源，可以模拟不同类型的光源，如平行光、点光源、聚光灯等。光线从光源发出，经过场景中的各个物体后，被摄像机捕捉，生成最终的渲染图像。通过调整光源的位置、颜色、强度等参数，可以在WebGL中实现不同的光影效果，如明暗对比、高光反射、镜面反射等。这些光影效果可以增强3D场景的真实感和表现力。在WEBGL中，点光源是一种光源类型，它模拟了原创 2023-08-06 22:52:40 · 15008 阅读 · 4 评论 -
【愚公系列】2023年08月 WEBGL专题-绘图方法之顶点法和索引法
WEBGL的绘图方法主要有以下几种：gl.drawArrays：使用顶点数组直接绘制图形。该方法需要传入一个枚举类型表示绘制的基本图形类型，例如gl.TRIANGLES表示使用三角形绘制，gl.POINTS表示使用点绘制，gl.LINES表示使用线段绘制等。该方法可以通过修改顶点数组中的顶点数据来修改绘制的图形。gl.drawElements：使用索引数组绘制图形。该方法与gl.drawArrays类似，但需要传入一个索引数组来表示绘制图形时顶点的顺序。使用索引数组可以有效减少重复顶点的数量，提高绘制性能。原创 2023-08-06 22:34:17 · 14964 阅读 · 1 评论 -
【愚公系列】2023年08月 WEBGL专题-透视投影
投影是指将三维空间中的对象或图形映射到二维平面上的过程。在计算机图形学中，投影是一个重要的概念，因为屏幕上只有二维的显示空间，需要将三维场景投影到屏幕上才能呈现给用户。投影有两种常见的方式：透视投影和正交投影。透视投影模拟了真实世界的视觉效果，使远处的物体更小，近处的物体更大，增强了视觉感受。而正交投影则是在平面上进行垂直投影，可以保留物体的大小和比例，但会失去深度感。无论是哪种投影方式，都需要计算投影矩阵来进行投影。透视投影是一种绘画和制图技术，它模拟了人眼在三维空间中观察物体时所产生的视觉效果。透视投影原创 2023-08-05 23:29:08 · 15086 阅读 · 26 评论 -
【愚公系列】2023年08月 WEBGL专题-正射投影
投影是指将三维空间中的对象或图形映射到二维平面上的过程。在计算机图形学中，投影是一个重要的概念，因为屏幕上只有二维的显示空间，需要将三维场景投影到屏幕上才能呈现给用户。投影有两种常见的方式：透视投影和正交投影。透视投影模拟了真实世界的视觉效果，使远处的物体更小，近处的物体更大，增强了视觉感受。而正交投影则是在平面上进行垂直投影，可以保留物体的大小和比例，但会失去深度感。无论是哪种投影方式，都需要计算投影矩阵来进行投影。原创 2023-08-05 17:29:26 · 14767 阅读 · 6 评论 -
【愚公系列】2023年08月 WEBGL专题-3D基础
3D基础内容包括以下几个方面：三维坐标系与向量：了解三维坐标系的构成以及如何在其中进行点的表示，同时需要掌握向量的定义、运算和应用。三维几何图形：熟悉点、线、面、体等基本几何图形的定义、属性和变换，包括平移、旋转、缩放等。三维建模：掌握基本的三维建模技巧，包括建模软件的使用、多边形建模、曲线建模、NURBS等。光照和材质：了解光照的基本概念、类型以及如何应用到三维场景中，同时需要掌握材质的定义和属性。动画和渲染：掌握三维动画的基本原理和制作方法，了解渲染技术的基础知识。原创 2023-08-03 23:59:59 · 14907 阅读 · 0 评论 -
【愚公系列】2023年08月 WEBGL专题-2D特效-图形环状
一个环状图是一个圆形或半圆形图，它被划分成不同的扇形，每个扇形表示数据的一部分。这种图表常用于展示数据的相对比例或百分比，尤其适用于展示市场份额，人口统计数据等。环状图通常采用饼图的形式制作，只是多了一个中间空洞，所以又称为“圆环图”。原创 2023-08-08 15:32:57 · 15904 阅读 · 1 评论 -
【愚公系列】2023年08月 WEBGL专题-2D特效-小球融合
小球融合是一种物理现象，涉及到两个或更多球体在一起时融合成一个更大的球体。这个过程可以发生在不同的环境中，比如在熔融的金属中，或者在化学反应中。在熔融的金属中，小球融合可以通过热力学过程发生。当两个球体接触时，它们之间的热量和质量将开始交换。如果它们的温度足够高，那么它们的表面将会融化，并交错在一起形成一个新的大球。在化学反应中，小球融合通常是因为化学反应的反应物在一起时产生的化学反应。例如，两个小球可能包含不同的化学物质，而它们之间的反应将导致它们融合成一个不同的物质。原创 2023-08-05 16:41:32 · 14867 阅读 · 2 评论 -
【愚公系列】2023年08月 WEBGL专题-2D特效-彩色方块
彩色方块是不同颜色的方块组成的集合，可以用来做各种拼图、构建游戏、设计等等。它们可以有不同的形状，大小和材质，也可以有不同的用途，如教育，娱乐和展示。在设计方面，彩色方块可以用来创建各种图案和图像，以及建筑模型和家具。在游戏设计方面，彩色方块可以用来设计各种有趣的游戏，如益智游戏和场景模拟游戏。总之，彩色方块是一个非常灵活和有用的工具，可以在许多方面发挥作用。原创 2023-08-05 16:28:27 · 14695 阅读 · 0 评论 -
【愚公系列】2023年08月 WEBGL专题-2D特效-放大镜
放大镜是一种透明的光学镜片，经常用于放大视野中的细节。它有一个凸透镜或一个复合透镜，可以通过透镜的曲面来聚焦光线，使得物体在放大镜的另一端显得更大和更清晰。放大镜通常用于读取小字或细节，检查小物品或难以观察的事物，如昆虫、病毒等。WebGL可以用于实现放大镜效果，具体实现步骤如下：创建一个WebGL上下文，并设置canvas的宽度和高度。加载需要放大的图片，并创建WebGL纹理对象。可以使用gl.texImage2D函数将图片转换为纹理。编写着色器程序，包括顶点着色器和片元着色器。顶点着色器负责将顶点位置传原创 2023-08-04 20:43:47 · 14822 阅读 · 4 评论 -
【愚公系列】2023年08月 WEBGL专题-2D特效-图形圆角
图形圆角是指将图形的角转变为圆形弧线的效果。在设计中，使用图形圆角可以使图形看起来更加柔和、流畅、美观。常见的软件，例如Adobe Illustrator和Photoshop都有设置图形圆角的功能。在Illustrator中，可以在属性面板中直接设置圆角大小和角的数量，而在Photoshop中，则可以使用圆角矩形工具来创建带有圆角的矩形。另外，一些网页设计软件，如Sketch和Figma，也提供了便捷的图形圆角设置功能，让设计师可以轻松地创建出漂亮的页面元素。原创 2023-08-06 23:34:48 · 14903 阅读 · 12 评论 -
【愚公系列】2024年02月 WEBGL专题-纹理
在WebGL中，纹理是一种可以应用到三角形网格的图像。纹理可以用于创建具有更高细节和更复杂外观的表面效果，而不会增加几何多边形的数量。WebGL中的纹理是由图像数据组成的，可以由图片、视频或其他类型的数据生成。这些数据会被上传到WebGL的图形处理单元中，然后被映射到三角形网格上的每个顶点。当绘制时，WebGL会使用纹理数据插值计算每个像素点的颜色值，从而使表面看起来更加真实。WebGL支持多种纹理类型，包括2D纹理、立方体纹理、3D纹理等。原创 2023-08-03 23:06:53 · 14859 阅读 · 0 评论 -
【愚公系列】2024年02月 WEBGL专题-varying变量
WEBGL中的着色器变量包括以下种类：属性变量（Attribute Variables）：这些变量用于接收从应用程序中传递的顶点数据，比如顶点位置和颜色。统一变量（Uniform Variables）：这些变量是着色器中的全局变量，用于接收从应用程序中传递的值，比如投影矩阵，旋转矩阵等。纹理坐标变量（Texture Coordinate Variables）：这些变量用于指定在纹理图像中采样的位置。原创 2023-08-03 17:24:36 · 14836 阅读 · 2 评论 -
【愚公系列】2024年02月 WEBGL专题-动画效果
动画效果是指通过图形、图像或视频的运动、变换或其他视觉元素的改变来呈现出一种动态的视觉效果。它可以使图像或视频更加生动、吸引人，并能够更好地传达信息。动画效果广泛应用于电影、电视、广告、网页设计、游戏等领域，可以增强视觉体验和用户界面的交互性。常见的动画效果包括闪烁、平移、缩放、淡入淡出、旋转、颜色变化等。原创 2023-08-03 17:12:49 · 14880 阅读 · 2 评论 -
【愚公系列】2024年02月 WEBGL专题-图形矩阵组合
图形平移、缩放、旋转是计算机图形学中常用的操作，用来改变图像的位置、大小和方向。平移：平移是将图形在二维平面上沿着一个方向移动一段距离，通常用一个二维向量表示平移的距离。在计算机图形学中，可以通过修改坐标系来实现平移操作。缩放：缩放是将图形按照一定比例进行放大或缩小，在计算机图形学中，通常使用缩放矩阵来进行缩放操作。缩放矩阵中，对角线上的元素表示沿着坐标轴的缩放比例，非对角线上的元素表示斜线方向的缩放比例。旋转：旋转是将图形围绕某个点或轴旋转一定角度，通常使用旋转矩阵来实现。原创 2023-08-03 16:59:24 · 14802 阅读 · 0 评论