「已注销」-CSDN博客

原创搞懂JavaScript类型化数组

文章目录简介缓冲何为缓冲缓冲的作用ArrayBuffer接口定义静态方法DataView接口定义实例属性实例方法代码示例TypedArray取值范围接口定义创建方式实例特性静态属性实例方法实际案例总结简介所谓类型化数组就是一种类似数组的对象，它提供了一种用于访问原始二进制数据的机制，WebGL中经常会用到，并且必须用到，但这并不是说它的出现只是因为WebGL，随着Web程序的越来强大，类型化数...

2020-03-28 20:31:55 1865 1

翻译 WebGL - 示例从文件中加载并使用不同着色器

因为对不同的场景以及不同的材质需要使用不同的着色器，因此需要使用多个着色器，而不是单个，单个着色器是无法绘制出很复杂的场景，因为有的物体没有纹理而有的有纹理以及别的效果1、外部文件加载着色器着色器语言就是 GLSL格式的代码，我们可以先把顶点和片元着色器分别写在.glsl后缀名的文件中，如果你的编译器支持这种语法检测，那么代码就会有颜色，而不仅仅是字符串样式显示，尽管着色器代码本身就是字符串...

2019-07-18 13:55:26 1643

翻译 WebGL - 示例 α 混合透明效果

颜色的中的α分量控制着颜色的透明度，在webgl实现透明效果需要用到α混合，因为webgl已经内置了该功能因此开启即可示例：透明混合开启混合开启混合功能 - gl.enable(gl.BLEND)指定混合函数 - gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)混合函数在进行α混合时，实际上webgl用到了两个颜色，即源颜色和 ...

2019-07-12 15:37:40 1606

翻译 WebGL - 示例绘制圆形点

之前绘制的点都是正方形的，类似一个像素点，那怎么才能把方点绘制成圆点，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元都会经过片元着色器处理，直接绘制就是方形的点，要绘制圆形的点就需要把多余的片元给削去;将矩形削成圆形需要知道每个片元在光栅化过程中的坐标，在片元着色器中通过 **内置变量 gl_FragCoord**来访问片元的坐标，还可以通过另一个 **内...

2019-07-08 17:05:58 2093 3

翻译 WebGL - 示例添加雾化效果

在三维图形学中，雾化用来描述远处的物体看上去较为模糊的现象。示例：雾化效果实现雾化的方式有很多种，这里最简单的一种就是线性雾化，在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高，线性雾化有起点和终点，起点表示雾化开始之处，终点表示完全雾化之处，两点之间某一点的雾化程度与该点的距离呈线性关系比终点更远的点完全雾化了，即完全看不到东西，某一点的雾化的程度可以定义...

2019-07-08 14:27:08 1256

翻译 WebGL - 示例点击物体改变背景色

再threejs中是通过射线检测THREE.Raycaster()这个对象，来获取点击的对象，这个示例是走了个捷径，通过对比物体的颜色和点击处的像素值，来检测是否点击了物体，下面是示例效果示例：点击物体改变背景色，并实时检测旋转角度主要示例代码<!DOCTYPE html><html lang="en"><head> <meta cha...

2019-07-04 17:55:14 1338

翻译 WebGL - 示例通过鼠标操作物体

案例实现功能如下：鼠标左右键点击实现旋转滑动滑轮实现缩放首先物体的旋转是通过对模型矩阵的旋转计算modelMatrix.rotate(angle, x, y, z)这个方法可以让物体绕某个轴进行旋转多少度，进而变换顶点坐标，normalMatrix、mvpMatrix...都是可以进行一些列的矩阵变换的，计算过后在清空颜色缓存以及深度缓存，重新绘制页面；因此使用鼠标去控制物体就是通过监...

2019-07-03 11:05:55 2417

翻译 WebGL - 着色器初始化流程

之前对着色器的初始化都是使用的initShaders()这个方法，这个的代码在最后，其内部分执行细节没有去清晰的了解过，下面做进一步的了解和分析，才能更深入的了解webgl的原理initShaders()方法的主要作用是编译GLSL ES代码，创建和初始化着色器，以便供WebgGL使用，具体初始化分为以下七步；1、创建着色器对象gl.createShader()2、向着色器对象中填充着色器...

