如何解决多个对象Glsl
搜索独立绘制两个对象时,我在使用Glsl时遇到一些问题。当我搜索查看代码结果时,编译器考虑的对象是第一个纹理,而纹理是第二个纹理,此外,我不知道如何使用独立的方式设置对象的初始位置相同的着色器。 这是我的代码:
var program;
var gl;
var shaderDir;
var baseDir;
var missileModel;
var pigModel;
var missileStr = 'model/R73-Ready.obj';
var missileTexture = 'model/R73 Texture.png';
var modelStr = 'model/mount.obj';
var modelTexture = 'model/ground_grass_3264_4062_Small.jpg';
function main() {
var lastUpdateTime = (new Date).getTime();
var Rx = 0.0;
var Ry = 0.0;
var Rz = 0.0;
var S = 0.5;
utils.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0,gl.canvas.width,gl.canvas.height);
gl.clearColor(0.85,1.0,0.85,1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
//Here we extract the position of the vertices,the normals,the indices,and the uv coordinates
var missileVertices = missileModel.vertices;
var missileNormals = missileModel.vertexNormals;
var missileIndices = missileModel.indices;
var missileTexCoords = missileModel.textures;
var pigVertices = pigModel.vertices;
var pigNormals = pigModel.vertexNormals;
var pigIndices = pigModel.indices;
var pigTexCoords = pigModel.textures;
//###################################################################################
var positionAttributeLocation = gl.getAttribLocation(program,"a_position");
var uvAttributeLocation = gl.getAttribLocation(program,"a_uv");
var matrixLocation = gl.getUniformLocation(program,"matrix");
var textLocation = gl.getUniformLocation(program,"u_texture");
var perspectiveMatrix = utils.MakePerspective(120,gl.canvas.width/gl.canvas.height,0.1,100.0);
var viewMatrix = utils.MakeView(0,0.0,3.0,0.0);
//drawing land
var vao = gl.createVertexArray();
gl.bindVertexArray(vao);
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(pigVertices),gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation,3,gl.FLOAT,false,0);
var uvBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(pigTexCoords),gl.STATIC_DRAW);
gl.enableVertexAttribArray(uvAttributeLocation);
gl.vertexAttribPointer(uvAttributeLocation,2,0);
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(pigIndices),gl.STATIC_DRAW);
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D,texture);
var image = new Image();
image.src = baseDir+modelTexture;
image.onload= function() {
gl.bindTexture(gl.TEXTURE_2D,texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true);
gl.texImage2D(gl.TEXTURE_2D,gl.RGBA,gl.UNSIGNED_BYTE,image);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
gl.generateMipmap(gl.TEXTURE_2D);
};
//drawing the missile
var missile = gl.createVertexArray();
gl.bindVertexArray(missile);
var misspositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,misspositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(missileVertices),0);
var missileuvBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,missileuvBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(missileTexCoords),0);
var missindexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,missindexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(missileIndices),gl.STATIC_DRAW);
var misstexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D,misstexture);
var missimage = new Image();
missimage.src = baseDir+missileTexture;
missimage.onload= function() {
gl.bindTexture(gl.TEXTURE_2D,misstexture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,missimage);
gl.texParameteri(gl.TEXTURE_2D,gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D,gl.LINEAR);
gl.generateMipmap(gl.TEXTURE_2D);
};
drawScene();
function animate(){
var currentTime = (new Date).getTime();
if(lastUpdateTime != null){
//var deltaC = 0; //(30 * (currentTime - lastUpdateTime)) / 1000.0;
Rx = 90;
Ry = 90;
Rz = 90;
}
worldMatrix = utils.MakeWorld(0.0,Rx,Ry,Rz,S);
lastUpdateTime = currentTime;
}
function drawScene() {
animate();
utils.resizeCanvasToDisplaySize(gl.canvas);
gl.clearColor(0.85,1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var viewWorldMatrix = utils.multiplyMatrices(viewMatrix,worldMatrix);
var projectionMatrix = utils.multiplyMatrices(perspectiveMatrix,viewWorldMatrix);
gl.uniformMatrix4fv(matrixLocation,gl.FALSE,utils.transposeMatrix(projectionMatrix));
gl.activeTexture(gl.TEXTURE0);
gl.uniform1i(textLocation,misstexture);
gl.bindVertexArray(missile);
gl.drawElements(gl.TRIANGLES,missileIndices.length,gl.UNSIGNED_SHORT,0 );
gl.activeTexture(gl.TEXTURE0);
gl.uniform1i(textLocation,texture);
gl.bindVertexArray(vao);
gl.drawElements(gl.TRIANGLES,pigIndices.length,0 );
window.requestAnimationFrame(drawScene);
}
}
async function init(){
var path = window.location.pathname;
var page = path.split("/").pop();
baseDir = window.location.href.replace(page,'');
shaderDir = baseDir+"shaders/";
var canvas = document.getElementById("c");
gl = canvas.getContext("webgl2");
if (!gl) {
document.write("GL context not opened");
return;
}
await utils.loadFiles([shaderDir + 'vs.glsl',shaderDir + 'fs.glsl'],function (shaderText) {
var vertexShader = utils.createShader(gl,gl.VERTEX_SHADER,shaderText[0]);
var fragmentShader = utils.createShader(gl,gl.FRAGMENT_SHADER,shaderText[1]);
program = utils.createProgram(gl,vertexShader,fragmentShader);
});
gl.useProgram(program);
//###################################################################################
//This loads the obj model in the pigModel variable
var pigObjStr = await utils.get_objstr(baseDir+ missileStr);
missileModel = new OBJ.Mesh(pigObjStr);
var pigObjStr1 = await utils.get_objstr(baseDir+ modelStr);
pigModel = new OBJ.Mesh(pigObjStr1);
main();
}
window.onload = init;
解决方法
bindTexture
将命名纹理绑定到纹理目标和当前纹理单元。当前纹理单位由activeTexture
设置。
纹理单位是命名的纹理对象和纹理采样器统一之间的绑定点。采样器制服必须由纹理单位设置,而不是纹理对象名称。
您必须将纹理单位(索引)分配给纹理采样器制服,并且必须在绘制对象之前将纹理绑定到纹理单位:
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D,misstexture);
gl.uniform1i(textLocation,0); // 0 because 'misstexture' is bound to texture unit 0
gl.bindVertexArray(missile);
gl.drawElements(gl.TRIANGLES,missileIndices.length,gl.UNSIGNED_SHORT,0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D,texture);
gl.uniform1i(textLocation,0); // 0 because 'texture' is bound to texture unit 0
gl.bindVertexArray(vao);
gl.drawElements(gl.TRIANGLES,pigIndices.length,0);
当然可以将纹理绑定到不同的纹理单元:
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D,misstexture);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D,texture);
并在绘制对象之前将纹理采样器设置为统一
gl.uniform1i(textLocation,0); // 0 because 'misstexture' is bound to texture unit 0
gl.bindVertexArray(missile);
gl.drawElements(gl.TRIANGLES,0);
gl.uniform1i(textLocation,1); // 1 because 'texture' is bound to texture unit 1
gl.bindVertexArray(vao);
gl.drawElements(gl.TRIANGLES,0);
,
@ Rabbid76指出,您对gl.uniform1i
的纹理调用是错误的。您需要传递纹理单元索引,而不是WebGLTexture
对于位置,通常在渲染时通过均匀地将矩阵传递给着色器来设置对象的位置
for each object
set vertex array
gl.useProgram(whateverProgramThisObjectNeeds)
bind textures to texture units
set uniforms to tell shader which texture units you bound the textures to
set uniforms for material settings (colors,etc..)
set uniforms for matrices (projection,view,model)
gl.drawArrays or gl.drawElements
您通常不会将位置硬编码到着色器中。设置“初始”位置不是WebGL的一部分。 WebGL只是绘制点,线和三角形。对象的位置是代码的一部分。将它们存储在数组,地图,树,场景图,游戏对象,您要化妆的东西中,然后遍历要绘制的对象,并设置一些制服以将它们绘制在正确的位置。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。