Question

我想用它的局部坐标渲染立方体。我可以渲染单独的立方体或线条，但不能一起渲染。我的目标是实现这一目标：

我的多维数据集顶点数据如下：

vertices: new Float32Array([
    // Front face
    -0.1, -0.1,  0.1,
     0.1, -0.1,  0.1,
     0.1,  0.1,  0.1,
    -0.1,  0.1,  0.1,
    // Back face
    -0.1, -0.1, -0.1,
    -0.1,  0.1, -0.1,
     0.1,  0.1, -0.1,
     0.1, -0.1, -0.1,
    // Top face
    -0.1,  0.1, -0.1,
    -0.1,  0.1,  0.1,
     0.1,  0.1,  0.1,
     0.1,  0.1, -0.1,
    // Bottom face
    -0.1, -0.1, -0.1,
     0.1, -0.1, -0.1,
     0.1, -0.1,  0.1,
    -0.1, -0.1,  0.1,
    // Right face
     0.1, -0.1, -0.1,
     0.1,  0.1, -0.1,
     0.1,  0.1,  0.1,
     0.1, -0.1,  0.1,
    // Left face
    -0.1, -0.1, -0.1,
    -0.1, -0.1,  0.1,
    -0.1,  0.1,  0.1,
    -0.1,  0.1, -0.1,
  ]),

由于我知道我的立方体位于全局坐标的中心，因此可以确定他的局部坐标与全局坐标相同。要绘制局部坐标（3条线），我需要从原点绘制3条线。这是线的顶点数据。

vertices: new Float32Array([
    // x line
    0.0, 0.0, 0.0,
    1.0, 0.0, 0.0,
    // y line
    0.0, 0.0, 0.0,
    0.0, 1.0, 0.0,
    // z line
    0.0, 0.0, 0.0,
    0.0, 0.0, 1.0,
  ]),

但是当我开始渲染它时，我遇到了一些问题：

如果在行之前渲染多维数据集，则会出现错误：

[。WebGL-0x7fabca858c00] GL错误：GL_INVALID_OPERATION：glDrawArrays：缓冲区超出范围

但是即使出现此错误，我也可以看到我的局部坐标线。

如果我做相反的事情，我在立方体之前画线，那么我得到了：

首先，我根本无法识别线条，但是随后使用webgl chrome ui扩展名，我发现我的线条附加在立方体形状上：

我的流程是：

创建着色器我对两种形状都使用顶点和片段着色器。我的形状具有相同的属性和统一的名称，可以使用1个着色器程序

// js
const cube = {
   data: cube_data,
   attr: ['coordinates', 'colors'],
   uniform: ['transformationMatrix'],
   valuesPerVertex: 3,
}

const line = {
   data: line_data,
   attr: ['coordinates', 'colors'],
   uniform: ['transformationMatrix'],
   valuesPerVertex: 3,
}

顶点着色器：


    attribute vec3 coordinates;
    attribute vec4 colors;

    uniform mat4 transformationMatrix;

    varying vec4 v_color;

    void main() {
      colors;
      gl_Position = transformationMatrix * vec4(coordinates, 1.0);
      v_color = colors;
    }

创建程序
创建属性，制服。

在渲染时：我将数据缓存到属性并更新制服

有人可以给我提示去哪里看看吗？

无法将立方体和直线渲染在一起

0 个答案: