Как я могу рендерить точки с разными цветами? - PullRequest
Новая
       22

Как я могу рендерить точки с разными цветами?

0 голосов
/ 24 октября 2018

Я новичок в 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 вывод консоли не отображает ошибок.

Почему это происходит?Как мне это исправить?

Спасибо

1 Ответ

0 голосов
/ 24 октября 2018

Точки есть, они просто малы, чтобы «увидеть» их.Установите размер точек, например, добавив 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>
...