2019-07-01 17:44:43 1174

翻译 WebGL - 光照原理

1、光照原理现实世界中，依据光源和方向，光源照射到物体上时，发生了两个重要的现象；物体不同的表面明暗程度不一致；物体向地面投下了影子；三围图形学术语中着色的真正含义是：根据光照条件重建 “物体各表面明暗不一的效果”的过程，着色器最初被发明出来就是为了重建光照产生的明暗现象；在讨论着色之前需要考虑一下两件事：发出光线的光源的类型；物体表面如何反射光线；2、光源类型平行光：...

2019-06-27 18:47:34 1044

翻译 WebGL - 可视空间，深度处理，顶点索引

研究内容大概如下：以用户视角进入三围世界控制三围可视空间裁剪处理物体的前后关系绘制三围的立方体上面会讲到如何使用模型矩阵、视图矩阵、以及该投影矩阵的使用，并且最后会绘制一个三维的立方体；1、立方体由三角形构成如图所示，三维物体都是由三角面构成的，因此逐个的去绘制三角形就能绘制出三维物体。但是三维跟二维有一个显著的区别，绘制二维只需要考虑x,y轴，而绘制三维物体的时候，需要考虑...

2019-06-21 16:37:23 2252

翻译 WebGL - GLSL_ES 着色器语言

1、概述着色器语言和C/C++很类似，拥有C语言的语法规范，还有C++的结构类型，GLSL ES语言是在OpenGL的着色器语言GLSL基础上，删减一部分后形成的，GLSL ES的目标平台是电子产品和嵌入式设备。着色器语言开头必须有一个入口main()函数；2、数据类型支持两种数据类型数值类型：整数、浮点数，没有小数点的是整数，有的则是浮点数；布尔值类型：true和false；...

2019-06-11 14:28:08 1075

翻译 WebGL - 纹理映射

1、纹理映射纹理映射：纹理映射就是将一张图像映射大盘几何体表面上去，此时这样图片就称为纹理贴图；纹理映射的作用，就是根据纹理图像，为之前光栅化后的每一个片元涂上合适的颜色，组成纹理图像的像素又被称为纹素，每一个纹素的颜色都使用 RGB或者 RGBA格式编码纹素可以简单的理解为一个像素2、纹理映射四步1、准备纹理图像2、配置集合图形纹理映射方式3、加载和配置纹理图像4、从纹理...

2019-05-30 09:27:23 2816 2

翻译 WebGL - 颜色和纹理

首先，将顶点坐标传入着色器，需要遵循以下几步1、创建缓冲区对象；2、将缓冲区对象绑定到target上；3、将顶点坐标数据写入缓冲区对象；4、将缓冲区对象分配给对应得 attribute变量；5、开启 attribute变量；1、非坐标数据传入顶点着色器所以将多个顶点相关得数据通过传冲去对象传入顶点着色器，其实只需要每种数据重复以上步骤即可；首先，需要再顶点着色器中定义可以接收顶...

2019-05-16 13:27:34 813

翻译 WebGL - 顶点数据矩阵变换

1、Matrix4函数库此处需要了解一个矩阵函数库cuon-matrix.js这是《webgl编程指南》作者写的一个库，它封装了一些简单易用的方法，来实现一些复杂繁琐的矩阵计算操作；代码地址：https://gitee.com/ithanmang/webgl-notes具体方法如下表：Matrix4对象有两种方法，一种是名称中带有set和一种不带set的；包含set的 – 会根据...

2019-04-26 16:47:25 1137

翻译 WebGL - 简单的移动旋转变换

1、平移例如将一个顶点(x0, y0, z0 )进行平移到(0.5, 0.5, 0.5)的话，就只需要整个顶点的三个方向同时加上另外一个顶点；最终位置 = (x0 + 0.5, y0 + 0.5, z0 + 0.5)所以如果将一个三角形进行平移的话，就需要逐个顶点进行操作，加上一个平移的值；只需要在顶点着色器中为顶点坐标的每个分量加上一个常量就可以平移的操作；1. 具体着色器代码//...

2019-04-26 14:46:42 518

翻译 WebGL - 七种基本图形的绘制

1、七种基本绘制方式通过gl.drawArrays(mode, girst,count)方法，可以绘制七种基本图形，如下表所示基本图形参数描述点gl.POINTS一系列的点，绘制在 v0 ,v1,v2....线段gl.LINES一系列单独的线段，绘制在(v0, v1),(v2,v3)...，若点个数使奇数，则最后一个点被忽略线条gl.LINE_STR...

2019-04-25 17:29:31 6630

翻译 WebGL - 通过缓冲区对象绘制多个点的过程

1、绘制多个点的过程绘制一个点的时候，webgl程序的执行过程是这样的：获取 webgl 绘图上下文初始化着色器设置 canvas 背景色清空 canvas开始绘制上面是绘制一个点的过程，但是如果想要绘制多个点话，就需要多次重复上面的步骤吗？webgl提供了一种机制可以向缓存中一次存储多个顶点的信息，然后只需要循环的调用着色器程序即可，而不需要循环重复上面的步骤。因此上面的...

2019-04-25 16:29:40 694

翻译 WebGL - 通过 js 程序向 attribute 和 uniform 变量赋值

有两种方式可以通过js程序向着色器传递数据通过 attribute变量 – 传输的是于顶点相关的数据；通过 uniform变量 – 传输的是对所有顶点都相同或者于顶点无关的数据；通过上一个程序，在webgl中绘制了一个顶点，但是顶点的位置不能通过js程序来控制，下面通过js给顶点着色器传递数据来控制顶点的位置。1、在顶点着色器中生命 attribute 变量// 顶点着色器// 声...

2019-04-25 11:01:01 2195 1

翻译 WebGL - 将着色器代码写在 script 标签中

写着色器的时候以字符串的形式去写的话，没有颜色，而且很容易写错，下面我们可以将着色器代码写在script标签中，然后再获取标签中的text字符串就可以获取着色器程序如下所示，如果你的编辑器装了支持GLSL语言的插件的话，也许会有颜色显示，如果没有的话可能没有颜色提示<script id="vertexShader" type="x-sha...

2019-04-24 15:46:26 1530

翻译 WebGL - 着色器简单使用

1、着色器webgl绘图必须依赖于着色器，这是一种新的绘图机制，它可以灵活而且强大的绘制二维和三维图形。首先，需要了解以下什么是着色器着色器代码写在javaScript中，以字符串的形式存在。webgl需要两种着色器代码：顶点着色器片元着色器1.1 顶点着色器首先来看一下代码// 顶点着色器var vertex_shader_source = 'void main...

2019-04-24 15:30:45 3445

翻译 WebGL - 清空 canvas 绘图区域(颜色缓存区)

1、canvas 的坐标系统canvas坐标系统横轴是x轴，纵轴是y轴，原点是在左上角，绘图区域是指定的width和height单位是像素注意：绘制三维图形的单位也是像素2、创建一个宽高512的canvas<canvas id="webgl" width="512" height="512"></canvas>3、获取 webgl 绘图上下文对象va...

2019-04-24 13:08:48 3865 1

翻译 WebGL - 概述和 canvas 基础示例

1、webgl概述1、概述是一项用来在网页上绘制和渲染辅助三维图形，并允许用户交互的技术，它结合js和h5能更容易和直接的在互联网上展示产品和示例。开发者不需要具备C或者C++编程语言，仅仅需要会简单的HTML和JS脚本知识就可以上手。webgl基于浏览器不是基于操作系统，因此不需要安装插件和库，就可以运行webgl程序。2、起源webgl起源与OpenGL ES 2.0，OpenGL...

2019-04-24 10:51:32 758

原创 Three.js - 通过 AnimationMixer混合器解析骨骼动画

1、骨骼动画原理骨骼包括骨架和骨头，在three.js中，骨骼模型是SkinnedMesh就是具有骨架Skeleton和骨头bones的网格Mesh，骨骼网格可以控制几何体Geometry的顶点生成骨骼动画。因此，要实现骨骼动画就需要先创建骨架和骨头，这一般可以通过3D建模软件自动生成，因此three.js只需要负责解析即可，但是也需要了解骨架和骨头所组成的数据结构。1.1、创建一个手臂1...

