纹理都是基于图片的，覆盖在几何体的表面，根据UV来覆盖
透明贴图： 黑白色 黑色消失
置换贴图： 顶点根据颜色上下移动
法线贴图： 顶点不会移动，不需要很多顶点，所以性能较好
环境遮挡贴图：添加假阴影 都是假的，需要第二组uv贴图
金属贴图： 用来反射光的，显示金属的部分，可以明显看出各个地方对光的反射不同，可以看出后面是什么东西
除了金属的部门其他地方都是黑色的，所以这些地方的反射不起作用
就需要配合粗糙度贴图一起使用
粗糙度贴图：
也可以自定义贴图
PBR原则：主要是金属度和粗糙度
模拟生活中产生真实的效果
如何加载图片 在webpack中可以当作模块引入
也可以直接放在 /public 目录下 根目录访问 名称也不会被修改
image.onload 也可以使用 addEventListener
我们不能直接使用 image 对象 我们需要将其转化为 纹理对象
会被转化成 另一种 GPU友好的格式(format)
const texture = new Texture(image) 如果此时image没有加载完
texture.needsUpdate = true 在加载完的地方写上即可
背后就是这么干的
也可以使用TextureLoader 来创建Texture 里面还可以写 加载错误的处理
loader.load(url, successFunc, onprogress, error)
loadingManage.onStart/onLoaded/onProgress/onError
UV 展开
纹理是怎么贴到 几何体上的，就是根据UV
每个顶点都必须在正方形的坐标
attribute里面的uv坐标就是用于定位texture
3d软件上或者自定义图形 需要自己设置UV
贴图变换
repeat / center / offset
mip mapping
创造一个一半大小的texture版本，再一半大小的版本，直到1*1大小的版本
这些texture将被送到GPU
单一纹理 幸运的是我们不会出现这种情况
如果纹理是长方形的，就会找出最大正方形
为什么GPU需要这些不同版本的texture
取决于我们能看到多少像素，这就是我们很近看纹理很模糊的原因
因为如果很小的几何体尺寸，我们不需要用到那么大的纹理去包裹
所以我们用的是很小的版本，这就是模糊的原因
minFilter 用于纹理的像素 小于渲染的像素，用于缩小物体时得到非常小的照片 6个值
NearestFilter 下面的几个都差不多，主要差别是第一个 放大也会很清晰
LinearFilter
NearestMipmapNearestFilter
NearMipLinearFilter
LinearMipNearestFilter
LinearMipmapLinearFilter 默认 区别在于模糊程度
因为很大的物体你在缩小的后，不需要看的很清楚
只需要放大的时候看的清楚就可以了，比较符合日常 性能不好
因为需要生成很多的小版本
当图片不是足够大的时候，放大物体，会显得模糊
当我们使用NearestFilter 我们不需要 mipMaping
不但得到更小的版本 colorMap.generateMipmaps = false 在设置minFilter之前
magFilter 放大的足够大时，显示会被拉伸 显示的非常模糊
NearestFilter 就会变得很清晰 性能好 不管是min/mag，因为不需要 mip Mapping
但是不太符合常规
LinearFilter 因为很小的物体，你也不需要看的很清楚
the weight 尽可能用小的图片
this size 尺寸 应该尽可能小 这样就可以尽快加载处理 这对GPU有好处
this data
jpg 压缩大 更小
png 压缩小 更大 还有一种格式大小特别小basis
可以对图片进行压缩 在tinyPng.com网站上
因为要mip mapping 所以尽量 大小是 2的次方，这样才不会resize你的图片
才能正常 mip mapping，这就造成的额外时间的浪费
512*512 / 1024*1024 / 512*2048
当你想用一张图片，代替color和alpha2个贴图的话，最好使用png
因为你可以合并不同的数据到一个texture中，通过使用红绿蓝和alpha
蓝(边框) 红(image) 绿(阴影) 地形 也可以类似这样做
当你使用法线贴图，最好使用 png，因为要反应各个地方的反射
数据要精确
substance3d.com designer 创建自己的texture