console
main();
function main() {
const canvas = document.querySelector("#glcanvas");
const gl = canvas.getContext("webgl");
if (!gl) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
return;
}
let vertexSource = `
attribute vec4 a_Position;
attribute float a_PointSize;
void main(){
gl_Position = a_Position;
gl_PointSize = a_PointSize;
}`;
let fragmentSource = `
precision mediump float;
uniform vec4 u_FragColor;
void main(){
gl_FragColor = u_FragColor;
}`;
let shaderProgram = initShaderProgram(gl, vertexSource, fragmentSource);
let a_pos = gl.getAttribLocation(shaderProgram, 'a_Position');
let a_pointSize = gl.getAttribLocation(shaderProgram, 'a_PointSize');
let u_FragColor = gl.getUniformLocation(shaderProgram, 'u_FragColor');
gl.vertexAttrib1f(a_pointSize, 5.0)
let g_points = [];
let g_colors = [];
canvas.onmousedown = function(ev){
drawPoints(ev,gl,canvas, a_pos, u_FragColor, g_points, g_colors);
}
gl.useProgram(shaderProgram);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
function drawPoints(ev, gl, canvas, a_Pos, u_color, points, colors){
let x = ev.clientX;
let y = ev.clientY;
let rect = ev.target.getBoundingClientRect();
x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
points.push([x,y]);
if (x >= 0.0 && y >= 0.0) {
colors.push([1.0, 0.0, 0.0, 1.0]);
} else if (x < 0.0 && y < 0.0) {
colors.push([0.0, 1.0, 0.0, 1.0]);
} else {
colors.push([1.0, 1.0, 1.0, 1.0]);
}
gl.clear(gl.COLOR_BUFFER_BIT);
let len = points.length;
for(let i = 0; i < len; i++) {
let xy = points[i];
let rgba = colors[i];
gl.vertexAttrib3f(a_Pos, xy[0], xy[1], 0.0);
gl.uniform4f(u_color, ...rgba)
gl.drawArrays(gl.POINTS, 0, 1);
}
}
function initShaderProgram(gl, vsSource, fsSource) {
let vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
let fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
<h3>WebGL Demo</h3>
<canvas id="glcanvas" width="640" height="480"></canvas>