Skip to content

Instantly share code, notes, and snippets.

@GlenDC
Created December 5, 2022 20:52
Show Gist options
  • Save GlenDC/276bdcffca9222613afe4d275130a8f4 to your computer and use it in GitHub Desktop.
Save GlenDC/276bdcffca9222613afe4d275130a8f4 to your computer and use it in GitHub Desktop.
Experiments with ChatGPT and GitHub Co-Pilot
<!DOCTYPE html>
<html>
<!-- Generated mostly with ChatGPT, with the help of GitHub Co-Pilot to correct some bits fast -->
<head>
<meta charset="UTF-8">
<title>My page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
<script>
window.addEventListener('load', function () {
// vertex shader source code
const vertexShaderSource = `
attribute vec3 aPosition;
attribute vec2 aSize;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
vec4 position = vec4(aPosition, 1.0);
gl_Position = uProjectionMatrix * uModelViewMatrix * position;
gl_PointSize = aSize.x;
}
`;
// fragment shader source code
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// create a WebGL context
const canvas = document.createElement("canvas");
// get webgl context
const gl = canvas.getContext("webgl");
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
throw new Error(gl.getShaderInfoLog(shader));
}
return shader;
}
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
throw new Error(gl.getProgramInfoLog(program));
}
return program;
}
// compile shaders
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
// create a program and link shaders
const program = createProgram(gl, vertexShader, fragmentShader);
// look up attribute and uniform locations
const positionLocation = gl.getAttribLocation(program, "aPosition");
const sizeLocation = gl.getAttribLocation(program, "aSize");
const modelViewMatrixLocation = gl.getUniformLocation(program, "uModelViewMatrix");
const projectionMatrixLocation = gl.getUniformLocation(program, "uProjectionMatrix");
const trianglePositions = [
0, 0, 0,
0, 0.5, 0,
0.7, 0, 0,
];
const triangleSizes = [
10, 10,
20, 20,
30, 60,
];
// provide data for attributes
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(trianglePositions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
const sizeBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleSizes), gl.STATIC_DRAW);
gl.enableVertexAttribArray(sizeLocation);
gl.vertexAttribPointer(sizeLocation, 2, gl.FLOAT, false, 0, 0);
// set up model-view and projection matrices
const modelViewMatrix = mat4.create();
const projectionMatrix = mat4.create();
mat4.lookAt(modelViewMatrix, [0, 0, 1], [0, 0, 0], [0, 1, 0]);
mat4.perspective(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 100);
gl.useProgram(program);
gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);
// draw the triangles
gl.drawArrays(gl.TRIANGLES, 0, 3);
// add canvas to the dom
document.body.appendChild(canvas);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment