Three.js texture webgl api 详解

纳铭
811 阅读5分钟

blog.csdn.net/qq_30100043…

WebGL1.0 常用API及参数 (juejin.cn)

WebGL API

  • 流程
    • createTexture创建
    • bindTexture使用
    • texParameterf*4设置
    • texImage2D设置
    • generateMipmap设置
    • glUniform1i(glGetUniformLocation(ourShader.ID, "texture1"), 0);赋值
  • 使用
    • activeTexture
    • bindTexture
  • API
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture1);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture2);

// 将图像RGB颜色值每一个分量乘以A 默认false
const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241; 

// 创建纹理对象以存储纹理图像
WebGLTexture? createTexture();

// pixelStorei 中参数pname取值
const GLenum UNPACK_FLIP_Y_WEBGL            = 0x9240; // 对图像进行Y轴反转，默认false
// 使用 pname 和 param 指定的方式加载得到的图像
void pixelStorei(GLenum pname, //上面
                 GLint param); //非0为true、0为false 必须是整数 一般是1
				 
// activeTexture 方法使用的枚举常量
const GLenum TEXTURE0                       = 0x84C0;
const GLenum TEXTURE1                       = 0x84C1; //gl.TEXTURE1 =gl.TEXTURE0+1
const GLenum TEXTURE31                      = 0x84DF;
void activeTexture(GLenum texture);  //上面

//target 参数
const GLenum TEXTURE_2D                     = 0x0DE1; //平面纹理
const GLenum TEXTURE_CUBE_MAP               = 0x8513; //立方体纹理
// 开启 texture 指定的纹理对象，并将其绑定到 target 上。 
// 如果已经通过 gl.activeTexture 激活了某个纹理单元，则纹理对象也会绑定到这个纹理单元上
void bindTexture(GLenum target, //上面
                 WebGLTexture? texture); //createTexture
				 
// pname 参数
const GLenum TEXTURE_MAG_FILTER             = 0x2800;
const GLenum TEXTURE_MIN_FILTER             = 0x2801;
const GLenum TEXTURE_WRAP_S                 = 0x2802;
const GLenum TEXTURE_WRAP_T                 = 0x2803;
//param 参数
const GLenum NEAREST                        = 0x2600;
const GLenum LINEAR                         = 0x2601;
const GLenum NEAREST_MIPMAP_NEAREST         = 0x2700;
const GLenum LINEAR_MIPMAP_NEAREST          = 0x2701;
const GLenum NEAREST_MIPMAP_LINEAR          = 0x2702;
const GLenum LINEAR_MIPMAP_LINEAR           = 0x2703;
const GLenum REPEAT                         = 0x2901; // 平铺式的重复纹理
const GLenum CLAMP_TO_EDGE                  = 0x812F; // 镜像对称式的重复纹理
const GLenum MIRRORED_REPEAT                = 0x8370; // 使用纹理图像的边缘值
// 配置纹理，将param值赋给绑定到目标的纹理对象的pname参数上
void texParameterf(GLenum target,//上面
                   GLenum pname,   //上面
                   GLfloat param); //上面
void texParameteri(GLenum target, GLenum pname, GLint param);

// texImage2D 的 internalformat 参数
const GLenum ALPHA                          = 0x1906; //只读取Alpha通道。
const GLenum RGB                            = 0x1907; //读取RGB三个通道
const GLenum RGBA                           = 0x1908; //读取RGBA四个通道。
const GLenum LUMINANCE                      = 0x1909; //把每个通道视为亮度，alpha取1.0。
const GLenum LUMINANCE_ALPHA                = 0x190A; //每个通道视为 亮度/alpha。
// texImage2D 的 type 参数
const GLenum UNSIGNED_BYTE;   //RGBA每个通道使用8位。
const GLenum UNSIGNED_SHORT_4_4_4_4         = 0x8033; // RGBA RGBA每个通道使用4位。
const GLenum UNSIGNED_SHORT_5_5_5_1         = 0x8034; // RGBA 红色5位、绿色5位、 蓝色5位、alpha用1位。
const GLenum UNSIGNED_SHORT_5_6_5           = 0x8363; // RGB 红色5位、绿色6位，蓝色5位。
// 将 source 指定的图像分配给绑定到目标上的纹理对象
void texImage2D(GLenum target, //上面
                GLint level,   //传入0 （该参数是为金字塔纹理准备的）
                GLint internalformat, //图像的内部格式 见上枚举
                GLenum format,  //format 纹理数据的格式 必须使用与 internalformat 相同的值
                GLenum type, //纹理数据的类型
                TexImageSource source); //source 包含纹理图像的Image对象
				