2018-11-16 16:02:17 2045

原创 Three.js - KeyframeTrack 帧动画

THREE.KeyframeTrack是用来设置动画的对象，以一定的时间过渡到一定值的对象。1、KeyframeTrack 对象1.1、构造函数KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )name、一个帧动画的标识符，指以这个标识进行帧动画times、时间数...

2018-11-14 11:03:01 7332 2

原创 Three.js - 设置纹理offset偏移模拟箭头线性流动

1、效果通过循环 texture的offset属性值，可以实现，类似字幕的运动，以及箭头的线性流动等效果2、示例地址https://ithanmang.gitee.io/threejs/home/201810/20181030/01-texture-offset偏移.html3、相关属性该示例使用的是平面网格，然后加上材质贴图，设置纹理重复覆盖THREE.RepeatWrapping然...

2018-10-30 10:37:01 7152 5

原创 Three.js - OrbitControls 轨道控件的围绕目标 target 参数

1、简介THREE.OrbitControls是最常用的用来控制相机的控件，并且也是官方文档中唯一有介绍的控件。轨道控制允许摄像机围绕一个目标轨道运行这个目标默认为THREE.Vector3()，也就是(0, 0, 0)世界坐标的原点。可以通过THREE.OrbotControls的实例对象来修改.target = new THREE.Vector3(...) 设置控件...

2018-09-17 12:34:55 9299

原创 Three.js - 用 VideoTexture 视频输出作为纹理

1、示例示例 http://ithanmang.com/threeJs/home/201809/20180910/02-video-texture.html 效果 2、实现步骤2.1、添加 video 标签&amp;amp;lt;video id=&amp;quot;video&amp;quot; autoplay loop muted&amp;amp;gt; &amp;amp;lt;sourc

2018-09-10 17:49:09 6662 6

原创 Three.js - 通过透明渲染设置背景图片

1、示例示例 http://ithanmang.com/threeJs/home/201809/20180910/01-canvas-background-image.html 效果 2、实现步骤2.1、背景图 2.2、设置背景此处是给body元素设置了背景图body { margin: 0; overflow: hidden; /* 溢出隐藏 */...

2018-09-10 14:10:59 8955

原创 Three.js - 设置折射贴图比率 refractionRatio 加环境贴图实现反射效果

通过给物体设置环境贴图envMap可以实现虚假的反射效果，通过设置CubeCamera可以实现动态的反光，设置材质的refractionRatio 属性可以实现透明反射的效果。1、示例示例 http://ithanmang.com/threeJs/home/201809/20180907/03-refraction-texture.html 效果 2、实现步骤2.1、refr...

2018-09-07 17:59:34 3228

原创 Three.js - 通过 Reflector.js 创建镜面反射

类似境面反射可以使用CubeCamera但是CubeCamera更适用于创建物体自身对环境的反射，但是如果想要创建一面镜子的话使用CubeCamera会难调试所反射物体的位置，而且镜面中的物体不会随着控制器的缩放而变动。使用Reflector.js可以很容易的创建一面镜子，并且镜子中的对象会依据发光体的缩放而缩放，而且可以调试镜子的发光色，类似墨镜的效果。1、示例示例 http://...

2018-09-07 16:05:43 4480

原创 Three.js - 设置高光贴图

通过高光贴图可以实现部分区域反光，像素值为白色的地方会发光，黑色的不会反光，高光的颜色默认为灰黑色。1、示例示例 http://www.ithanmang.com/threeJs/home/201809/20180906/02-specular-texture.html 效果可以通过调节颜色，来让海洋反射出不同的色彩2、实现步骤2.1、设置材质的specularMa...

2018-09-06 16:55:42 3815

原创 Three.js - 使用 CubeCamera 创建反光效果

使用环境贴图可以创建虚假的反光效果，但是是静态的，并且不能实现镜面反射的效果，镜面所反射的物体是动态的，可以通过THREE.CubeCamera来实现镜面反射的效果。1、示例示例 http://ithanmang.com/threeJs/home/201809/20180906/01-envMap-cubeCamera-texture.html 效果可以看到，不仅可以反射环...

2018-09-06 15:14:23 2609 1

