-
动效
文章
模型
-
-
-
Verlet算法是经典力学（牛顿力学）中的一种最为普遍的积分方法，被广泛运用在分子运动模拟（Molecular Dynamics Simulation），行星运动以及织物变形模拟等领域。Verlet算法要解决的问题是，给定粒子t时刻的位置r和速度v，得到t+dt时刻的位置r(t+dt)和速度v(t+dt)。最简单的方法是前向计算（考虑当前和未来）的速度位移公式...
-
1、 为什么在纹理采样时需要texture filter（纹理过滤）。
我们的纹理是要贴到三维图形表面的，而三维图形上的pixel中心和纹理上的texel中心并不一至（pixel不一定对应texture上的采样中心texel），大小也不一定一至。当纹理大于三维图形表面时，导至一个像素被映射到许多纹理像素上;当维理小于三维图形表面时，许多个...
-
我们在纹理滤镜一文中已经说明了2个重要的纹理参数，用来定义对象缩放时纹理的处理方式：GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数，定义如何将纹理图像的像素点映射到模型网孔上。这可以分为两步来完成：定义UV坐标UV Mapping指将Bitmap的像素映射到Mesh上的顶点。UV坐标定义...
-
通用操作
停止当前操作：ESC
快捷搜索：SPACE撤销：ctrl+z重做：ctrl+shift+z渲染：F12
单选：鼠标右键（RMB）全选：A
框选：B
刷选：C
套选：CTRL+鼠标左键（LMB）
删除：X/Delete
复制：Shift+D
添加：Shift+A取消：Esc, RMB确认：Return, LMB界面操作F5: 工具栏位置对称切换
SH...
-
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中，以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件，需要结合OBJLoader和MTLLoader两个类来实现，这也提供了操作的灵活性。下述代码中首先使用MTLLoader加载egg.mtl材料文件，然后把该材料设置给一个OBJLoader对象，以便在加载obj模型的时候进...
-
什么是WebVR这是一个实验性的JavaScript API，提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星的Gear VR以及HTC Vive。其中Vive和DK2都是高端专业VR设备，Gear VR属于中端设备，CardBoard是入门级的VR设备。现在体验VR，一般你需要在VR设备的前方加上一个手...
-
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的，每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这样就要求每张贴图长度和宽度应该是4的倍数。图像如同一般的做法按照行列顺序存放这些4X4的纹理单元块(texel blocks)，每个texel blocks被看成是一个图像的“像素...
-
在Photoshop软件中，混合是将两个图层的色彩值进行合成，从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于RGB图像。CSS3中也引入了blend模式，对照Photoshop中的实现，有助于我们深入理解该方法的使用。Opacity 不透明度C=d*A+(1-d)*B
相对于不透...
-
正是因为有了光，世界才能被我们看见，在3D的世界里，光照给物体带来真实的视觉感受。当光照射在某一表面上时，它可能被吸收、反射或投射。其中入射到表面上的一部分光能被吸收并转化为热，其余部分被反射或投射。正是反射和透射使得物体可见。如果入射光全部被吸收，物体将不可见，该物体称为黑体。光能中被吸收、反射或透...
-
WebGL中使用纹理贴图来实现细腻的物体表面观感，其中一个重要的参数是纹理滤镜（Texture Filter）。
这个参数用来处理当对象出现缩放时，纹理如何处理中间点或被压缩的点。我们知道纹理在使用中一个经典问题是会出现走样，滤波器就是用来实现纹理反走样的技术。gl.bindTexture(gl.TEXTURE_2D,>textures[0]);
gl.texIma...
-
我们在炎炎夏日，或者在火堆旁，经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场合。首先让我们来看看如何能画出一个普通的图像，然后看看我们如何能使它变形。使用WebGL绘制图像在踏得网之前的教程中，我们已经说明过，WebGL可以通过纹理对象...
-
CSS3中引入的clip-path（裁剪路径）属性是一个很强大的特性。
clip-path的含义如下图所示，好比剪纸一样，你用剪刀沿着某条路径把目标对象（图像或元素）裁剪成我们想要的形状。
clip-path支持多种方式，如基本的图形（多边形polygon(), 圆形circle(), inset() (用来定义内部矩形), 和椭圆 ellipse()），也支持直接...
