如何渲染不同颜色的点？

Question

我是opengl的初学者，我试图用三种不同的颜色绘制三个点。我正在尝试合并https://www.tutorialspoint.com/webgl/webgl_drawing_points.htm和https://www.tutorialspoint.com/webgl/webgl_colors.htm中的代码。

到目前为止，我已经提出了以下代码：

/*================Creating a canvas=================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl'); 

/*==========Defining and storing the geometry=======*/

var vertices = [
-0.5,0.5,0.0,
0.0,0.5,0.0,
-0.25,0.25,0.0, 
];

var colors = [0,0,1, 1,0,0, 0,1,0,];

// Create an empty buffer object to store the vertex buffer
var vertex_buffer = gl.createBuffer();

//Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);

// Create an empty buffer object and store color data
var color_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);


/*=========================Shaders========================*/

// vertex shader source code
var vertCode = 'attribute vec3 coordinates;'+
'attribute vec3 color;'+
'varying vec3 vColor;'+
'void main(void) {' +
    ' gl_Position = vec4(coordinates, 1.0);' +
    'vColor = color;'+
'}';

// Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);

// Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);

// Compile the vertex shader
gl.compileShader(vertShader);

// fragment shader source code
var fragCode = 'precision mediump float;'+
'varying vec3 vColor;'+
'void main(void) {'+
    'gl_FragColor = vec4(vColor, 1.);'+
'}';

// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

// Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);

// Compile the fragmentt shader
gl.compileShader(fragShader);

// Create a shader program object to store
// the combined shader program
var shaderProgram = gl.createProgram();

// Attach a vertex shader
gl.attachShader(shaderProgram, vertShader); 

// Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);

// Link both programs
gl.linkProgram(shaderProgram);

// Use the combined shader program object
gl.useProgram(shaderProgram);

/*======== Associating shaders to buffer objects ========*/

// Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, "coordinates");

// Point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

// Enable the attribute
gl.enableVertexAttribArray(coord);

// bind the color buffer
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);

// get the attribute location
var color = gl.getAttribLocation(shaderProgram, "color");

// point attribute to the color buffer object
gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;

// enable the color attribute
gl.enableVertexAttribArray(color);

/*============= Drawing the primitive ===============*/

// Clear the canvas
gl.clearColor(0.5, 0.5, 0.5, 0.9);

// Enable the depth test
gl.enable(gl.DEPTH_TEST);

// Clear the color buffer bit
gl.clear(gl.COLOR_BUFFER_BIT);

// Set the view port
gl.viewport(0,0,canvas.width,canvas.height);

// Draw the triangle
gl.drawArrays(gl.POINTS, 0, 3);

<canvas width = "570" height = "570" id = "my_Canvas"></canvas>

但是，此代码仅产生一个灰色正方形，没有任何点，更不用说颜色了。在firefox中，控制台输出不显示任何错误。

为什么会这样？我该如何解决？

谢谢

Answer 1

要点就在那里了，它们很小就可以“看到”它。设置点的大小，例如通过将gl_PointSize = 10.0;添加到顶点着色器。请注意，点的大小是从着色器内置的统一gl_PointSize中获取的，如果点的大小小于或等于零，则结果是不确定的。
您的顶点着色器可能看起来像这样。

 attribute vec3 color;
 varying vec3 vColor;
 void main(void) {
     gl_Position = vec4(coordinates, 1.0);
     vColor = color;
     gl_PointSize = 10.0;
 }

我还建议检查编译和链接错误：

gl.compileShader(vertShader);
if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) 
    alert(gl.getShaderInfoLog(vertShader));

gl.compileShader(fragShader);
if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) 
    alert(gl.getShaderInfoLog(fragShader));

gl.linkProgram(shaderProgram);
if ( !gl.getProgramParameter(shaderProgram, gl.LINK_STATUS) )
    alert(gl.getProgramInfoLog(shaderProgram));

查看您的程序，并进行以下更改：

/*================Creating a canvas=================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl'); 

/*==========Defining and storing the geometry=======*/

var vertices = [
  -0.5,0.5,0.0,
  0.0,0.5,0.0,
  -0.25,0.25,0.0, 
];

var colors = [0,0,1, 1,0,0, 0,1,0,];

// Create an empty buffer object to store the vertex buffer
var vertex_buffer = gl.createBuffer();

//Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);

// Create an empty buffer object and store color data
var color_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);


/*=========================Shaders========================*/

// vertex shader source code
var vertCode = 'attribute vec3 coordinates;'+
  'attribute vec3 color;'+
  'varying vec3 vColor;'+
  'void main(void) {' +
      ' gl_Position = vec4(coordinates, 1.0);' +
      'vColor = color;'+
      'gl_PointSize = 10.0;'+
  '}';

// Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);

// Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);

// Compile the vertex shader
gl.compileShader(vertShader);
if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) 
    alert(gl.getShaderInfoLog(vertShader));

// fragment shader source code
var fragCode = 'precision mediump float;'+
  'varying vec3 vColor;'+
  'void main(void) {'+
      'gl_FragColor = vec4(vColor, 1.);'+
  '}';

// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

// Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);

// Compile the fragmentt shader
gl.compileShader(fragShader);
if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) 
    alert(gl.getShaderInfoLog(fragShader));

// Create a shader program object to store
// the combined shader program
var shaderProgram = gl.createProgram();

// Attach a vertex shader
gl.attachShader(shaderProgram, vertShader); 

// Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);

// Link both programs
gl.linkProgram(shaderProgram);
if ( !gl.getProgramParameter(shaderProgram, gl.LINK_STATUS) )
    alert(gl.getProgramInfoLog(shaderProgram));

// Use the combined shader program object
gl.useProgram(shaderProgram);

/*======== Associating shaders to buffer objects ========*/

// Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, "coordinates");

// Point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

// Enable the attribute
gl.enableVertexAttribArray(coord);

// bind the color buffer
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);

// get the attribute location
var color = gl.getAttribLocation(shaderProgram, "color");

// point attribute to the color buffer object
gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;

// enable the color attribute
gl.enableVertexAttribArray(color);

/*============= Drawing the primitive ===============*/

// Clear the canvas
gl.clearColor(0.5, 0.5, 0.5, 0.9);

// Enable the depth test
gl.enable(gl.DEPTH_TEST);

// Clear the color buffer bit
gl.clear(gl.COLOR_BUFFER_BIT);

// Set the view port
gl.viewport(0,0,canvas.width,canvas.height);

// Draw the triangle
gl.drawArrays(gl.POINTS, 0, 3);

 <canvas width = "570" height = "570" id = "my_Canvas"></canvas>