// 为 WebGLTexture 对象生成一组mip纹理映射。
void generateMipmap(GLenum target);//上面

// 使用texture删除纹理对象
void deleteTexture(WebGLTexture? texture); //createTexture

THREEJS

mapping

  • 如何将图像应用到对象。默认为 UV贴图（THREE.UVMapping）类型，这里U,V 坐标用来应用映射，要求是单个纹理。
  • 其他类型包括：
  • THREE.CubeReflectionMapping：立方体反射映射
  • THREE.CubeRefractionMapping：立方体折射映射
  • THREE.EquirectangularReflectionMapping：圆柱反射映射
  • THREE.EquirectangularRefractionMapping：圆柱折射映射
  • THREE.SphericalReflectionMapping：球面反射映射

wrapS和wrapT

  • THREE.ClampToEdgeWrapping：夹边。超过1.0的值被固定为1.0。超过1.0的其它地方的纹理，沿用最后像素的纹理。用于当叠加过滤时，需要从0.0到1.0精确覆盖且没有模糊边界的纹理。
  • THREE.RepeatWrapping：平铺重复。超过1.0的值都被置为0.0。纹理被重复一次。在渲染具有诸如砖墙之类纹理的物体时，如果使用包含一整张砖墙的纹理贴图会占用较多的内存，通常只需载入一张具有一块或多块砖瓦的较小的纹理贴图，再把它按照重叠纹理寻址模式在物体表面映射多次，就可以达到和使用整张砖墙贴图同样的效果。
  • THREE.MirroredRepeatWrapping：镜像重复。每到边界处纹理翻转，意思就是每个1.0 u或者v处纹理被镜像翻转。

magFilter

  • 该属性定义当一个纹理单元（texel）覆盖多个像素点时纹理如何采样。缺省为 THREE.LinearFilter，表示获取4个最近的纹理单元执行双向线性插值计算(显示效果好)。另外的选项是 THREE.NearestFilter, 表示使用最近的texel(性能优)。

magFilter

  • 该属性定义当一个纹理单元（texel）覆盖多个像素点时纹理如何采样。缺省为 THREE.LinearFilter，表示获取4个最近的纹理单元执行双向线性插值计算(显示效果好)。另外的选项是 THREE.NearestFilter, 表示使用最近的texel(性能优)。
  • minFilter 该属性定义当一个纹理单元（texel）不足以覆盖单个像素点时纹理如何采样。缺省为THREE.LinearMipMapLinearFilter, 表示使用多级纹理贴图（mipmapping）以及一个三线性滤波器。
  • THREE.NearestFilter：最近滤镜。在纹理基层上执行最邻近过滤。
  • THREE.NearestMipMapNearestFilter：选择最临近的mip层，并执行最临近的过滤。
  • THREE.NearestMipMapLinearFilter：在mip层之间执行线性插补，并执行最临近的过滤。
  • THREE.LinearFilter：在纹理基层上执行线性过滤。(可能这个是常用的)
  • THREE.LinearMipMapNearestFilter：选择最临近的mip层，并执行线性过滤。
  • THREE.LinearMipMapLinearFilter：在mip层之间执行线性插补，并执行线性过滤。

anisotropy

  • 表示纹理的各向异性。沿纹理单元密度最高方向的轴线所取样本数。默认情况下，这个值为1。较高的值比基础MipMap要更清晰，但需要更多的采样。 使用renderer.getMaxAnisotropy()方法来找到GPU最大有效各向异性值；这个值通常是2的幂次方。

type

  • 缺省纹理格式为THREE.RGBAFormat。其他格式有：
  • THREE.UnsignedByteType：无符号8位整形值(1个字节)
  • THREE.ByteType：带符号8位整形值(1个字节)
  • THREE.ShortType：带符号16位整形值(2个字节)
  • THREE.UnsignedShortType：无符号16未整形值(2个字节)
  • THREE.IntType：带符号32位整形值(4个字节)
  • THREE.UnsignedIntType：无符号32位整形值(4个字节)
  • THREE.FloatType：单精度浮点型(4个字节)
  • THREE.HalfFloatType：半浮点型

format

  • 缺省纹理格式为THREE.RGBAFormat。其他格式有：
  • THREE.AlphaFormat：对应于GL_ALPHA。Alpha 值
  • THREE.RGBFormat：Red, Green, Blue 三原色值
  • THREE.RGBAFormat：Red, Green, Blue 和 Alpha 值
  • THREE.LuminanceFormat：灰度值
  • THREE.LuminanceAlphaFormat：灰度值和 Alpha 值
  • THREE.RGBEFormat
avatar
文章
阅读
粉丝