console
var canvas = document.getElementById('webgl')
var gl = canvas.getContext('webgl')
var vertex_shader = `
attribute vec4 a_pos;
void main() {
gl_Position=a_pos;
gl_PointSize=25.0;
}
`
var frag_shader = `
precision lowp float;
uniform vec4 u_color;
void main() {
gl_FragColor=u_color;
}
`
var vertex = gl.createShader(gl.VERTEX_SHADER)
var frag = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(vertex, vertex_shader)
gl.shaderSource(frag, frag_shader)
gl.compileShader(vertex)
gl.compileShader(frag)
var program = gl.createProgram()
gl.attachShader(program, vertex)
gl.attachShader(program, frag)
gl.linkProgram(program)
gl.useProgram(program)
var dataVertices = new Float32Array([
0.0, 0.0,
0.5,0.5,
0.5,-0.5,
-0.5,-0.5,
-0.5,0.5
])
var buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, dataVertices, gl.STATIC_DRAW);
var a_position = gl.getAttribLocation(program, 'a_pos')
gl.vertexAttribPointer(a_position,2, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(a_position)
var u_color = gl.getUniformLocation(program, 'u_color')
gl.uniform4f(u_color, 0.0,0.0,1.0,1.0)
gl.clearColor(0.0,0.0,0.0,1.0)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLES, 0,3)
<canvas id='webgl' width="500" height="500"></canvas>