كيف تعمل سمات الألوان في VBO؟

Question

أنا أرمز إلى OpenGL ES 2.0 (WebGL). أنا أستخدم VBOs لرسم البدائل. لدي صفيف قمة الرأس ، صفيف اللون ومجموعة من المؤشرات. لقد نظرت إلى رموز العينة والكتب والبرنامج التعليمي ، لكن هناك شيء واحد لا أحصل عليه - إذا تم تعريف اللون في قمة الرأس ، فكيف يؤثر ذلك على الأسطح المضلعة المجاورة لتلك القمم؟ (أنا مبتدئ في OpenGL (ES))

سأشرح مع مثال. لدي مكعب لرسم. من ما قرأته في كتاب OpenGles ، يتم تعريف اللون على أنه سمة قمة. في هذه الحالة ، إذا كنت أرغب في رسم 6 وجوه من المكعب مع 6 ألوان مختلفة ، فكيف يمكنني تحديد الألوان. مصدر ارتباك هو: كل قمة شائعة في 3 وجوه ، فكيف ستساعد في تحديد لون لكل قمة؟ (أو يجب تحديد اللون لكل فهرس؟). حقيقة أننا نحتاج إلى تقسيم هذه الوجوه إلى مثلثات ، تجعل من الصعب علي أن أفهم كيف تعمل هذه العلاقة. نفس الارتباك يذهب للحواف. بدلاً من رسم المثلثات ، دعنا نقول أنني أريد رسم حواف باستخدام خطوط بدائية. كل حافة من الألوان المختلفة. كيف من المفترض أن أحدد سمات الألوان في هذه الحالة؟

لقد رأيت القليل من الأمثلة العاملة. على وجه التحديد هذا البرنامج التعليمي: http://learningwebgl.com/blog/؟p=370

أرى كيف يتم تعريف صفيف اللون في المثال أعلاه لرسم مكعب به 6 وجوه ملونة مختلفة ، لكنني لا أفهم لماذا يتم تعريفها بهذه الطريقة. (لماذا يتم نسخ كل لون 4 مرات في ألواح UnpackedColors على سبيل المثال؟)

هل يمكن لأحد أن يشرح كيف تعمل سمات الألوان في VBO؟

الرابط أعلاه يبدو أنه يتعذر الوصول إليه ، لذلك سأقوم بنشر الكود ذي الصلة هنا

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

الطريقة التي أحب أن أنظر بها هي أن كل قمة لا تعتبر نقطة في الفضاء بل حزمة من السمات. وتشمل هذه بشكل عام (ولكن ليس دائمًا) موقعها و مايو قم بتضمين لونه أو إحداثيات الملمس ، وما إلى ذلك ، وما إلى ذلك. القيم.

كما يقول ليام ، وكما أدركت في تعليقك ، فهذا يعني أنه إذا كنت ترغب في الحصول على نقطة في الفضاء المستخدمة من قبل قمة للعديد من البدائية - على سبيل المثال ، زاوية المكعب - مع غيرها من غيرها -سمات التوظيف تتراوح على أساس لكل حد ، تحتاج إلى قمة منفصلة لكل مجموعة من السمات.

هذا مضيعة للذاكرة إلى حد ما - لكن التعقيد الذي ينطوي عليه القيام بذلك بأي طريقة أخرى سيزيد الأمور سوءًا ، وسيتطلب من أجهزة الرسومات القيام بالكثير من العمل في تفريغ وإعادة تعبئة البيانات. بالنسبة لي ، يبدو أن النفايات مماثلة للنفايات التي نحصل عليها باستخدام قيم RGBA 32 بت لكل بكسل في ذاكرة الفيديو الخاصة بنا بدلاً من الاحتفاظ بجدول "لوحة" لكل لون نريد استخدامه ثم تخزين فقط فهرسة في هذا البكسل (وهو ، بالطبع ، ما اعتدنا القيام به عندما كان ذاكرة الوصول العشوائي أكثر تكلفة).

Answer 2

إذا كان لون مجموعة من المضلعات هو نفسه ، فيمكن تعريف قمة الرأس التي تشاركها جميع المضلعات ، إلى جانب لونها ، مرة واحدة ومشاركتها بواسطة المضلعات (باستخدام فهرس).

إذا كان لون المضلعات مختلفًا ، على الرغم من أن موضع قمة الرأس قد يكون شائعًا ، فإن اللون ليس كذلك ، وبالتالي لا يمكن مشاركة قمة الرأس ككل. ستحتاج إلى تحديد القمة لكل مضلع.