CODEWITHSUNDEEP
javascriptglslwebgl
PintoDoido
PintoDoido

Reputation: 1051

How can I render points with different colors?

I am a beginner in opengl, and I am trying to draw three points with three different colors. I am trying to merge the code in https://www.tutorialspoint.com/webgl/webgl_drawing_points.htm and https://www.tutorialspoint.com/webgl/webgl_colors.htm.

So far I have come up with the following code:

/*================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>

However, this code only produces a grey square, without any points whatsoever, let alone colors. In firefox, the console output displays no errors.

Why is this happening? How do I fix this?

Thanks

Upvotes: 4

Views: 1940

Answers (1)

Rabbid76
Rabbid76

Reputation: 210918

The points are there, they are just to small to "see" it. Set the size of the points, e.g. by adding gl_PointSize = 10.0; to the vertex shader. Note the size of the points is taken from the shader builtin uniform gl_PointSize and if the point size is less than or equal to zero, then the results is undefined.
Your vertex shader may look like this.

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

Further I recommend to check for compile and linke errors:

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));

See your program, with the applied changes:

/*================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>

Upvotes: 3

Related Questions