问题描述
我有 2 个函数，每个函数都绘制一个对象，在这两个函数中我都有这样的东西：
vao = gl.createVertexArray();
gl.bindVertexArray(vao);
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,flatten(positions),gl.STATIC_DRAW);
gl.vertexAttribPointer(0,3,gl.FLOAT,gl.FALSE,12,0);
gl.enabLevertexAttribArray(0);
firstfunction();
secondfunction();
只打印来自 secondfunction 的对象，如何解决这个问题？ 在 html 文件中，对于 gl_position，我使用运算符“+”来打印不同的对象，对吗？
编辑： 这是我的主要，js
"use strict";
let gl;
let vao;
let program;
let modelMatrix = mat4(1.0);
let viewMatrix = mat4(1.0);
let projectionMatrix = mat4(1.0);
let modelMatrix1 = mat4(1.0);
let vertexCounter =5700;
function createGeometry() {
let positions = [];
positions.push(vec3(-0.5,0.5));
positions.push(vec3(0.5,-0.5));
positions.push(vec3(-0.5,-0.5));
//triangle 1
positions.push(vec3(-0.5,-0.5));
positions.push(vec3(0.5,-0.5));
positions.push(vec3(0,-0.5,0));
//triangle 2
positions.push(vec3(0.5,0.5));
positions.push(vec3(0,0));
//triangle 3
positions.push(vec3(-0.5,0));
//triangle 4
positions.push(vec3(-0.5,0));
vao = gl.createVertexArray();
gl.bindVertexArray(vao);
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,0);
gl.enabLevertexAttribArray(0);
// let colors = [];
// colors.push(vec3(1.0,0.0,0.0));
// colors.push(vec3(1.0,1.0));
// colors.push(vec3(1.0,1.0,0.0));
//let vboColor = gl.createBuffer();
//gl.bindBuffer(gl.ARRAY_BUFFER,vboColor);
//gl.bufferData(gl.ARRAY_BUFFER,flatten(colors),gl.STATIC_DRAW);
//gl.vertexAttribPointer(1,0);
//gl.enabLevertexAttribArray(1);
}
function loadModel() {
let modelData = loadobj(teapotModel);
let meshData = loadMeshData(modelData[0],"Teapot");
let popositions = meshData.positions;
let normals = meshData.normals;
let colors = meshData.colors;
let vertexCounter = meshData.vertexCount;
vao = gl.createVertexArray();
gl.bindVertexArray(vao);
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,popositions,gl.STATIC_DRAW);
gl.vertexAttribPointer(1,0);
gl.enabLevertexAttribArray(1);
//gl.bufferData(gl.ARRAY_BUFFER,flatten(normals),gl.STATIC_DRAW);
// gl.vertexAttribPointer(3,0);
// gl.enabLevertexAttribArray(3);
let vboColor = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vboColor);
gl.bufferData(gl.ARRAY_BUFFER,colors,gl.STATIC_DRAW);
gl.vertexAttribPointer(2,0);
gl.enabLevertexAttribArray(2);
}
function render(timestamp,prevIoUsTimestamp) {
let light = getLightPosition(); // vec3
let rotation = getRotation(); // vec3
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(program);
gl.uniformMatrix4fv(
gl.getUniformlocation(program,"u_projectionMatrix"),flatten(projectionMatrix));
// let offset = Math.cos(timestamp / 1000.0) * 2.0;
// let cameraPosition = vec3(offset,2.0,5.0);
// let targetPosition = vec3(0.0,0.0);
// let upVector = vec3(0.0,0.0);
// viewMatrix = lookAt(cameraPosition,targetPosition,upVector);
gl.uniformMatrix4fv(
gl.getUniformlocation(program,"u_viewMatrix"),flatten(viewMatrix));
//scale (2,1,2)
let t1 = mat4(2.0,1.0);
let t2 = translate( 0.0,0.0 );
let changedmodelMatrix = mat4(1.0)
changedmodelMatrix =mult(t2,mult(t1,modelMatrix));
gl.uniformMatrix4fv(
gl.getUniformlocation(program,"u_model_matrix"),flatten(changedmodelMatrix));
//let popositions = meshData.positions;
//set matrix for teapotposition
// gl.uniformMatrix4fv(
// gl.getUniformlocation(program,"u_teapotposition"),// gl.FALSE,// flatten(popositions));
let t3 = translate(0.0,0.5,0.0);
let changedmodelMatrix1 = mat4(1.0);
changedmodelMatrix1 = mult(t3,modelMatrix1);
gl.uniformMatrix4fv(
gl.getUniformlocation(program,"u_model_matrix1"),flatten(changedmodelMatrix1));
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES,18); // pyramid
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES,vertexCounter); //teapot
window.requestAnimFrame(function (time) {
render(time,timestamp);
});
}
window.onload = function init() {
let canvas = document.getElementById("rendering-surface");
gl = Webglutils.setupWebGL(canvas);
gl.viewport(0,canvas.width,canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clearColor(0.0,0.0);
createGeometry();
loadModel();
// Program.
program = initShaders(gl,"vertex-shader","fragment-shader");
// Camera.
modelMatrix = mat4(1.0);
projectionMatrix = perspective(60.0,canvas.width / canvas.height,0.1,100.0);
let eyePos = vec3(0.75,0.25,3);
let lookAtPos = vec3(0.0,0.0);
let upVector = vec3(0.0,0.0);
viewMatrix = lookAt(eyePos,lookAtPos,upVector);
gl.bindVertexArray(vao);
// Render.
render(0,0);
};
html：
<html>
<head>
<Meta charset="UTF-8" />
<title>Introduction to WebGL</title>
<script type="x-shader/x-vertex" id="vertex-shader">#version 300 es
precision mediump float;
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec4 a_teapotposition;
layout(location = 2) in vec3 a_teapotcolor;
uniform mat4 u_model_matrix;
uniform mat4 u_viewMatrix;
uniform mat4 u_projectionMatrix;
//uniform mat4 u_model_matrix1;
out vec3 v_teapotcolor;
void main() {
v_teapotcolor = a_teapotcolor;
gl_Position =
a_teapotposition +
u_projectionMatrix
* u_viewMatrix
* u_model_matrix
* vec4(a_position,1.0)
;
}
</script>
<script type="x-shader/x-fragment" id="fragment-shader">#version 300 es
precision mediump float;
in vec3 v_teapotcolor;
out vec4 color;
void main() {
color = vec4(v_teapotcolor,1.0 ) //*
//vec4(0.5,0.2,1.0)
;
}
</script>
感谢任何帮助。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）