图形学之纹理后续/WebGL多纹理处理图形学之纹理后续

背景 【图形学之纹理后续/WebGL多纹理处理】本篇收录于《数据可视化和图形学》专栏

之前介绍纹理相关的理论及简单使用有需要可以参考上文 , 在上文基础进行多纹理实践(更多是帮助群内小伙伴提前脱坑!!!!)

本篇大纲

多纹理渲染实现思路
多纹理渲染coding(几种场景)

1. 多纹理渲染实现思路

多纹理渲染更多是指 gl_FragColor采取混合纹理 texture2D * texture2D的关系。本篇初衷为了帮助群里小伙伴的进阶坎坷路~会提到多vertex(纹理)渲染然后坐标重叠的需求。

定义vertexArray(本文示例为2point)
定义textureArray
创建缓冲区(此处注意多渲染节点公用缓冲区情况)
按部就班依此注册shader.绑定数据,渲染。

多纹理渲染coding(几种场景)

第一种 gl_FragColor采取混合纹理 texture2D * texture2D

文章图片

shader部分没什么难度...

// vertex attribute vec2 a_position; //坐标 attribute vec2 a_texCoord; //纹理uniform vec2 u_resolution; varying vec2 v_texCoord; void main() { //坐标转换像素->1.0,0.0... vec2 zeroToOne = a_position / u_resolution; vec2 zeroToTwo = zeroToOne * 2.0; vec2 clipSpace = zeroToTwo - 1.0; gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); // 纹理给fragment使用 v_texCoord = a_texCoord; }// fragment uniform sampler2D u_image0; // 纹理 uniform sampler2D u_image1; // 来自vertex shader varying vec2 v_texCoord; void main() { vec4 color0 = texture2D(u_image0, v_texCoord); vec4 color1 = texture2D(u_image1, v_texCoord); gl_FragColor = color0 * color1; // 可以理解为混合纹理 }

JavaScript 也很简单创建节点坐标/纹理/shader&数据连接/渲染搞定!

// 此处示意代码完整代码上传github var texcoordBuffer = gl.createBuffer(); //纹理 gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); // bufferData ... for(...images length){ // 循环遍历 gl.bindTexture(gl.TEXTURE_2D, texture); } var positionBuffer = gl.createBuffer(); //节点坐标此处绘制TRIANGLES 三角形 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // bufferData // 缓冲区分配给attribute变量 gl.vertexAttribPointer( texcoordLocation, size, type, normalize, stride, offset); gl.vertexAttribPointer( positionLocation, size, type, normalize, stride, offset); // 开启attribute变量 gl.enableVertexAttribArray(positionLocation); gl.enableVertexAttribArray(texcoordLocation); // 纹理!!!!激活纹理单元 gl.activeTexture(gl.TEXTURE0); //给定的纹理绑定到目标(vertex) gl.bindTexture(gl.TEXTURE_2D, textures[0]); // 绘制!!! 大功告成 gl.drawArrays(gl.TRIANGLES, 0, 6);

第二种多个节点纹理(其实就是坐标重叠后者覆盖前者...)

文章图片

shader部分也没什么难度(没什么改变)...

// vertex attribute vec2 a_position; attribute vec2 a_texCoord; attribute lowp float textureIndex; uniform vec2 u_resolution; varying vec2 v_texCoord; varying lowp float indexPicker; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 zeroToTwo = zeroToOne * 2.0; vec2 clipSpace = zeroToTwo - 1.0; gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); v_texCoord = a_texCoord; indexPicker = textureIndex; // 控制fragment shader选哪一个纹理 }// fragment precision mediump float; // 纹理 uniform sampler2D u_image[2]; // the texCoords passed in from the vertex shader. varying vec2 v_texCoord; varying lowp float indexPicker; void main() { if (indexPicker < 0.5) { gl_FragColor = texture2D(u_image[0], v_texCoord); } else { gl_FragColor = texture2D(u_image[1], v_texCoord); } }

JavaScript 也很简单创建节点坐标/纹理/shader&数据连接/渲染搞定!

// 此处示意代码完整代码上传github var texcoordBuffer = gl.createBuffer(); //纹理 gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); // bufferData ... for(...images length){ // 循环遍历 gl.bindTexture(gl.TEXTURE_2D, texture); } // 注意vertex!!!!! 此处与上文不同 var positionBuffer = gl.createBuffer(); //节点坐标此处绘制TRIANGLES 三角形 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // bufferData // 缓冲区分配给attribute变量 gl.vertexAttribPointer( texcoordLocation, size, type, normalize, stride, offset); gl.vertexAttribPointer( positionLocation, size, type, normalize, stride, offset); // 开启attribute变量 gl.enableVertexAttribArray(positionLocation); gl.enableVertexAttribArray(texcoordLocation); // 纹理!!!!激活纹理单元 gl.activeTexture(gl.TEXTURE0); //给定的纹理绑定到目标(vertex) gl.bindTexture(gl.TEXTURE_2D, textures[0]); // 绘制!!! 大功告成 gl.drawArrays(gl.TRIANGLES, 0, vertextArray.length/2); // 绘制多个(三角形组合)正方形

!!!!注意群里小伙伴留意代码中注释 (解决你的疑惑)