Here is an example of an HTML page with two tile-style buttons and a 3D view using WebGL:
<!DOCTYPE html>
<html>
<head>
<style>
.tile-button {
display: block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: blue;
color: white;
font-size: 16px;
border-radius: 4px;
}
</style>
</head>
<body>
<button class="tile-button" onclick="displayDate()">Show date</button>
<button class="tile-button" onclick="drawTriangle()">Draw triangle</button>
<canvas id="view"></canvas>
<script>
function displayDate() {
var currentDate = new Date();
alert(currentDate);
}
function drawTriangle() {
var canvas = document.getElementById("view");
var gl = canvas.getContext("webgl");
// Set the clear color to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>The first button has an onclick attribute that calls the displayDate function, which displays the current date in an alert box. The second button has an onclick attribute that calls the drawTriangle function, which gets the canvas element with the id “view” and sets up a WebGL context for it.
Here is an example of how you could divide the HTML, CSS, and JavaScript code into separate files and link to them from an HTML file:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="tile-button" onclick="displayDate()">Show date</button>
<button class="tile-button" onclick="drawTriangle()">Draw triangle</button>
<canvas id="view"></canvas>
<script type="text/javascript" src="script.js"></script>
</body>
</html>style.css
.tile-button {
display: block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: blue;
color: white;
font-size: 16px;
border-radius: 4px;
}script.js
function displayDate() {
var currentDate = new Date();
alert(currentDate);
}
function drawTriangle() {
var canvas = document.getElementById("view");
var gl = canvas.getContext("webgl");
// Set the clear color to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer
gl.clear(gl.COLOR_BUFFER_BIT);
}Here is an example of a drawTriangle function that draws a green triangle on a black background using the WebGL API:
function drawTriangle() {
// Get the canvas element and the WebGL context
var canvas = document.getElementById("view");
var gl = canvas.getContext("webgl");
// Set the clear color to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer
gl.clear(gl.COLOR_BUFFER_BIT);
// Set the viewport size
gl.viewport(0, 0, canvas.width, canvas.height);
// Create a triangle
var vertices = [
0.0, 0.5, // top vertex
-0.5, -0.5, // bottom left vertex
0.5, -0.5 // bottom right vertex
];
// Create a buffer
var vertexBuffer = gl.createBuffer();
// Bind the buffer to ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Copy the vertices data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Create a vertex shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
// Set the shader source code
gl.shaderSource(vertexShader, `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`);
// Compile the shader
gl.compileShader(vertexShader);
// Create a fragment shader
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// Set the shader source code
gl.shaderSource(fragmentShader, `
void main() {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
`);
// Compile the shader
gl.compileShader(fragmentShader);
// Create a program
var program = gl.createProgram();
// Attach the shaders to the program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// Link the program
gl.linkProgram(program);
// Use the program
gl.useProgram(program);
// Enable the vertex attribute
gl.enableVertexAttribArray(0);
// Bind the buffer to the attribute
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Set the attribute pointer
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
}This function does the following:
- Gets the canvas element and the WebGL context. The canvas element is the HTML element that will be used to display the triangle, and the WebGL context is an object that provides methods for drawing 3D graphics.
- Clears the canvas to black. The
gl.clearColorfunction sets the color that the canvas will be cleared to when thegl.clearfunction is called. Thegl.clearfunction clears the color buffer, which is a buffer that stores the colors of the pixels on the canvas. - Sets the viewport size. The viewport is the part of the canvas that is used to display the triangle. The
gl.viewportfunction sets the size of the viewport to the size of the canvas. - Creates a triangle. The vertices of the triangle are defined as an array of coordinates.
- Creates a buffer. A buffer is an object that stores data that will be used to draw the triangle.
- Binds the buffer to the
ARRAY_BUFFERtarget. This tells WebGL that the buffer will be used to store vertex data. - Copies the vertices data to the buffer. The
gl.bufferDatafunction copies the data from the vertices array to the buffer. - Creates a vertex shader. A vertex shader is a program that runs on the GPU and is responsible for transforming the vertices of the triangle.
- Sets the shader source code. The source code of the vertex shader is a GLSL (OpenGL Shading Language) program that specifies how the vertices should
Before click “Draw”
After click “Draw”
Leave a Reply