乐趣区

关于javascript:图形学之纹理后续WebGL多纹理处理

jiezi

背景

本篇收录于《数据可视化和图形学》专栏

之前介绍纹理相干的实践及简略应用 有须要能够参考上文 , 在上文根底进行多纹理实际(更多是帮忙群内小伙伴提前脱坑!!!!)

本篇纲要

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

1. 多纹理渲染实现思路

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

  1. 定义 vertexArray(本文示例为 2point)
  2. 定义 textureArray
  3. 创立缓冲区(此处留神多渲染节点专用缓冲区状况)
  4. 循序渐进依此注册 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); // 绘制多个 (三角形组合) 正方形

!!!! 留神 群里小伙伴注意代码中正文 (解决你的纳闷)

1.webgl-utils.js webgl 相干函数封装工具库

残缺代码示例 [请点击 git 仓库查看代码示例]
texture.html

texture1.html

2D 渲染方面你可能须要理解的有

  1. 纹理缓存
  2. 纹理压缩
  3. 2D/2D 纹理优化
  4. 渲染优化 …

最初

最初强烈心愿大家学习相干理论知识; 实践可能日常用到的中央很少, 然而它能决定你走多远。(有的人问难怎么办, 勤于练习吧) 写作速度我感觉我又行了, 哈哈哈 … 最近会继续更新(因为在自研本人的渲染引擎。唉 一言难尽。。。道歉啦)

退出移动版