Javascript 在webgl中绘制多个对象
我是WebGL初学者，正在尝试绘制多个对象，我已经绘制了一个，现在准备绘制多个。 关于多对象渲染的教程很少，我可以在这个链接上找到 我试着根据它改变代码，但它不起作用，请有人纠正问题，并给出解释的解决方案 那我的尝试有什么问题 我的全部代码是：Javascript 在webgl中绘制多个对象,javascript,webgl,webgl-extensions,Javascript,Webgl,Webgl Extensions,我是WebGL初学者，正在尝试绘制多个对象，我已经绘制了一个，现在准备绘制多个。 关于多对象渲染的教程很少，我可以在这个链接上找到 我试着根据它改变代码，但它不起作用，请有人纠正问题，并给出解释的解决方案 那我的尝试有什么问题 我的全部代码是： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <script class="WebGL">
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script class="WebGL">
var gl;
function createProgram(gl, vertexShader, fragmentShader)
{
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vertexShader);
gl.compileShader(vs);
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(vs));
//////
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fragmentShader);
gl.compileShader(fs);
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(fs));
program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
alert(gl.getProgramInfoLog(program));
return program;
}
function createShaderFromScriptElement(gl , shaderName)
{
var Shader = document.getElementById(shaderName).firstChild.nodeValue;
return Shader;
}
function start()
{
var canvas = document.getElementById("canvas");
gl = canvas.getContext("experimental-webgl");
if (!gl) { alert("error while GL load"); }
var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
var program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
var colorMult = gl.getAttribLocation(program, "u_colorMult");
var colorLocation = gl.getUniformLocation(program, "u_color");
// Our uniforms for each thing we want to draw
var sphereUniforms = {
u_colorMult: [0.5, 1, 0.5, 1],
u_matrix: makeIdentity(),
};
var cubeUniforms = {
u_colorMult: [1, 0.5, 0.5, 1],
u_matrix: makeIdentity(),
};
var coneUniforms = {
u_colorMult: [0.5, 0.5, 1, 1],
u_matrix: makeIdentity(),
};
// The translation for each object.
var sphereTranslation = [0, 0, 0];
var cubeTranslation = [-40, 0, 0];
var coneTranslation = [40, 0, 0];
var sphereXRotation = time;
var sphereYRotation = time;
var cubeXRotation = -time;
var cubeYRotation = time;
var coneXRotation = time;
var coneYRotation = -time;
// ------ Draw the sphere --------
gl.useProgram(programInfo.program);
// Setup all the needed attributes.
setBuffersAndAttributes(gl, programInfo.attribSetters, sphereBufferInfo);
sphereUniforms.u_matrix = computeMatrix(
viewMatrix,
projectionMatrix,
sphereTranslation,
sphereXRotation,
sphereYRotation);
// Set the uniforms we just computed
setUniforms(programInfo.uniformSetters, sphereUniforms);
gl.drawArrays(gl.TRIANGLES, 0, sphereBufferInfo.numElements);
// ------ Draw the cube --------
// Setup all the needed attributes.
setBuffersAndAttributes(gl, programInfo.attribSetters, cubeBufferInfo);
cubeUniforms.u_matrix = computeMatrix(
viewMatrix,
projectionMatrix,
cubeTranslation,
cubeXRotation,
cubeYRotation);
// Set the uniforms we just computed
setUniforms(programInfo.uniformSetters, cubeUniforms);
gl.drawArrays(gl.TRIANGLES, 0, cubeBufferInfo.numElements);
// ------ Draw the cone --------
// Setup all the needed attributes.
setBuffersAndAttributes(gl, programInfo.attribSetters, coneBufferInfo);
coneUniforms.u_matrix = computeMatrix(
viewMatrix,
projectionMatrix,
coneTranslation,
coneXRotation,
coneYRotation);
// Set the uniforms we just computed
setUniforms(programInfo.uniformSetters, coneUniforms);
gl.drawArrays(gl.TRIANGLES, 0, coneBufferInfo.numElements);
}
</script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
// Passed in from the vertex shader.
varying vec4 v_color;
uniform vec4 u_colorMult;
void main()
{
gl_FragColor = v_color * u_colorMult;
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_color;
void main()
{
gl_FragColor = u_color; // green
}
</script>
</head>
<body onload="start()">
<div style="text-align: center">
</div>
<table style="width:100%; height: 10%;">
<tr>
<td style="width:200px; max-width:200px; ">
<canvas id="canvas" width="300" height="300"></canvas>
</td>
<td style="width:200px; max-width:200px; background-color:gray; ">
<canvas id="canvas2" width="300" height="300"></canvas>
</td>
</tr>
</table>
</body>
</html>
var-gl；
函数createProgram（gl、vertexShader、fragmentShader）
{
var vs=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vs，vertexShader）；
总帐编译主管（vs）；
如果（！gl.getShaderParameter（vs，gl.COMPILE_状态））
警报（gl.getShaderInfoLog（vs））；
//////
var fs=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fs，fragmentShader）；
总帐编辑主任（fs）；
如果（！gl.getShaderParameter（fs，gl.COMPILE_状态））
警报（gl.getShaderInfoLog（fs））；
program=gl.createProgram（）；
总分类：attachShader（项目，vs）；
总承包商助理（项目，财政司）；
总账链接程序（程序）；
if（！gl.getProgramParameter（程序、总账链接状态））
警报（gl.getProgramInfoLog（程序））；
返回程序；
}
函数createShaderFromScriptElement（gl、shaderName）
{
var Shader=document.getElementById（shaderName）.firstChild.nodeValue；
返回着色器；
}
函数start（）
{
var canvas=document.getElementById（“canvas”）；
gl=canvas.getContext（“实验性webgl”）；
如果（！gl）{alert（“gl加载时出错”）；}
var vertexShader=createShaderFromScriptElement（gl，“2d顶点着色器”）；
var fragmentShader=createShaderFromScriptElement（gl，“2d片段着色器”）；
var program=createProgram（gl、vertexShader、fragmentShader）；
gl.useProgram（程序）；
var colorMult=gl.getAttributeLocation（程序，“u_colorMult”）；
var colorLocation=gl.getUniformLocation（程序，“u_颜色”）；
//我们想画的每件东西都要穿制服
var sphereUniforms={
u_colorMult:[0.5,1,0.5,1]，
u_矩阵：makeIdentity（），
};
变量立方形={
u_colorMult:[1,0.5,0.5,1]，
u_矩阵：makeIdentity（），
};
var coneUniforms={
u_colorMult:[0.5,0.5,1,1]，
u_矩阵：makeIdentity（），
};
//每个对象的平移。
var sphereTranslation=[0,0,0]；
变量立方翻译=[-40,0,0]；
var conetransation=[40,0,0]；
var sphereXRotation=时间；
var Spherey旋转=时间；
var cubeXRotation=-时间；
var cubeYRotation=时间；
var coneXRotation=时间；
var coneYRotation=-时间；
//----画球体--------
总账使用程序（programInfo.program）；
//设置所有需要的属性。
setBuffersAndAttributes（gl、programInfo.attribSetters、sphereBufferInfo）；
sphereUniforms.u_矩阵=计算矩阵(
viewMatrix，
投影矩阵，
球体翻译，
球体旋转，
球形旋转）；
//设置我们刚刚计算的制服
setUniforms（programInfo.uniformSetters、sphereUniforms）；
gl.DrawArray（gl.TRIANGLES，0，sphereBufferInfo.NumeElements）；
//----画立方体--------
//设置所有需要的属性。
setBuffersAndAttributes（gl、programInfo.attribSetters、cubeBufferInfo）；
cubeUniforms.u_矩阵=计算矩阵(
viewMatrix，
投影矩阵，
立方翻译，
立方旋转，
立方旋转）；
//设置我们刚刚计算的制服
setUniforms（programInfo.uniformSetters、cubeUniforms）；
gl.DrawArray（gl.TRIANGLES，0，cubeBufferInfo.numElements）；
//----画圆锥体--------
//设置所有需要的属性。
setBuffersAndAttributes（gl、programInfo.attribSetters、coneBufferInfo）；
coneUniforms.u_矩阵=计算矩阵(
viewMatrix，
投影矩阵，
conetransation，
圆锥旋转，
圆锥旋转）；
//设置我们刚刚计算的制服
setUniforms（programInfo.uniformSetters、coneUniforms）；
总图数组（总图三角形，0，coneBufferInfo.numElements）；
}
//从顶点着色器传入。
可变的vec4 v_颜色；
均匀vec4 u_色Mult；
void main（）
{
gl_FragColor=v_color*u_colorMult；
}
精密中泵浮子；
均匀的vec4 u_颜色；
void main（）
{
gl\u FragColor=u\u color；//绿色
}
请向我解释解决方案，以便我能理解，并在未来与我一起使用。感谢您，GLSL着色器有3种类型的变量：
- 制服由主机应用程序设置，并在单个绘制调用中在所有顶点/碎片上保持不变
- 属性由主机应用程序按顶点设置，并在顶点着色器中只读
- 在光栅化器中进行插值后，变向只能由顶点着色器写入，并由片段着色器读取<