`
flyfox1982
  • 浏览: 80875 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

WebGL2系列之采样器对象

阅读更多

前言

在WebGL1中,纹理的图片和采样信息都是写在纹理对象之中.

采样信息告诉GPU如何去读取贴图上图片的信息。

如果我们希望从同一个图片多次读取像素信息,但是每次读取的时候使用的过滤方式不一样, 此时我们需要创建两个不同的纹理对象。

"你说这样是不是很烦啊"
WebGL: “。。。”

采样器对象

在WebGL2中,引入了采样器对象,使用采样器对象,可以把纹理的过滤方式封装到采样器对象上面,而原本的纹理对象可以不用在指定过滤方式,因此一张图片可以只用创建一个纹理对象,对于不同的过滤方式,创建多个采样器;在使用纹理对象的时候,可以绑定纹理对象和采样器对象来实现图源和读取方式的指定。
纹理对象和采样方式被分开,一个纹理对象可以和多个采样器对象关联; 多个纹理对象也可以和一个采样器关联。
如果使用采样器对象,一些WebGL的引擎就会需要产生代码上的变动。

创建采样器对象

通过方法gl. createSampler可以创建采样器对象,比如:

var samplerA = gl.createSampler();

gl.createSampler方法

以下是gl.createSampler的签名

WebGLSampler gl.createSampler();

该方法没有参数,返回一个创建好的采样器对象。

指定采样器参数

通过方法gl. samplerParameteri可以指定采样器的参数。

gl. samplerParameteri方法

以下是gl. samplerParameteri的签名

void gl.samplerParameteri(sampler, pname, param);
void gl.samplerParameterf(sampler, pname, param);

第一个参数是sampler 对象,第一个参数是需要指定的参数名,第三个参数是参数值,其中参数名如下
这些参数包括

  • gl.TEXTURE_MIN_FILTER
  • gl.TEXTURE_MAG_FILTER
  • gl.TEXTURE_WRAP_S
  • gl.TEXTURE_WRAP_T
  • gl.TEXTURE_COMPARE_MODE
  • gl.TEXTURE_COMPARE_FUNC
    可以看出就是原本的WebGL1中需要指定的纹理对象上的参数,只是现在移到了采样器对象上。

绑定采样器到纹理单元

通过函数 gl.bindSampler(unit, sampler),可以把采样器绑定到指定的纹理单元,函数签名:

void gl.bindSampler(unit, sampler);

比如如下代码片段:

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2Dtexture);
gl.bindSampler(0, samplerA);

此时相当于把texture对象和samplerA对象绑定到了一起,此时对于纹理单元0的读取,数据源来自texture对象,而过滤方式来自原samplerA。

删除采样器对象

通过gl. deleteSampler方法可以删除指定的采样器对象,函数签名如下:

void gl.deleteSampler(sampler);

参数指定要删除的采样器对象,比如代码:

gl.deleteSampler(sampler);

一个示例代码片段

下面是使用采样器的一个示例代码片段

var samplerA = gl.createSampler();
gl.samplerParameteri(samplerA, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);
gl.samplerParameteri(samplerA, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.samplerParameteri(samplerA, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(samplerA, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

var samplerB = gl.createSampler();
gl.samplerParameteri(samplerB, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(samplerB, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(samplerB, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.samplerParameteri(samplerB, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

// ...

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(0, samplerA);

gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(1, samplerB);

欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

ITman彪叔公众号ITman彪叔公众号

0
0
分享到:
评论

相关推荐

    在原始WebGL2中实现不同复杂度的渲染算法

    此外,WebGL2还支持帧缓冲对象(Framebuffer Objects)和多重渲染目标(MRT),这使得可以同时渲染到多个纹理,对于后期合成和复杂的图像处理算法非常有用。 更复杂的技术如着色器编程也至关重要。WebGL2支持GLSL...

    Webgl编程指南书上例子.zip

    2. **片段着色器**:片段着色器工作在像素级别,决定每个像素的颜色。它可以执行复杂的纹理映射、混合操作,以及深度测试等,确保正确的渲染顺序和遮挡效果。 3. **缓冲区和数组**:WebGL使用缓冲区对象来存储顶点...

    WebGL-Programming-Guide-master.zip

    2. **着色语言GLSL**:GLSL(OpenGL Shading Language)是用于编写顶点和片段着色器的语言,是WebGL中处理图形的关键。了解变量类型、控制流、函数、纹理采样等概念。 3. **顶点着色器**:定义了如何在3D空间中变换...

    《WebGL编程指南》自带光盘webgl-guide-code

    2. 顶点着色器与片段着色器: - 顶点着色器:处理图形的顶点数据,如位置、颜色、法线等,可以进行坐标变换、投影和视口转换。 - 片段着色器:处理像素颜色,执行纹理采样、光照计算等,最终确定屏幕上每个像素的...

    webgl:WebGL 实验

    2. **着色语言**:WebGL使用GLSL(OpenGL Shading Language)编写着色器,这是一种类似于C的语言,直接在GPU上运行。 3. **顶点缓冲对象**:用于存储顶点数据,例如坐标、颜色和纹理坐标,WebGL通过这些对象高效地...

    webgl2.0速查表

    这样可以在多个纹理之间共享采样器状态,简化代码并提高效率。 **WebGLSync** WebGLSync对象用于同步客户端和GPU之间的操作。它们由`fenceSync()`创建,客户端可以通过`clientWaitSync()`阻塞等待同步,而内部的...

    WebGL2-WASM-Fluid-Simulation:我在物理模拟方面的第一个突破-使用WebGL2和WASM

    与WebGL1相比,WebGL2增加了许多新特性,如浮点纹理、多重纹理采样、顶点数组对象、几何着色器等,这些都为更复杂、更高效的图形渲染提供了可能。 WebAssembly(简称WASM)是一种低级的虚拟机指令集,它可以被编译...

    WebGL学习颜色与纹理

    最后,在片段着色器中,我们使用纹理坐标来采样纹理图像,并将结果应用到片段颜色上。 综上所述,Varying变量允许我们在顶点着色器和片段着色器之间传递数据,如颜色和纹理坐标,这对于实现复杂的视觉效果至关重要...

    webgl-postprocess:WebGL的后处理效果实验

    2. 纹理采样:在后处理阶段,通常需要将先前渲染的图像作为纹理采样,这可以通过使用WebGL的`texImage2D`或`texSubImage2D`函数来实现。 3. 着色器语言(GLSL):GLSL是OpenGL Shading Language的缩写,用于编写...

    ugl:µgl是一个微型WebGL2引擎,用于学习目的

    WebGL2引入了许多新特性,如浮点纹理、多纹理采样、顶点数组对象等,极大地扩展了WebGL的性能和功能。 µgl引擎的核心特点包括: 1. **简洁的API**:由于其小型化的特性,µgl的API设计简洁,易于理解和实践。...

    WebGL-v2-

    2. **顶点数组对象(VAOs)**:WebGL v2引入了顶点数组对象,允许开发者保存顶点缓冲区和属性状态,提高性能并减少代码复杂性。 3. **整数纹理和渲染缓冲**:除了浮点纹理,WebGL v2还支持整数纹理和整数渲染目标,...

    webgl-shader-experiment:一个基本的顶点和片段着色器示例

    开发者需要对WebGL API有深入理解,包括如何创建缓冲区对象来存储顶点数据,如何使用`gl.uniform`系列函数传递常量数据,以及如何使用`gl.drawArrays`或`gl.drawElements`进行绘制。 在“webgl-shader-experiment-...

    webgl-shader-jockey:webgl-visualizer 的小范围版本

    2. `js/` 目录:包含项目中的JavaScript代码,可能有处理用户交互、加载和管理GLSL着色器、以及与WebGL上下文交互的函数。 3. `shaders/` 目录:存放GLSL着色器源代码,通常会有顶点着色器(`.vert`)和片段着色器...

    WebGL2_PlayGround

    7. **帧缓冲对象(framebuffer objects, FBOs)**:WebGL2扩展了FBO的功能,允许开发者创建多个离屏渲染目标,用于复杂的渲染技术,如多重采样抗锯齿(MSAA)、后期处理和屏幕空间环境光遮蔽(SSAO)。 8. **顶点...

    pex-glu:pex库的WebGL相关代码

    2. **着色器系统**:WebGL的核心是着色器,包括顶点着色器和片段着色器。Pex-glu可能包含了一些预定义的着色器模板,或者提供了一套接口来创建和管理自定义着色器。这通常涉及到编译和链接着色器程序,以及设置和...

    WebGLTut15:在 WebGL 中使用高光贴图

    首先,需要从纹理采样器中获取法线数据,然后转换为归一化的浮点值。接着,应用光照模型,如Phong光照模型,来计算最终的颜色。 4. **设置光照信息**:在片段着色器中,你需要指定光源的位置、颜色以及环境光、漫射...

    webgl:与 WebGL 打交道

    `getContext('webgl')`或`getContext('webgl2')`是创建WebGL上下文的关键步骤。 2. **顶点数据**:WebGL使用顶点来构建3D几何形状。顶点数据可以包含位置、颜色、纹理坐标等信息。它们通常存储在数组缓冲区...

    glo-shader:WebGL的通用着色器接口

    - **创建着色器**: 使用`glo-shader`,你可以通过传递GLSL源代码字符串来创建着色器对象。库会自动处理编译过程,如果出现错误,它将提供有用的反馈信息。 - **着色器组合**: 该库允许你组合多个着色器模块,这样...

    在支持HTML5的浏览器上运行WebGL程序的方法

    8. **纹理采样(Texture Sampling)**:在片段着色器中,`texture2D`函数用于从指定的纹理单元(uSampler)采样颜色数据,然后根据纹理坐标来决定采样的位置。 9. **光照模拟(Lighting Simulation)**:虽然文中...

    canvas二维和三中维获取鼠标单击点的颜色

    在Web开发中,HTML5的Canvas元素为开发者提供了一个强大的绘图平台,支持二维和三维图形的绘制。本文将深入探讨如何在二维和三维Canvas环境...无论是二维还是三维,都需要对Canvas和WebGL有扎实的理论基础和实践经验。

Global site tag (gtag.js) - Google Analytics