Lesson 8: Textures and Reflections

missdora commented 9 years ago

Wrap Modes:

screen shot 2015-08-02 at 12 20 39

missdora commented 9 years ago

Texture Magnification:

Nearest
Linear [default]

missdora commented 9 years ago

Texture Minification

mipmap pyramid: 多重映射金字塔
Anisotropy: 各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更多的内存、CPU、GPU时间

missdora commented 9 years ago

Premultiplied Alpha:

screen shot 2015-08-02 at 13 42 23

Premultiplied Alpha 最主要的不同點就是不只將透明資訊存在 Alpha Channel，還將影響到 R、G、B 的 Channel。

簡化網路上的一張說明圖來看就很清楚，如下：

所以如果顏色為#FFFF8060，透明度設為50%，那麼實際保存的會是#80803F1E，因此 R、G、B Channel 中的任意像素值都不會比 Alpha Channel 中的值來的大。

會這樣做的原因是因為常常在合成兩張圖時會需要將 Alpha Channel 複合到各個 Channel，因為使用Premultiplied Alpha的圖等於預先處理，可以節省時間，但是這種方式會有失真問題。

missdora commented 9 years ago

Particles:

screen shot 2015-08-02 at 14 00 10

missdora commented 9 years ago

Displacement and Normal Mapping:

参考： http://blog.csdn.net/weiwangchao_/article/details/7043087

Displacement Mapping -- 位移贴图: 是一种真正改变物体表面的方式。通过一种称为micropolygons（微多边形）tessellate（镶嵌）的技巧来实现真正的改变物体表面的细节。

具体流程是这样的。首先，根据屏幕的分辨率，在模型的可见面上镶嵌和最终象素尺寸相同的微多边形。这个过程叫做镶嵌。然后读取一张Bump贴图。根据表面的灰度确定高度。然后根据镶嵌所得到的多边形，沿着原先的表面法线方向移动微多边形。接着再为新的多边形确定好新的法线方向。此时，物体的表面确实已经真的增加出了细节。
Normal Mapping -- 法线贴图：每个像素的RGB分别存储该像素对应法线的XYZ分量，只要把法线的分量由（-1，1）映射成（0，255）就可了。观察一张法线图，以蓝色为主，是因为朝向图面外的法线（0，0，1）都被编码成（0，0，127）了（读入OpenGL后即(0,0,0.5)），而图上越红的地方表明法线越向右，越绿的地方表明法线越向上，就可以理解了。总体来说，就是一张紫蓝色的图。

screen shot 2015-08-02 at 14 38 37 screen shot 2015-08-02 at 14 40 05

left to right: the unmodified head, the head with just normal mapping, the head with both screen shot 2015-08-02 at 14 48 10

missdora commented 9 years ago

Light Mapping

missdora commented 9 years ago

Reflection Mapping

missdora commented 9 years ago

Refraction Mapping

missdora commented 9 years ago

Glossy Reflection

missdora commented 9 years ago

Environment Mapping: 环境贴图

Cubic Environment Mapping: diffuse, ambient

var path = txrpath + "media/img/cs291/textures/skybox/";
var urls = [path + "px.jpg", path + "nx.jpg",
        path + "py.jpg", path + "ny.jpg",
        path + "pz.jpg", path + "nz.jpg" ];

var textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;

var teapotMaterial = new THREE.MeshPhongMaterial(
    { color: 0x770000, specular:0xffaaaa, 
    envMap: textureCube } );

https://www.udacity.com/course/viewer#!/c-cs291/l-124106596/e-177160257/m-177160259

missdora commented 9 years ago

// for local display, change path to 'media/img/...', removing the initial '/' character
var texture = THREE.ImageUtils.loadTexture( '/media/img/cs291/textures/grass512x512.jpg' );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );
var solidGround = new THREE.Mesh(
    new THREE.PlaneGeometry( 10000, 10000, 100, 100 ),
    new THREE.MeshLambertMaterial( { map: texture } ) );
solidGround.rotation.x = - Math.PI / 2;

missdora commented 9 years ago

var tailTexture = THREE.ImageUtils.loadTexture( '/media/img/cs291/textures/feather.png' );
var tail = new THREE.Mesh(
    new THREE.PlaneGeometry( 100, 100, 1, 1 ),
    new THREE.MeshLambertMaterial(
        { map: tailTexture, side: THREE.DoubleSide, transparent: true } ) );

the transparent flag must be set to true, in order to use the texture's alpha

missdora commented 9 years ago

Specular Mapping

var texture = THREE.ImageUtils.loadTexture( '/media/img/cs291/textures/water.jpg' );
var material = new THREE.MeshPhongMaterial( { shininess: 50 } );
material.specularMap = texture;

https://www.udacity.com/course/viewer#!/c-cs291/l-124106596/e-177160251/m-177160253

missdora commented 9 years ago

Bump Map FIltering

https://www.udacity.com/course/viewer#!/c-cs291/l-124106596/e-177160254/m-177160255

因为取了两个向量的平均值之后，新的向量垂直于平面，所以山脊（或者说隆起的部分）消失

更好的Mipmap for normal map 算法 -- Mipmapping Normal Maps

missdora / Interactive-3D-Graphics-by-Udacity

Lesson 8: Textures and Reflections #3