相关疑难解决方法(0)

我正在从这里阅读教程.

<script class = "WebGL">
var gl;
function initGL() {
  // Get A WebGL context
  var canvas = document.getElementById("canvas");
  gl = getWebGLContext(canvas);
  if (!gl) {
    return;
  }
}
var positionLocation;
var resolutionLocation;
var colorLocation;
var translationLocation;
var rotationLocation;
var translation = [50,50];
var rotation = [0, 1];
var angle = 0;
function initShaders() {
  // setup GLSL program
  vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
  fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
  program = createProgram(gl, [vertexShader, fragmentShader]);
  gl.useProgram(program);

  // look up where the vertex …

这是我在 WebGL 中的第一个实验：我试图将一个立方体、八面体和四面体添加到单个画布上。我分别对每个形状进行编程并测试它们：它们每个都在自己的画布中工作。当我尝试将它们加在一起时，就会出现问题。目前我只看到八面体在旋转（不，它没有遮挡其他形状，我已经检查过）。当我注释掉八面体时，我看到立方体和四面体在旋转，但它们的颜色缓冲区已经混合在一起并且不是我想要的（当我尝试分离它们的颜色缓冲区时，没有任何东西呈现在屏幕上）。我意识到我编码这些的方式存在不一致，但目前的配置是我可以同时显示这两个对象的唯一方法。现在最近添加的八面体使前两个消失了。

我感觉这个问题与顶点和颜色缓冲区有关，但我没有足够的经验和背景来知道要修改什么。我是否为每一个实例化了一个颜色缓冲区？那是有道理的。我试过这个，但前两种形状效果不佳，因此混合了颜色缓冲区。

如果有人能就此提出建议/帮助我，将不胜感激。已经花了无数个小时试图解决这个问题。

var canvas;
var gl;

var NumVertices  = 36;

var points = [];
var colors = [];

var pointsT = [];
var colorsT = [];

var pointsO = [];
var colorsO = [];

var xAxis = 0;
var yAxis = 1;
var zAxis = 2;

var axis = 0;
var theta = [ 0, 0, 0 ];

var thetaLoc;

window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( …