javascript - 使用 webgl 创建六 Angular 星

Question

我最近开始学习使用 webgl 创建更复杂的多边形，但是我目前无法创建六 Angular 星形多边形。我尝试过使用 gl.TRIANGLES，但是它创建了不寻常的形状，这根本不是我想要的。

我所说的六 Angular 星是指二维六边形，每个边都有三 Angular 形。

  var InitDemo = function(){
var canvas = document.getElementById('polygon-surface');
var gl = canvas.getContext('webgl');

//geometry
var vertices = [];
var indices = [];
vertices.push(0,0);
indices.push(0);

                      //start by creating the hexagon vertices
for(var i = 0; i <= 6; i++){
  var degree_offset = i * 60.0;
  var radian_offset = degree_offset * (Math.PI / 180.0);
  var x_pos = 0.5*Math.cos(radian_offset);
  var y_pos = 0.5*Math.sin(radian_offset);

  vertices.push(x_pos);
  vertices.push(y_pos);
  indices.push(i+1);
}


var index = 1;
var inner_poly_vert = indices.length -1;
                      //find the outer vertices needed for the star
for(var i = 1;i<inner_poly_vert;i++){
  var c_x = vertices[2*i+0];
  var c_y = vertices[2*i+1];
  var n_x = vertices[2*i+2];
  var n_y = vertices[2*i+3];
  var x_mp = (c_x + n_x);
  var y_mp = (c_y + n_y);
  vertices.push(x_mp,y_mp);
  indices.push(indices.length);
}
var temp = [];
                      //create the star from the hexagon and outer vertices
for(var i = 0;i<6;i++){
  temp.push(0,i+1,i+2);
  temp.push(i+1,i+8,i+2);
}

indices = temp;
console.log(indices);
console.log(vertices);

//create VBO
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

//create shader
var vertShader = gl.createShader(gl.VERTEX_SHADER);
var vertSrc = 'attribute vec2 coordinates;'+
        'void main(){'+
        'gl_Position = vec4(coordinates,0.0,1.0);'+
        '}';
gl.shaderSource(vertShader, vertSrc);
gl.compileShader(vertShader);
gl.compileShader(vertShader);
if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
  console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertShader));
  return;
}

var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
var fragSrc = 'void main(){'+
        'gl_FragColor = vec4(0.0,0.7,0.9,1.0);'+
        '}';
gl.shaderSource(fragShader, fragSrc);
gl.compileShader(fragShader);
if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
  console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragShader));
  return;
}

var program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);

gl.linkProgram(program);
gl.useProgram(program);

//association
var coord = gl.getAttribLocation(program, 'coordinates');
gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 2*Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(coord);

//draw
gl.clearColor(0.9, 0.2, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, vertices.length/2);// change back to /2 find out what draw arrays does


  }
  
InitDemo();

body{
  background-color: black;
} 

<canvas id="polygon-surface" width="200px" height="200px"></canvas>

我认为问题与我的 VBO 以及我如何使用元素数组缓冲区引用我的顶点有关。

Answer 1

您需要调用gl.drawElements来使用索引进行绘制

gl.drawElements(gl.TRIANGLES, temp.length, gl.UNSIGNED_SHORT, 0);

  var InitDemo = function(){
var canvas = document.getElementById('polygon-surface');
var gl = canvas.getContext('webgl');

//geometry
var vertices = [];
var indices = [];
vertices.push(0,0);
indices.push(0);

                      //start by creating the hexagon vertices
for(var i = 0; i <= 6; i++){
  var degree_offset = i * 60.0;
  var radian_offset = degree_offset * (Math.PI / 180.0);
  var x_pos = 0.5*Math.cos(radian_offset);
  var y_pos = 0.5*Math.sin(radian_offset);

  vertices.push(x_pos);
  vertices.push(y_pos);
  indices.push(i+1);
}


var index = 1;
var inner_poly_vert = indices.length -1;
                      //find the outer vertices needed for the star
for(var i = 1;i<inner_poly_vert;i++){
  var c_x = vertices[2*i+0];
  var c_y = vertices[2*i+1];
  var n_x = vertices[2*i+2];
  var n_y = vertices[2*i+3];
  var x_mp = (c_x + n_x);
  var y_mp = (c_y + n_y);
  vertices.push(x_mp,y_mp);
  indices.push(indices.length);
}
var temp = [];
                      //create the star from the hexagon and outer vertices
for(var i = 0;i<6;i++){
  temp.push(0,i+1,i+2);
  temp.push(i+1,i+8,i+2);
}

indices = temp;
console.log(indices);
console.log(vertices);

//create VBO
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

//create shader
var vertShader = gl.createShader(gl.VERTEX_SHADER);
var vertSrc = 'attribute vec2 coordinates;'+
        'void main(){'+
        'gl_Position = vec4(coordinates,0.0,1.0);'+
        '}';
gl.shaderSource(vertShader, vertSrc);
gl.compileShader(vertShader);
gl.compileShader(vertShader);
if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
  console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertShader));
  return;
}

var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
var fragSrc = 'void main(){'+
        'gl_FragColor = vec4(0.0,0.7,0.9,1.0);'+
        '}';
gl.shaderSource(fragShader, fragSrc);
gl.compileShader(fragShader);
if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
  console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragShader));
  return;
}

var program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);

gl.linkProgram(program);
gl.useProgram(program);

//association
var coord = gl.getAttribLocation(program, 'coordinates');
gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 2*Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(coord);

//draw
gl.clearColor(0.9, 0.2, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, temp.length, gl.UNSIGNED_SHORT, 0);// change back to /2 find out what draw arrays does


  }

InitDemo();

body{
  background-color: black;
} 

<canvas id="polygon-surface" width="200px" height="200px"></canvas>