Pick Triangle. WebGL 1.0, JavaScript
by Ivan Enzhaev
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pick Triangle. WebGL 1.0, JavaScript</title>
<script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.3.0/gl-matrix-min.js"></script>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
}
#output {
position: absolute;
left: 100px;
bottom: 200px;
color: aliceblue;
}
</style>
</head>
<body>
<div id="output"></div>
<canvas id="renderCanvas">
Your browser does not support HTML5 canvas Element
</canvas>
<script type="x-shader/x-vertex" id="vertexShader">
attribute vec2 aPosition;
uniform mat4 uMvpMatrix;
void main()
{
gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
precision mediump float;
uniform bool uClicked; // Mouse is pressed
void main()
{
vec4 color;
if (uClicked) // Draw in red if mouse is pressed
{
color = vec4(1.0, 0.0, 0.0, 1.0);
}
else
{
color = vec4(0.95, 0.77, 0.5, 1.0);
}
gl_FragColor = color;
}
</script>
<script>
const gl = document.getElementById("renderCanvas").getContext("webgl");
const program = createProgram();
const n = initVertexBuffers(program);
const mvpMatrix = glMatrix.mat4.create();
const projMatrix = glMatrix.mat4.create();
const viewMatrix = glMatrix.mat4.create();
const modelMatrix = glMatrix.mat4.create();
const output = document.getElementById("output");
const worldHeight =...