three.js Textures
映射模式
THREE.UVMapping
THREE.CubeReflectionMapping
THREE.CubeRefractionMapping
THREE.EquirectangularReflectionMapping
THREE.EquirectangularRefractionMapping
THREE.CubeUVReflectionMapping
这些常量定义了纹理贴图的映射模式。
UVMapping是默认值,纹理使用网格的坐标来进行映射。
其它的值定义了环境映射的类型。
CubeReflectionMapping 和 CubeRefractionMapping 用于 CubeTexture —— 由6个纹理组合而成,每个纹理都是立方体的一个面。 对于CubeTexture来说,CubeReflectionMapping是其默认值。
EquirectangularReflectionMapping 和 EquirectangularRefractionMapping 用于等距圆柱投影的环境贴图,也被叫做经纬线映射贴图。等距圆柱投影贴图表示沿着其水平中线360°的视角,以及沿着其垂直轴向180°的视角。贴图顶部和底部的边缘分别对应于它所映射的球体的北极和南极。
请查看示例:materials / envmaps 。
包裹模式
THREE.RepeatWrapping
THREE.ClampToEdgeWrapping
THREE.MirroredRepeatWrapping
这些常量定义了纹理贴图的 wrapS 和 wrapT 属性,定义了水平和垂直方向上纹理的包裹方式。
使用RepeatWrapping,纹理将简单地重复到无穷大。 使用 RepeatWrapping,纹理将简单地重复到无穷大。
ClampToEdgeWrapping是默认值,纹理中的最后一个像素将延伸到网格的边缘。
使用MirroredRepeatWrapping, 纹理将重复到无穷大,在每次重复时将进行镜像。
放大滤镜(Magnification Filters)
THREE.NearestFilter
THREE.LinearFilter
这些常量用于纹理的magFilter属性,它们定义了当被纹理化的像素映射到小于或者等于1纹理元素(texel)的区域时,将要使用的纹理放大函数。
NearestFilter返回与指定纹理坐标(在曼哈顿距离之内)最接近的纹理元素的值。
LinearFilter是默认值,返回距离指定的纹理坐标最近的四个纹理元素的加权平均值, 并且可以包含纹理的其他部分中,被包裹或者被重复的项目,具体取决于 wrapS 和 wrapT 的值,并在精确映射上。
缩小滤镜(Minification Filters)
THREE.NearestFilter
THREE.NearestMipmapNearestFilter
THREE.NearestMipmapLinearFilter
THREE.LinearFilter
THREE.LinearMipmapNearestFilter
THREE.LinearMipmapLinearFilter
这些常量用于纹理的minFilter属性,它们定义了当被纹理化的像素映射到大于1纹理元素(texel)的区域时,将要使用的纹理缩小函数。
除了NearestFilter 和 LinearFilter, 下面的四个函数也可以用于缩小:
NearestMipmapNearestFilter选择与被纹理化像素的尺寸最匹配的mipmap, 并以NearestFilter(最靠近像素中心的纹理元素)为标准来生成纹理值。
NearestMipmapLinearFilter选择与被纹理化像素的尺寸最接近的两个mipmap, 并以NearestFilter为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。
LinearMipmapNearestFilter选择与被纹理化像素的尺寸最匹配的mipmap, 并以LinearFilter(最靠近像素中心的四个纹理元素的加权平均值)为标准来生成纹理值。
LinearMipmapLinearFilter是默认值,它选择与被纹理化像素的尺寸最接近的两个mipmap, 并以LinearFilter为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。
请查看示例:materials / texture / filters。
类型
THREE.UnsignedByteType
THREE.ByteType
THREE.ShortType
THREE.UnsignedShortType
THREE.IntType
THREE.UnsignedIntType
THREE.FloatType
THREE.HalfFloatType
THREE.UnsignedShort4444Type
THREE.UnsignedShort5551Type
THREE.UnsignedInt248Type
这些常量用于纹理的type属性,这些属性必须与正确的格式相对应。详情请查看下方。
UnsignedByteType 是默认值。
格式
THREE.AlphaFormat
THREE.RedFormat
THREE.RedIntegerFormat
THREE.RGFormat
THREE.RGIntegerFormat
THREE.RGBAFormat
THREE.RGBAIntegerFormat
THREE.LuminanceFormat
THREE.LuminanceAlphaFormat
THREE.DepthFormat
THREE.DepthStencilFormat
这些常量用于纹理的format属性,它们定义了shader(着色器)将如何读取的2D纹理或者texels(纹理元素)的元素。.
AlphaFormat 丢弃红、绿、蓝分量,仅读取Alpha分量。
RedFormat 丢弃绿色和蓝色分量,只读取红色分量。
RedIntegerFormat 丢弃绿色和蓝色分量,只读取红色分量。纹素被读取为整数而不是浮点数。 (只能与 WebGL 2 渲染上下文一起使用)。
RGFormat 丢弃 alpha 和蓝色分量并读取红色和绿色分量。 (只能与 WebGL 2 渲染上下文一起使用)。
RGIntegerFormat 丢弃 alpha 和蓝色分量并读取红色和绿色分量。纹素被读取为整数而不是浮点数。 (只能与 WebGL 2 渲染上下文一起使用)。
RGBAFormat 是默认值,它将读取红、绿、蓝和Alpha分量。
RGBAIntegerFormat 是默认值,它读取红色、绿色、蓝色和 alpha 分量。纹素被读取为整数而不是浮点数。 (只能与 WebGL 2 渲染上下文一起使用)。
LuminanceFormat 将每个元素作为单独的亮度分量来读取。 将其转换为范围限制在[0,1]区间的浮点数,然后通过将亮度值放入红、绿、蓝通道,并将1.0赋给Alpha通道,来组装成一个RGBA元素。
LuminanceAlphaFormat 将每个元素同时作为亮度分量和Alpha分量来读取。 和上面LuminanceFormat的处理过程是一致的,除了Alpha分量具有除了1.0以外的值。
DepthFormat将每个元素作为单独的深度值来读取,将其转换为范围限制在[0,1]区间的浮点数。 它是DepthTexture的默认值。
DepthStencilFormat将每个元素同时作为一对深度值和模板值来读取。 其中的深度分量解释为DepthFormat。 模板分量基于深度+模板的内部格式来进行解释。
请注意,纹理必须具有正确的type设置,正如上一节所描述的那样。 请参阅WebGLRenderingContext.texImage2D 来获得有关详细信息。
DDS / ST3C 压缩纹理格式
THREE.RGB_S3TC_DXT1_Format
THREE.RGBA_S3TC_DXT1_Format
THREE.RGBA_S3TC_DXT3_Format
THREE.RGBA_S3TC_DXT5_Format
要使用CompressedTexture中的format属性, 需要获得WEBGL_compressed_texture_s3tc 扩展的支持。
通过这个扩展,这里的四种S3TC格式将可以使用:
RGB_S3TC_DXT1_Format:RGB图像格式的DXT1压缩图像。 RGBA_S3TC_DXT1_Format:RGB图像格式的DXT1压缩图像,Alpha仅具有是/否透明两个值。
RGBA_S3TC_DXT3_Format:RGBA图像格式的DXT3压缩图像,和32位RGBA纹理贴图相比,它提供了4:1的压缩比。
RGBA_S3TC_DXT5_Format:RGBA图像格式的DXT5压缩图像,它也提供了4:1的压缩比,但与DX3格式的不同之处在于其Alpha是如何被压缩的。
PVRTC 压缩纹理格式(PVRTC Compressed Texture Formats)
THREE.RGB_PVRTC_4BPPV1_Format
THREE.RGB_PVRTC_2BPPV1_Format
THREE.RGBA_PVRTC_4BPPV1_Format
THREE.RGBA_PVRTC_2BPPV1_Format
要使用CompressedTexture中的format属性,需要获得 WEBGL_compressed_texture_pvrtc 扩展的支持。
PVRTC通常只在具有PowerVR芯片的移动设备上可用,这些设备主要是苹果设备。
通过这个扩展,这里的四种PVRTC格式将可以使用:
RGB_PVRTC_4BPPV1_Format:4位模式下的RGB压缩,每4x4像素一个块。
RGB_PVRTC_2BPPV1_Format:2位模式下的RGB压缩,每8x4像素一个块。
RGBA_PVRTC_4BPPV1_Format: 4位模式下的RGBA压缩,每4x4像素一个块。
RGBA_PVRTC_2BPPV1_Format: 2位模式下的RGB压缩,每8x4像素一个块。
ETC 压缩纹理格式
THREE.RGB_ETC1_Format
THREE.RGB_ETC2_Format
THREE.RGBA_ETC2_EAC_Format
为了与 CompressedTexture 的格式属性一起使用,这些需要支持 WEBGL_compressed_texture_etc1 (ETC1) 或 WEBGL_compressed_texture_etc (ETC2) 扩展。
ASTC 压缩纹理格式
THREE.RGBA_ASTC_4x4_Format
THREE.RGBA_ASTC_5x4_Format
THREE.RGBA_ASTC_5x5_Format
THREE.RGBA_ASTC_6x5_Format
THREE.RGBA_ASTC_6x6_Format
THREE.RGBA_ASTC_8x5_Format
THREE.RGBA_ASTC_8x6_Format
THREE.RGBA_ASTC_8x8_Format
THREE.RGBA_ASTC_10x5_Format
THREE.RGBA_ASTC_10x6_Format
THREE.RGBA_ASTC_10x8_Format
THREE.RGBA_ASTC_10x10_Format
THREE.RGBA_ASTC_12x10_Format
THREE.RGBA_ASTC_12x12_Format
为了与 CompressedTexture 的格式属性一起使用,这些需要支持 WEBGL_compressed_texture_astc 扩展。
内部格式
'ALPHA'
'RGB'
'RGBA'
'LUMINANCE'
'LUMINANCE_ALPHA'
'RED_INTEGER'
'R8'
'R8_SNORM'
'R8I'
'R8UI'
'R16I'
'R16UI'
'R16F'
'R32I'
'R32UI'
'R32F'
'RG8'
'RG8_SNORM'
'RG8I'
'RG8UI'
'RG16I'
'RG16UI'
'RG16F'
'RG32I'
'RG32UI'
'RG32F'
'RGB565'
'RGB8'
'RGB8_SNORM'
'RGB8I'
'RGB8UI'
'RGB16I'
'RGB16UI'
'RGB16F'
'RGB32I'
'RGB32UI'
'RGB32F'
'RGB9_E5'
'SRGB8'
'R11F_G11F_B10F'
'RGBA4'
'RGBA8'
'RGBA8_SNORM'
'RGBA8I'
'RGBA8UI'
'RGBA16I'
'RGBA16UI'
'RGBA16F'
'RGBA32I'
'RGBA32UI'
'RGBA32F'
'RGB5_A1'
'RGB10_A2'
'RGB10_A2UI'
'SRGB8_ALPHA8'
'DEPTH_COMPONENT16'
'DEPTH_COMPONENT24'
'DEPTH_COMPONENT32F'
'DEPTH24_STENCIL8'
'DEPTH32F_STENCIL8'
注意:更改纹理的内部格式只会影响使用 WebGL 2 渲染上下文时的纹理。
为了与纹理的 internalFormat 属性一起使用,这些定义了纹理元素或纹素如何存储在 GPU 上。
R8 将红色分量存储在 8 位上。
R8_SNORM 将红色分量存储在 8 位上。组件按规范化存储。
R8I 将红色分量存储在 8 位上。该组件存储为整数。
R8UI 将红色分量存储在 8 位上。该组件存储为无符号整数。
R16I 将红色分量存储在 16 位上。该组件存储为整数。
R16UI 将红色分量存储在 16 位上。该组件存储为无符号整数。
R16F 以 16 位存储红色分量。该组件存储为浮点数。
R32I 以 32 位存储红色分量。该组件存储为整数。
R32UI 以 32 位存储红色分量。该组件存储为无符号整数。
R32F 以 32 位存储红色分量。该组件存储为浮点数。
RG8 分别以 8 位存储红色和绿色分量。
RG8_SNORM 分别以 8 位存储红色和绿色分量。每个组件都按规范化存储。
RG8I 将红色和绿色分量各存储 8 位。每个组件都存储为一个整数。
RG8UI 分别以 8 位存储红色和绿色分量。每个组件都存储为无符号整数。
RG16I 分别以 16 位存储红色和绿色分量。每个组件都存储为一个整数。
RG16UI 分别以 16 位存储红色和绿色分量。每个组件都存储为无符号整数。
RG16F 分别以 16 位存储红色和绿色分量。每个组件都存储为浮点数。
RG32I 分别以 32 位存储红色和绿色分量。每个组件都存储为一个整数。
RG32UI 以 32 位存储红色和绿色分量。每个组件都存储为无符号整数。
RG32F 以 32 位存储红色和绿色分量。每个组件都存储为浮点数。
RGB8 分别以 8 位存储红色、绿色和蓝色分量。 RGB8_SNORM 分别以 8 位存储红色、绿色和蓝色分量。每个组件都按规范化存储。
RGB8I 分别以 8 位存储红色、绿色和蓝色分量。每个组件都存储为一个整数。
RGB8UI 分别以 8 位存储红色、绿色和蓝色分量。每个组件都存储为无符号整数。
RGB16I 分别以 16 位存储红色、绿色和蓝色分量。每个组件都存储为一个整数。
RGB16UI 分别以 16 位存储红色、绿色和蓝色分量。每个组件都存储为无符号整数。
RGB16F 分别以 16 位存储红色、绿色和蓝色分量。每个组件都存储为浮点数
RGB32I 分别以 32 位存储红色、绿色和蓝色分量。每个组件都存储为一个整数。
RGB32UI 分别以 32 位存储红色、绿色和蓝色分量。每个组件都存储为无符号整数。
RGB32F 分别以 32 位存储红色、绿色和蓝色分量。每个组件都存储为浮点数
R11F_G11F_B10F分别在11位、11位、10位上存储红、绿、蓝分量。每个组件都存储为浮点数。
RGB565将红、绿、蓝分量分别存储在5位、6位、5位上。
RGB9_E5 分别以 9 位存储红色、绿色和蓝色分量。
RGBA8 分别以 8 位存储红色、绿色、蓝色和 alpha 分量。
RGBA8_SNORM 在 8 位上存储红色、绿色、蓝色和 alpha 分量。每个组件都按规范化存储。
RGBA8I 分别以 8 位存储红色、绿色、蓝色和 alpha 分量。每个组件都存储为一个整数。
RGBA8UI 以 8 位存储红色、绿色、蓝色和 alpha 分量。每个组件都存储为无符号整数。
RGBA16I 以 16 位存储红色、绿色、蓝色和 alpha 分量。每个组件都存储为一个整数。
RGBA16UI 以 16 位存储红色、绿色、蓝色和 alpha 分量。每个组件都存储为无符号整数。
RGBA16F 以 16 位存储红色、绿色、蓝色和 alpha 分量。每个组件都存储为浮点数。
RGBA32I 以 32 位存储红色、绿色、蓝色和 alpha 分量。每个组件都存储为一个整数。
RGBA32UI 以 32 位存储红色、绿色、蓝色和 alpha 分量。每个组件都存储为无符号整数。
RGBA32F 以 32 位存储红色、绿色、蓝色和 alpha 分量。每个组件都存储为浮点数。
RGB5_A1分别在5位、5位、5位、1位上存储红、绿、蓝、alpha分量。
RGB10_A2分别在10位、10位、10位和2位上存储红、绿、蓝、alpha分量。
RGB10_A2UI分别在10位、10位、10位和2位上存储红、绿、蓝、alpha分量。每个组件都存储为无符号整数。
SRGB8 分别以 8 位存储红色、绿色和蓝色分量。
SRGB8_ALPHA8 分别以 8 位存储红色、绿色、蓝色和 alpha 分量。
DEPTH_COMPONENT16 在 16 位上存储深度分量。
DEPTH_COMPONENT24 以 24 位存储深度分量。
DEPTH_COMPONENT32F 在 32 位上存储深度分量。该组件存储为浮点数。
DEPTH24_STENCIL8 分别在 24 位和 8 位上存储深度和模板组件。模板组件存储为无符号整数。
DEPTH32F_STENCIL8 分别在 32 位和 8 位上存储深度和模板组件。深度分量存储为浮点数,模板分量存储为无符号整数。
请注意,纹理必须具有正确的类型集以及正确的格式。有关格式、内部格式和类型的可能组合的更多详细信息,请参阅 WebGLRenderingContext.texImage2D 和 WebGL2RenderingContext.texImage3D。
有关内部格式的更多深入信息,您还可以直接参考 WebGL2 规范和 OpenGL ES 3.0 规范。
编码
THREE.LinearEncoding
THREE.sRGBEncoding
THREE.BasicDepthPacking
THREE.RGBADepthPacking
这些常量用于纹理的encoding属性。
如果编码类型在纹理已被一个材质使用之后发生了改变, 你需要来设置Material.needsUpdate为true来使得材质重新编译。
LinearEncoding是默认值。 除此之外的其他值仅在材质的贴图、envMap和emissiveMap中有效。
更多建议: