helloworld.js

let ctx = document.createElement('canvas')
document.body.appendChild(ctx)
ctx.width = 500
ctx.height = 500

let gl = ctx.getContext('webgl')
gl.viewport(0, 0, 500, 500)
gl.clearColor(0.0, 0.0, 0.0, 1.0)








let vShaderSource = `precision highp float;
attribute vec2 aPosition;
attribute vec3 aColor;

varying vec3 fColor;

void main(){
    fColor = aColor;
    gl_Position = vec4(aPosition, 1.0, 1.0);
    gl_PointSize = 20.0;
}`
let vShaderObject = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vShaderObject, vShaderSource)
gl.compileShader(vShaderObject)
if (!gl.getShaderParameter(vShaderObject, gl.COMPILE_STATUS)) 
  console.error(gl.getShaderInfoLog(vShaderObject));










let fShaderSource = `precision highp float;
varying vec3 fColor;
void main(){
    gl_FragColor = vec4(fColor, 1.0);
}`
let fShaderObject = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fShaderObject, fShaderSource)
gl.compileShader(fShaderObject)
if (!gl.getShaderParameter(fShaderObject, gl.COMPILE_STATUS)) 
  console.error(gl.getShaderInfoLog(fShaderObject));











let program = gl.createProgram()
gl.attachShader(program, vShaderObject)
gl.attachShader(program, fShaderObject)
gl.linkProgram(program)
gl.useProgram(program)
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
  console.error(gl.getProgramInfoLog(program));









//aColor
let aColor = gl.getAttribLocation(program, 'aColor')
//                     r  b  b, r  g  b, r  g  b 
let colorBufferData = [0, 1, 0, 1, 0, 0, 0, 0, 1]
let colorBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorBufferData), gl.STATIC_DRAW)
gl.vertexAttribPointer(aColor, 3, gl.FLOAT, gl.FALSE, 0,0)
gl.enableVertexAttribArray(aColor)









//aPosition
let aPosition = gl.getAttribLocation(program, 'aPosition')
//                        x   y,    x     y,   x     y
let positionBufferData = [0, 0.9, -0.9, -0.9, 0.9, -0.9]
let positionBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionBufferData), gl.STATIC_DRAW)
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, gl.FALSE, 0, 0)
gl.enableVertexAttribArray(aPosition)












//Draw
let loop = _ => {
  gl.clear(gl.COLOR_BUFFER_BIT)
  gl.drawArrays(gl.TRIANGLES, 0, 3)
 
  requestAnimationFrame(loop)
}

loop()