HTML5在线教程和技术博客

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的基本运算的概念及其用途。点积(Dot Product)点乘比较简单,是相应元素的乘积的和:V1( x1, y1, z1)·V2(x2, y2, z2) = x1*x2 + y1*y2 + z1*z2;注意结果不是一个...

    阅读全文 收藏 评论 (0) 阅读 (4012) 2016-07-31 21:18:08  
  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可见的”。Depth map中像素点记录的深度值为lenth1;然后从视点出现,计算物体顶点v到视点的距离,记为lenth2;比较二者大小,来确定“v”是否被遮挡。该术语的同义...

    阅读全文 收藏 评论 (1) 阅读 (5116) 2016-07-25 08:58:42  
  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域。Verlet算法要解决的问题是,给定粒子t时刻的位置r和速度v,得到t+dt时刻的位置r(t+dt)和速度v(t+dt)。最简单的方法是前向计算(考虑当前和未来)的速度位移公式...

    阅读全文 收藏 评论 (0) 阅读 (5238) 2016-07-21 13:52:11  
  • 纹理基础知识和过滤模式详解

    1、 为什么在纹理采样时需要texture filter(纹理过滤)。
    我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixel不一定对应texture上的采样中心texel),大小也不一定一至。当纹理大于三维图形表面时,导至一个像素被映射到许多纹理像素上;当维理小于三维图形表面时,许多个...

    阅读全文 收藏 评论 (0) 阅读 (6073) 2016-07-16 15:54:06  
  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数,定义如何将纹理图像的像素点映射到模型网孔上。这可以分为两步来完成:定义UV坐标UV Mapping指将Bitmap的像素映射到Mesh上的顶点。UV坐标定义...

    阅读全文 收藏 评论 (0) 阅读 (4748) 2016-07-15 22:41:57  
  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作: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...

    阅读全文 收藏 评论 (1) 阅读 (5479) 2016-07-06 08:36:56  
  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoader两个类来实现,这也提供了操作的灵活性。下述代码中首先使用MTLLoader加载egg.mtl材料文件,然后把该材料设置给一个OBJLoader对象,以便在加载obj模型的时候进...

    阅读全文 收藏 评论 (2) 阅读 (8328) 2016-06-29 00:31:57  
  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星的Gear VR以及HTC Vive。其中Vive和DK2都是高端专业VR设备,Gear VR属于中端设备,CardBoard是入门级的VR设备。现在体验VR,一般你需要在VR设备的前方加上一个手...

    阅读全文 收藏 评论 (0) 阅读 (6932) 2016-06-18 14:42:32  
  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这样就要求每张贴图长度和宽度应该是4的倍数。图像如同一般的做法按照行列顺序存放这些4X4的纹理单元块(texel blocks),每个texel blocks被看成是一个图像的“像素...

    阅读全文 收藏 评论 (1) 阅读 (6348) 2016-06-15 14:16:52  
  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于RGB图像。CSS3中也引入了blend模式,对照Photoshop中的实现,有助于我们深入理解该方法的使用。Opacity 不透明度C=d*A+(1-d)*B
    相对于不透...

    阅读全文 收藏 评论 (1) 阅读 (6022) 2016-06-15 12:15:03