Cách các thuộc tính màu hoạt động trong VBO?

Question

Tôi đang mã hóa thành OpenGL ES 2.0 (Webgl). Tôi đang sử dụng VBO để vẽ nguyên thủy. Tôi có mảng đỉnh, mảng màu và mảng các chỉ mục. Tôi đã xem xét mã mẫu, sách và hướng dẫn, nhưng một điều tôi không nhận được - nếu màu sắc được xác định trên mỗi đỉnh thì nó ảnh hưởng như thế nào đến bề mặt đa giác liền kề với các đỉnh đó? (Tôi là người mới tham gia OpenGL (ES))

Tôi sẽ giải thích một ví dụ. Tôi có một khối lập phương để vẽ. Từ những gì tôi đọc trong cuốn sách OpenGLES, màu sắc được định nghĩa là một thuộc tính đỉnh. Trong trường hợp đó, nếu tôi muốn vẽ 6 mặt của khối lập phương với 6 màu khác nhau thì tôi nên xác định màu như thế nào. Nguồn gốc của sự nhầm lẫn của tôi là: mỗi đỉnh là phổ biến cho 3 khuôn mặt, sau đó làm thế nào nó sẽ giúp xác định một màu sắc trên mỗi đỉnh? (Hoặc màu sắc nên được xác định cho mỗi chỉ mục?). Thực tế là chúng ta cần chia nhỏ những khuôn mặt này thành hình tam giác, khiến tôi khó hiểu hơn về mối quan hệ này hoạt động như thế nào. Sự nhầm lẫn tương tự cũng xảy ra đối với các cạnh. Thay vì vẽ hình tam giác, giả sử tôi muốn vẽ các cạnh bằng cách sử dụng LINES nguyên thủy. Mỗi cạnh của màu sắc khác nhau. Làm cách nào để xác định thuộc tính màu trong trường hợp đó?

Tôi đã xem một số ví dụ hoạt động. Cụ thể hướng dẫn này: http://learningwebgl.com/blog/?p=370

Tôi thấy cách mảng màu được xác định trong ví dụ trên để vẽ hình lập phương có 6 mặt màu khác nhau, nhưng tôi không hiểu tại sao được xác định theo cách đó. (Ví dụ: tại sao mỗi màu được sao chép 4 lần vào unpackedColors?)

Ai đó có thể giải thích cách các thuộc tính màu hoạt động trong VBO?

[Các liên kết dường như trên không thể tiếp cận, vì vậy tôi sẽ gửi mã liên quan ở đây]

cubeVertexPositionBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); 
vertices = [ 
    // Front face 
    -1.0, -1.0, 1.0, 
    1.0, -1.0, 1.0, 
    1.0, 1.0, 1.0, 
    -1.0, 1.0, 1.0, 

    // Back face 
    -1.0, -1.0, -1.0, 
    -1.0, 1.0, -1.0, 
    1.0, 1.0, -1.0, 
    1.0, -1.0, -1.0, 

    // Top face 
    -1.0, 1.0, -1.0, 
    -1.0, 1.0, 1.0, 
    1.0, 1.0, 1.0, 
    1.0, 1.0, -1.0, 

    // Bottom face 
    -1.0, -1.0, -1.0, 
    1.0, -1.0, -1.0, 
    1.0, -1.0, 1.0, 
    -1.0, -1.0, 1.0, 

    // Right face 
    1.0, -1.0, -1.0, 
    1.0, 1.0, -1.0, 
    1.0, 1.0, 1.0, 
    1.0, -1.0, 1.0, 

    // Left face 
    -1.0, -1.0, -1.0, 
    -1.0, -1.0, 1.0, 
    -1.0, 1.0, 1.0, 
    -1.0, 1.0, -1.0, 
]; 
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW); 
cubeVertexPositionBuffer.itemSize = 3; 
cubeVertexPositionBuffer.numItems = 24; 

cubeVertexColorBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer); 
var colors = [ 
    [1.0, 0.0, 0.0, 1.0],  // Front face 
    [1.0, 1.0, 0.0, 1.0],  // Back face 
    [0.0, 1.0, 0.0, 1.0],  // Top face 
    [1.0, 0.5, 0.5, 1.0],  // Bottom face 
    [1.0, 0.0, 1.0, 1.0],  // Right face 
    [0.0, 0.0, 1.0, 1.0],  // Left face 
]; 
var unpackedColors = [] 
for (var i in colors) { 
    var color = colors[i]; 
    for (var j=0; j < 4; j++) { 
    unpackedColors = unpackedColors.concat(color); 
    } 
} 
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(unpackedColors), gl.STATIC_DRAW); 
cubeVertexColorBuffer.itemSize = 4; 
cubeVertexColorBuffer.numItems = 24; 

cubeVertexIndexBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); 
var cubeVertexIndices = [ 
    0, 1, 2,  0, 2, 3, // Front face 
    4, 5, 6,  4, 6, 7, // Back face 
    8, 9, 10,  8, 10, 11, // Top face 
    12, 13, 14, 12, 14, 15, // Bottom face 
    16, 17, 18, 16, 18, 19, // Right face 
    20, 21, 22, 20, 22, 23 // Left face 
] 
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW); 
cubeVertexIndexBuffer.itemSize = 1; 
cubeVertexIndexBuffer.numItems = 36; 

Answer 1

Cách tôi thích xem xét nó là mỗi đỉnh không phải là một điểm trong không gian mà là một nhóm các thuộc tính. Những thông thường (nhưng không phải luôn luôn) bao gồm vị trí của nó và có thể bao gồm màu sắc, tọa độ kết cấu, v.v., v.v. Một tam giác (hoặc dòng hoặc nguyên thủy khác) được xác định bằng cách chỉ định một tập hợp các đỉnh, sau đó tạo các giá trị cho từng thuộc tính tại mỗi pixel bằng cách nội suy tuyến tính các giá trị trên mỗi đỉnh. Như Liam nói, và như bạn đã nhận ra trong bình luận của bạn, điều này có nghĩa rằng nếu bạn muốn có một điểm trong không gian được sử dụng bởi một đỉnh cho nhiều nguyên thủy - ví dụ, góc của một khối lập phương - - với các thuộc tính khác không phải vị trí khác nhau trên cơ sở mỗi nguyên thủy, bạn cần một đỉnh riêng cho từng kết hợp thuộc tính.

Điều này là lãng phí bộ nhớ ở một mức độ nào đó - nhưng sự phức tạp liên quan đến việc thực hiện nó theo bất kỳ cách nào khác sẽ làm mọi thứ trở nên tồi tệ hơn và yêu cầu phần cứng đồ họa phải làm việc nhiều hơn và giải nén dữ liệu. Đối với tôi, có vẻ như chất thải có thể so sánh với chất thải mà chúng tôi nhận được bằng cách sử dụng giá trị RGBA 32 bit cho mỗi pixel trong bộ nhớ video thay vì giữ bảng tra cứu "màu" của mọi màu chúng tôi muốn sử dụng và sau đó chỉ lưu trữ chỉ mục vào mỗi pixel (đó là, tất nhiên, những gì chúng tôi sử dụng để làm khi RAM đắt hơn).

Answer 2

Nếu màu sắc của một tập hợp các đa giác là như nhau sau đó một đỉnh được chia sẻ bởi tất cả các đa giác, cùng với màu của nó, có thể được định nghĩa một lần và được chia sẻ bởi các đa giác (sử dụng một chỉ mục).

Nếu màu sắc của các đa giác khác nhau thì vị trí của một đỉnh có thể là phổ biến, màu sắc không phải là và do đó không thể chia sẻ toàn bộ đỉnh. Bạn sẽ cần xác định đỉnh cho mỗi đa giác.