|
WebGL constants are used to configure and control various aspects of the rendering pipeline in WebGL. They define specific states, operations, and buffer bitmasks that influence how WebGL processes graphics. In this article, we will explore two practical examples of using WebGL Constants.
Syntax:gl.<method>(<constant>, <value>); Parameters:- <method>: The WebGL method that accepts constants (e.g., enable, disable, blendFunc).
- <constant>: The WebGL constant to be used (e.g., gl.SCISSOR_TEST, gl.BLEND).
- <value>: The value or state to set, often another constant.
These are the following ways to use WebGL Constants:
Common WebGL Constants1. Enable/Disable Capabilities- gl.SCISSOR_TEST
- gl.BLEND
- gl.CULL_FACE
2. Buffer Bits- gl.COLOR_BUFFER_BIT
- gl.DEPTH_BUFFER_BIT
- gl.STENCIL_BUFFER_BIT
3. Blend Factors- gl.SRC_ALPHA
- gl.ONE_MINUS_SRC_ALPHA
- gl.ONE
- gl.ZERO
Using Buffer BitsWe are using WebGL constants to manipulate the canvas’s background color. The gl.clearColor method sets the clear color, and gl.clear with gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT clears the canvas to this color. Users can dynamically change the background color using a color picker or reset it to white with a button.
Example: This example shows the use of all types of Buffer BIts.
HTML
<!DOCTYPE html>
<html>
<head>
<title> WebGL constants</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid black;
background-color: #ffffff;
}
.controls {
margin-top: 20px;
}
.color-picker {
margin: 5px;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Example 1: Using WebGL for Color Manipulation of Canvas</h3>
<canvas id="webgl-canvas" width="300" height="300"></canvas>
<div class="controls">
<label for="bg-color">Select Background Color:</label>
<input type="color" id="bg-color" class="color-picker" value="#ff0000">
<button id="clear-button">Clear Canvas</button>
</div>
<script>
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL not supported');
document.body.innerHTML =
'<p>WebGL is not supported in your browser.</p>';
} else {
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT |
gl.DEPTH_BUFFER_BIT |
gl.STENCIL_BUFFER_BIT);
document.getElementById('bg-color')
.addEventListener('input', function (event) {
const color = event.target.value;
const r = parseInt(color.slice(1, 3), 16) / 255;
const g = parseInt(color.slice(3, 5), 16) / 255;
const b = parseInt(color.slice(5, 7), 16) / 255;
gl.clearColor(r, g, b, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT |
gl.DEPTH_BUFFER_BIT |
gl.STENCIL_BUFFER_BIT);
});
document.getElementById('clear-button')
.addEventListener('click', function () {
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT |
gl.DEPTH_BUFFER_BIT |
gl.STENCIL_BUFFER_BIT);
});
}
</script>
</body>
</html>
Output:
 Using gl.SCISSOR_TESTWe are using WebGL constants like gl.SCISSOR_TEST to enable and disable the scissor test, which limits rendering to a specified rectangle. The gl.clearColor constant is used to set the canvas clear color, and gl.clear clears the canvas with the current clear color, either affecting the entire canvas or just the scissor-rectangular area based on the button actions.
Example: This example shows the use of gl.SCISSOR_TEST.
HTML
<!DOCTYPE html>
<html>
<head>
<title> WebGL constants</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid black;
background-color: #ffffff;
}
.controls {
margin-top: 20px;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Example 2: Using WebGL Constants for Scissor Test and Clearing</h3>
<canvas id="webgl-canvas" width="300" height="300"></canvas>
<div class="controls">
<button id="clear-canvas">Clear Canvas</button>
<button id="set-scissor">Set Scissor Rectangle</button>
</div>
<script>
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL not supported');
document.body.innerHTML =
'<p>WebGL is not supported in your browser.</p>';
} else {
document.getElementById('clear-canvas')
.addEventListener('click', function () {
gl.disable(gl.SCISSOR_TEST);
gl.clearColor(1.0, 0.5, 0.5, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
});
document.getElementById('set-scissor')
.addEventListener('click', function () {
gl.enable(gl.SCISSOR_TEST);
gl.scissor(50, 50, 150, 150);
gl.clearColor(0.5, 0.5, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
});
}
</script>
</body>
</html>
Output:
|
.gif){kind=small}