原创 Three.js - 使用环境贴图创建虚假的反光效果

计算环境反光会非常耗费CPU，而且通常会使用光线追踪算法，在three.js中通过环境贴图envMap来伪装反光，并且可以将环境贴图用到指定的对象上。1、示例示例 http://ithanmang.com/threeJs/home/201809/20180905/07-envMap-texture.html 效果 2、使用步骤2.1、创建一个全景的贴图scen...

2018-09-05 17:32:18 4814 2

原创 Three.js - 使用光照贴图 lightMap 创建假阴影

Material的lightMap属性，是光照贴图，使用光照贴图可以模拟出真实的阴影效果，但是阴影的位置不能随着随着物体的移动而移动。1、示例示例 http://ithanmang.com/threeJs/home/201809/20180905/06-lightMap-texture.html 效果下面的阴影是通过光照贴图加载进来的，如下面的关照贴图 2、使用步骤2...

2018-09-05 16:21:04 2296 1

原创 Three.js - 使用法向贴图 normalMap 创建更加细致的凹凸皱纹

法向贴图保存的不是每个像素的高度，而是像素的法向量，通过很晒的点和面就可以创建出细节非常丰富的模型。1、示例示例 http://ithanmang.com/threeJs/home/201809/20180905/05-normalMap-texture.html 效果 2、normalMap属性normalMap： RGB值影响每个像素片段的表面法线，并改变颜色的颜色，法线...

2018-09-05 15:31:18 1677

原创 Three.js - 使用 bumpMap 凹凸贴图创建皱纹

凹凸贴图用于为材质增加厚度，在三维环境中使表面产生凹凸不平的视觉效果。它主要的原理是通过改变表面光照的法线。凹凸贴图是一种灰度图像素的密集程度定义的是凹凸的程度。凹凸贴图只包含像素的相对高度，不包含倾斜方向的信息，凹凸贴图不会改变物体的形状。1、示例示例 http://ithanmang.com/threeJs/home/201809/20180905/04-bump-texture...

2018-09-05 15:00:11 1810

原创 Three.js - 加载 TGA 格式的纹理

1、TGA格式TGA（Targa）格式是计算机上应用最广泛的图象格式。在兼顾了BMP的图象质量的同时又兼顾了JPEG的体积优势。并且还有自身的特点：通道效果、方向性。在CG领域常作为影视动画的序列输出格式，因为兼具体积小和效果清晰的特点。 TGA的结构比较简单，属于一种图形、图像数据的通用格式，在多媒体领域有很大影响，是计算机生成图像向电视转换的一种首选格式。 TGA...

2018-09-05 14:07:18 4978

原创 Three.js - 加载 DDS 格式的纹理

1、DDS纹理格式首先，图片转换成dds格式，占用磁盘会变大，但是转换成dds格式之后架加载到内存和显存的占用量会变小。1.1、dds格式简介DDS格式要追述到S3(Silicon &amp; Software Systems)公司提出的一种纹理压缩格式S3TC(S3 Texture Compression)，其目的是通过对纹理的压缩, 以达到节约系统带宽并提高效能的目的.。S3T...

2018-09-05 11:53:53 4702

原创 Three.js - 加载纹理并应用到网格

纹理最基础的用法就是在材质上贴图，将图片通过THREE.TextureLoader加载，然后设置为材质的map属性。1、示例http://ithanmang.com/threeJs/home/201809/20180905/01-basic-texture.html 效果 2、Texture2.1、简介Texture 创建一个纹理来应用于一个表面或者作为一个反射或折射...

2018-09-05 11:23:16 1872 2

原创 Three.js - 使用骨骼和蒙皮 SkinnedMesh 制作动画

变形动画非常简单，知道所有顶点的位置，然后将每个顶点从一个位置迁移到下一个位置即可。骨骼和蒙皮则比较复杂，使用骨骼来做动画时，移动一下骨骼需要迁移附着在骨骼上的皮肤以及一些列的顶点的变动。1、示例示例 http://ithanmang.com/threeJs/home/201809/20180904/04-bones-manually.html 效果这是一个手的模型，文件中...

2018-09-04 17:17:50 2256 1

glsl_fire.rar

CMake_v3.11.3.zip

空空如也