Draw points for WebGL

Draw a single point

var vertexShaderSource = ' ' +
    'void main(){' +
    // Assign the pixel size to the built-in variable gl_PointSize
    '   gl_PointSize=20.0;' +
    // Vertex position at the origin of coordinates
    'gl_Position = vec4 (0.0, 0.0, 0.0, 1.0); ' +
    '} ';

// Chip shader source code
var fragmentShaderSource = ' ' +
    'void main(){' +
    // Define the pixel color
    'gl_FragColor = vec4 (1.0, 0.0, 0.0, 1.0); ' +
    '} ';
var canvas = document.getElementById('canvas');
// Get the WebGL context using the getContext() method
var gl= canvas.getContext('webgl');
var program = initShader(gl, vertexShaderSource, fragmentShaderSource)
gl.clearColor(0.0.0.1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.POINTS,0.1);

function initShader(gl,vertexShaderSource,fragmentShaderSource){
  // Create a vertex shader object
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  // Create a slice shader object
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  // Introduce vertex, slice shader source code
  gl.shaderSource(vertexShader,vertexShaderSource);
  gl.shaderSource(fragmentShader,fragmentShaderSource);
  // Build vertex and slice shaders
  gl.compileShader(vertexShader);
  gl.compileShader(fragmentShader);

  // Create program object program
  var program = gl.createProgram();
  // Attach vertex shaders and slice shaders to program
  gl.attachShader(program,vertexShader);
  gl.attachShader(program,fragmentShader);
  / / link to the program
  gl.linkProgram(program);
  / / using the program
  gl.useProgram(program);
  // Return program object
  return program;
}
Copy the code

Gl_PointSize and gl_Position are fixed values and can be assigned separately by js:

var vertexShaderSource = ' ' +
    'attribute vec4 a_Position'
    'void main(){' +
    // Assign the pixel size to the built-in variable gl_PointSize
    '   gl_PointSize=20.0;' +
    // Vertex position at the origin of coordinates
    ' gl_Position = a_Position; ' +
    '} '; .var a_Position = gl.getAttribLocation(program, 'a_Position')
gl.vertexAttrib3f(a_Position, 0.0.0.0.0.0)

Copy the code

Draws a single point is above, until don’t understand the attribute vec4 a_Position, why should a_Position defined as vec4, explains the reason in this link: zhidao.baidu.com/question/94… Here, of course, the gl vertexAttrib3f, action is set in the shader code attribute values, there are a lot of their kin function, gl. VertexAttrib [1 | 2 | 3 | 4] f, later on these methods summarized separately.

Draw multiple points

 // Vertex shader
 var vertexSource = ' ' + 
 'attribute vec4 a_Position; ' + 
 'attribute float a_PointSize; ' + 
 'void main(){' + 
 ' gl_PointSize = a_PointSize; ' + 
 ' gl_Position = a_Position; ' + 
 '} ';

// Chip shader
var fragmentSource = ' ' + 
'void main(){' + 
'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); ' + 
'} ';

var canvas = document.getElementById('canvas')

var gl = canvas.getContext('webgl')

// Create an object
var vertexShader = gl.createShader(gl.VERTEX_SHADER)
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

// Pass in shader code
gl.shaderSource(vertexShader, vertexSource)
gl.shaderSource(fragmentShader, fragmentSource)

// Compile the shader
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)

// Create a shader program
var program = gl.createProgram()
// The program binds the shader object
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)

// Link program
gl.linkProgram(program)
// Use the program
gl.useProgram(program)

// Vertex position
var n = 3
var vertices = new Float32Array([
	0.0.0.5, -0.5, -0.5.0.5, -0.5
])
// Create a buffer object
var vertexBuffer = gl.createBuffer()

// Bind the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

// Write data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

// Get the attribute in the shader
var a_position = gl.getAttribLocation(program, 'a_Position')

// Assign a_position to buffer data (gl.float)
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false.0.0)
// the a_position variable is associated with the corresponding buffer object
gl.enableVertexAttribArray(a_position)

var sizes = new Float32Array([
    10.0.20.0.30.0
])
var sizeBuffer = gl.createBuffer()

gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer)
gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW)

var a_PointSize = gl.getAttribLocation(program, 'a_PointSize')

gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false.0.0)
gl.enableVertexAttribArray(a_PointSize)

// Set the background of the drawing area
gl.clearColor(0.0.0.1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.POINTS, 0, n)
Copy the code