JavaScript en WebGL
Dit artikel legt JavaScript en WebGL uit.
YouTube Video
javascript-web-gl-texture.js
1// Get WebGL context
2const canvas = document.getElementById("glCanvas");
3const gl = canvas.getContext("webgl");
4if (!gl) {
5 alert("WebGL is not supported by your browser.");
6}
7
8// Vertex shader program
9const vsSource = `
10 attribute vec4 aVertexPosition;
11 attribute vec2 aTextureCoord;
12 varying highp vec2 vTextureCoord;
13 void main(void) {
14 gl_Position = aVertexPosition;
15 vTextureCoord = aTextureCoord;
16 }
17`;
18
19// Fragment shader program
20const fsSource = `
21 varying highp vec2 vTextureCoord;
22 uniform sampler2D uSampler;
23 void main(void) {
24 gl_FragColor = texture2D(uSampler, vTextureCoord);
25 }
26`;
27
28// Compile shader
29function loadShader(type, source) {
30 const shader = gl.createShader(type);
31 gl.shaderSource(shader, source);
32 gl.compileShader(shader);
33 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
34 console.error("Shader compile failed: ", gl.getShaderInfoLog(shader));
35 gl.deleteShader(shader);
36 return null;
37 }
38 return shader;
39}
40
41// Initialize shader program
42function initShaderProgram(vsSource, fsSource) {
43 const vertexShader = loadShader(gl.VERTEX_SHADER, vsSource);
44 const fragmentShader = loadShader(gl.FRAGMENT_SHADER, fsSource);
45 const shaderProgram = gl.createProgram();
46 gl.attachShader(shaderProgram, vertexShader);
47 gl.attachShader(shaderProgram, fragmentShader);
48 gl.linkProgram(shaderProgram);
49 if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
50 console.error("Unable to initialize the shader program: " + gl.getProgramInfoLog(shaderProgram));
51 return null;
52 }
53 return shaderProgram;
54}
55
56const shaderProgram = initShaderProgram(vsSource, fsSource);
57const programInfo = {
58 program: shaderProgram,
59 attribLocations: {
60 vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
61 textureCoord: gl.getAttribLocation(shaderProgram, "aTextureCoord"),
62 },
63 uniformLocations: {
64 uSampler: gl.getUniformLocation(shaderProgram, "uSampler"),
65 },
66};
67
68// Define positions and texture coordinates
69const positions = new Float32Array([
70 -1.0, 1.0,
71 1.0, 1.0,
72 -1.0, -1.0,
73 1.0, -1.0,
74]);
75
76const textureCoordinates = new Float32Array([
77 0.0, 0.0,
78 1.0, 0.0,
79 0.0, 1.0,
80 1.0, 1.0,
81]);
82
83// Create position buffer
84const positionBuffer = gl.createBuffer();
85gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
86gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
87
88// Create texture coordinate buffer
89const texCoordBuffer = gl.createBuffer();
90gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
91gl.bufferData(gl.ARRAY_BUFFER, textureCoordinates, gl.STATIC_DRAW);
92
93// Create and load texture
94const texture = gl.createTexture();
95gl.bindTexture(gl.TEXTURE_2D, texture);
96
97const image = new Image();
98image.src = "texture.png";
99image.onload = () => {
100 gl.bindTexture(gl.TEXTURE_2D, texture);
101 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
102 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
103 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
104 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
105 drawScene();
106};
107
108// Draw function
109function drawScene() {
110 gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black
111 gl.clear(gl.COLOR_BUFFER_BIT);
112
113 gl.useProgram(programInfo.program);
114
115 // Bind vertex position buffer
116 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
117 gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
118 gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
119
120 // Bind texture coordinate buffer
121 gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
122 gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, 2, gl.FLOAT, false, 0, 0);
123 gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
124
125 // Bind texture
126 gl.activeTexture(gl.TEXTURE0);
127 gl.bindTexture(gl.TEXTURE_2D, texture);
128 gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
129
130 // Draw rectangle
131 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
132}javascript-web-gl-lighting.js
1// Get the WebGL context
2const canvas = document.getElementById("glCanvas");
3const gl = canvas.getContext("webgl");
4if (!gl) {
5 alert("WebGL not supported");
6 throw new Error("WebGL not supported");
7}
8
9// Vertex shader
10const vertexShaderSource = `
11attribute vec3 aPosition;
12attribute vec3 aNormal;
13uniform mat4 uModelViewMatrix;
14uniform mat4 uProjectionMatrix;
15varying vec3 vNormal;
16
17void main(void) {
18 gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
19 vNormal = aNormal;
20}
21`;
22
23// Fragment shader (with lighting)
24const fragmentShaderSourceWithLighting = `
25precision mediump float;
26uniform vec3 uLightingDirection;
27uniform vec4 uLightColor;
28varying vec3 vNormal;
29
30void main(void) {
31 vec3 lightDirection = normalize(uLightingDirection);
32 float directionalLightWeighting = max(dot(normalize(vNormal), lightDirection), 0.0);
33 gl_FragColor = uLightColor * directionalLightWeighting;
34}
35`;
36
37// Shader creation helper
38function createShader(gl, type, source) {
39 const shader = gl.createShader(type);
40 gl.shaderSource(shader, source);
41 gl.compileShader(shader);
42 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
43 console.error("Shader compile error:", gl.getShaderInfoLog(shader));
44 gl.deleteShader(shader);
45 return null;
46 }
47 return shader;
48}
49
50// Create program
51function createProgram(gl, vs, fs) {
52 const program = gl.createProgram();
53 gl.attachShader(program, vs);
54 gl.attachShader(program, fs);
55 gl.linkProgram(program);
56 if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
57 console.error("Program link error:", gl.getProgramInfoLog(program));
58 return null;
59 }
60 return program;
61}
62
63const vs = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
64const fs = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSourceWithLighting);
65const program = createProgram(gl, vs, fs);
66gl.useProgram(program);
67
68// Cube data
69const vertices = new Float32Array([
70 -1,-1,1, 1,-1,1, 1,1,1, -1,1,1, // Front
71 -1,-1,-1, -1,1,-1, 1,1,-1, 1,-1,-1, // Back
72 -1,1,-1, -1,1,1, 1,1,1, 1,1,-1, // Top
73 -1,-1,-1, 1,-1,-1, 1,-1,1, -1,-1,1, // Bottom
74 1,-1,-1, 1,1,-1, 1,1,1, 1,-1,1, // Right
75 -1,-1,-1, -1,-1,1, -1,1,1, -1,1,-1 // Left
76]);
77
78const normals = new Float32Array([
79 0,0,1, 0,0,1, 0,0,1, 0,0,1,
80 0,0,-1, 0,0,-1, 0,0,-1, 0,0,-1,
81 0,1,0, 0,1,0, 0,1,0, 0,1,0,
82 0,-1,0, 0,-1,0, 0,-1,0, 0,-1,0,
83 1,0,0, 1,0,0, 1,0,0, 1,0,0,
84 -1,0,0, -1,0,0, -1,0,0, -1,0,0
85]);
86
87const indices = new Uint16Array([
88 0,1,2, 0,2,3,
89 4,5,6, 4,6,7,
90 8,9,10, 8,10,11,
91 12,13,14, 12,14,15,
92 16,17,18, 16,18,19,
93 20,21,22, 20,22,23
94]);
95
96// Buffers
97const vertexBuffer = gl.createBuffer();
98gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
99gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
100
101const normalBuffer = gl.createBuffer();
102gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
103gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
104
105const indexBuffer = gl.createBuffer();
106gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
107gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
108
109// Attribute locations
110const aPosition = gl.getAttribLocation(program, "aPosition");
111const aNormal = gl.getAttribLocation(program, "aNormal");
112
113// Uniforms
114const uProjectionMatrix = gl.getUniformLocation(program, "uProjectionMatrix");
115const uModelViewMatrix = gl.getUniformLocation(program, "uModelViewMatrix");
116const uLightingDirection = gl.getUniformLocation(program, "uLightingDirection");
117const uLightColor = gl.getUniformLocation(program, "uLightColor");
118
119// Projection
120function perspectiveMatrix(fov, aspect, near, far) {
121 const f = 1.0 / Math.tan((fov / 2) * Math.PI / 180);
122 return new Float32Array([
123 f/aspect,0,0,0,
124 0,f,0,0,
125 0,0,(far+near)/(near-far),-1,
126 0,0,(2*far*near)/(near-far),0
127 ]);
128}
129
130function identityMatrix() {
131 return new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);
132}
133
134gl.uniformMatrix4fv(uProjectionMatrix, false, perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100.0));
135gl.uniform3fv(uLightingDirection, [0.5, 0.7, 1.0]);
136gl.uniform4fv(uLightColor, [1.0, 1.0, 1.0, 1.0]);
137
138// Clear settings
139gl.clearColor(0.1, 0.1, 0.1, 1.0);
140gl.enable(gl.DEPTH_TEST);
141
142// Draw loop
143let angle = 0;
144function draw() {
145 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
146
147 // Bind position buffer
148 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
149 gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
150 gl.enableVertexAttribArray(aPosition);
151
152 // Bind normal buffer
153 gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
154 gl.vertexAttribPointer(aNormal, 3, gl.FLOAT, false, 0, 0);
155 gl.enableVertexAttribArray(aNormal);
156
157 // Compute rotation
158 const mv = identityMatrix();
159 mv[0] = Math.cos(angle);
160 mv[2] = Math.sin(angle);
161 mv[8] = -Math.sin(angle);
162 mv[10] = Math.cos(angle);
163 mv[14] = -6.0;
164 gl.uniformMatrix4fv(uModelViewMatrix, false, mv);
165
166 // Draw
167 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
168 gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
169
170 angle += 0.01;
171 requestAnimationFrame(draw);
172}
173
174draw();javascript-web-gl.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: inline;
61 margin: 0.25em;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container">
105 <h1>JavaScript Console</h1>
106 <button id="executeBtn">Execute</button>
107 <button id="executeTextureBtn">Execute Texture</button>
108 <button id="executeLightingBtn">Execute Lighting</button>
109 <div id="output"></div>
110 </div>
111 <div class="container">
112 <h1>WebGL Canvas</h1>
113 <canvas id="glCanvas"></canvas>
114 </div>
115
116 <script>
117 // Override console.log to display messages in the #output element
118 (function () {
119 // Override console.log
120 const originalLog = console.log;
121 console.log = function (...args) {
122 originalLog.apply(console, args);
123 const message = document.createElement('div');
124 message.textContent = args.map(String).join(' ');
125 output.appendChild(message);
126 };
127
128 // Override console.error
129 const originalError = console.error;
130 console.error = function (...args) {
131 originalError.apply(console, args);
132 const message = document.createElement('div');
133 message.textContent = args.map(String).join(' ');
134 message.style.color = 'red'; // Color error messages red
135 output.appendChild(message);
136 };
137 })();
138
139 document.getElementById('executeBtn').addEventListener('click', () => {
140 // Prevent multiple loads
141 if (document.getElementById('externalScript')) return;
142
143 const script = document.createElement('script');
144 script.src = 'javascript-web-gl.js';
145 script.id = 'externalScript';
146 document.body.appendChild(script);
147 });
148
149 document.getElementById('executeTextureBtn').addEventListener('click', () => {
150 // Prevent multiple loads
151 if (document.getElementById('externalScript')) return;
152
153 const script = document.createElement('script');
154 script.src = 'javascript-web-gl-texture.js';
155 script.id = 'externalScript';
156 document.body.appendChild(script);
157 });
158
159 document.getElementById('executeLightingBtn').addEventListener('click', () => {
160 // Prevent multiple loads
161 if (document.getElementById('externalScript')) return;
162
163 const script = document.createElement('script');
164 script.src = 'javascript-web-gl-lighting.js';
165 script.id = 'externalScript';
166 document.body.appendChild(script);
167 });
168 </script>
169</body>
170</html>JavaScript en WebGL
JavaScript en WebGL zijn krachtige hulpmiddelen in moderne webontwikkeling om interactieve 3D-graphics van hoge kwaliteit in de browser te leveren. Met WebGL kun je de GPU rechtstreeks benutten voor efficiënte rendering en expressieve webapplicaties bouwen, zoals games, datavisualisaties en VR/AR-toepassingen.
Wat is WebGL?
WebGL (Web Graphics Library) is een low-level grafische API die als onderdeel van HTML5 wordt geleverd en wordt gebruikt om 3D-rendering rechtstreeks in de browser uit te voeren. Het is gebaseerd op de OpenGL ES 2.0-specificatie en stuurt de GPU aan vanuit JavaScript. Met WebGL kun je geavanceerde 3D-graphics weergeven in vrijwel alle moderne browsers, zonder dat speciale plug-ins nodig zijn.
Basisprincipes van WebGL
Om te renderen met WebGL, moet je verschillende sleutelconcepten begrijpen. Net als andere grafische API's (zoals OpenGL en DirectX), verwerkt WebGL gegevens via een grafische pijplijn en genereert afbeeldingen op de GPU.
De context ophalen
WebGL rendert met behulp van het HTML5-element <canvas>. In JavaScript moet je eerst de WebGL-context verkrijgen.
1const canvas = document.getElementById("glCanvas");
2const gl = canvas.getContext("webgl");
3if (!gl) {
4 console.error("WebGL not supported, falling back on experimental-webgl");
5 gl = canvas.getContext("experimental-webgl");
6}
7if (!gl) {
8 alert("Your browser does not support WebGL");
9}- Verkrijg een WebGL-context van het
<canvas>-element. Hiermee kun je GPU-rendering via JavaScript aansturen.
Shaders definiëren
Om met WebGL te renderen gebruik je twee soorten shaders: een vertexshader en een fragmentshader. Vertex shaders berekenen de positie van elk vertex van een object, en fragment shaders berekenen de kleur van elke pixel. Deze shaders zijn programma's die worden uitgevoerd op de GPU. Shaders worden geschreven in een taal genaamd GLSL.
1const vertexShaderSource = `
2attribute vec4 aVertexPosition;
3void main(void) {
4 gl_Position = aVertexPosition;
5}`;
6const fragmentShaderSource = `
7void main(void) {
8 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
9}`;- De vertexshader verwerkt de vertexposities en de fragmentshader bepaalt de kleur per pixel. Hier geven we rood weer.
Shaders compileren en linken
Om shadersourcecode in een WebGL-programma op te nemen, compileer je de shaders en link je ze om een programma te maken.
1function createShader(gl, type, source) {
2 const shader = gl.createShader(type);
3 gl.shaderSource(shader, source);
4 gl.compileShader(shader);
5 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
6 console.error("An error occurred compiling the shaders:", gl.getShaderInfoLog(shader));
7 gl.deleteShader(shader);
8 return null;
9 }
10 return shader;
11}
12
13const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
14const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
15
16const shaderProgram = gl.createProgram();
17gl.attachShader(shaderProgram, vertexShader);
18gl.attachShader(shaderProgram, fragmentShader);
19gl.linkProgram(shaderProgram);
20if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
21 console.error("Unable to initialize the shader program:", gl.getProgramInfoLog(shaderProgram));
22}- Compileer elke shader en link ze tot een programma. Dit bouwt een renderpipeline die op de GPU wordt uitgevoerd.
Buffers en vertexgegevens voorbereiden
Bereid vervolgens de te tekenen geometriegegevens voor en stuur ze naar een WebGL-buffer. Deze gegevens omvatten vertexposities, kleuren, texture-coördinaten, enzovoort.
1const vertices = new Float32Array([
2 -1.0, -1.0,
3 1.0, -1.0,
4 1.0, 1.0,
5 -1.0, 1.0,
6]);
7
8const vertexBuffer = gl.createBuffer();
9gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
10gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);- Definieer de vertexcoördinaten van een rechthoek en upload ze naar een GPU-buffer.
STATIC_DRAWgeeft aan dat de gegevens niet vaak veranderen.
Renderproces
Laat WebGL ten slotte het daadwerkelijke renderen uitvoeren met de shaders en gegevens. Configureer de WebGL-renderpipeline correct en stuur tekenopdrachten naar de GPU. Hier maken we de achtergrond zwart en tekenen we een rode rechthoek met de gedefinieerde vertexgegevens en het shaderprogramma.
1gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black
2gl.clear(gl.COLOR_BUFFER_BIT);
3
4// Use the shader program
5gl.useProgram(shaderProgram);
6
7// Bind vertex buffer
8const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "aVertexPosition");
9gl.enableVertexAttribArray(positionAttributeLocation);
10gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
11gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
12
13// Draw
14gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);- In deze code richten we de WebGL-renderpipeline in en renderen we een rechthoek. Door het scherm te initialiseren met gl.clear() en tekenopdrachten naar de GPU te sturen met gl.drawArrays(), worden de door de shaders verwerkte gegevens daadwerkelijk op het scherm weergegeven.
Geavanceerde functies van WebGL
Met WebGL kun je verschillende geavanceerde functies gebruiken die verder gaan dan alleen basaal renderen. Hier introduceren we enkele van die functies.
Textuurtoewijzing
WebGL ondersteunt textuurtoewijzing, waarmee je afbeeldingen of patronen kunt toepassen op 3D-objecten. Dit stelt je in staat om objecten een complexere en realistischere uitstraling te geven in plaats van eenvoudige kleuren.
1/* Fragment of source code */
2const texture = gl.createTexture();
3gl.bindTexture(gl.TEXTURE_2D, texture);
4
5// Load an image as the texture
6const image = new Image();
7image.src = "texture.png";
8image.onload = () => {
9 gl.bindTexture(gl.TEXTURE_2D, texture);
10 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
11
12 // Set texture parameters
13 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
14 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
15 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
16
17 // Draw the scene again with the texture applied
18 drawScene();
19};- Laad afbeeldingen als texturen en pas ze toe op objectoppervlakken om een realistischer uiterlijk te bereiken.
Verlichting en Schaduwen
Je kunt schaduwmodellen gebruiken om realistische lichteffecten toe te passen op 3D-objecten. Bereken hoe het oppervlak van een object licht reflecteert op basis van verschillende schaduwmodellen zoals Phong-schaduw en Gouraud-schaduw.
1/* Fragment of source code */
2const fragmentShaderSourceWithLighting = `
3precision mediump float;
4uniform vec3 uLightingDirection;
5uniform vec4 uLightColor;
6void main(void) {
7 vec3 lightDirection = normalize(uLightingDirection);
8 float directionalLightWeighting = max(dot(vNormal, lightDirection), 0.0);
9 gl_FragColor = uLightColor * directionalLightWeighting;
10}`;- Bereken de helderheid op basis van de hoek tussen de lichtrichting en de normaalvectoren. Dit vormt de basis van shadingtechnieken zoals de Phong- en Gouraud-modellen.
Optimalisatie en Prestaties
Aangezien WebGL direct op de GPU werkt, is prestatieoptimalisatie cruciaal. Het gebruik van een grote hoeveelheid vertex-data of complexe shaders kan leiden tot een afname in prestaties. De volgende zijn veelgebruikte benaderingen voor prestatieoptimalisatie.
- Efficiënt gebruik van vertexbuffers In plaats van vertexbuffers vaak bij te werken, hergebruik eenmaal aangemaakte buffers zoveel mogelijk.
- De framesnelheid aanpassen
Gebruik
requestAnimationFrameom het renderen van animaties te sturen en een efficiënte framesnelheid te behouden. - Occlusie-culling Een techniek die het renderen van objecten die niet in beeld zijn overslaat. Dit kan de rendervraag verminderen.
1function render() {
2 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
3
4 // Logic to update objects in the scene
5
6 // Use requestAnimationFrame for smooth rendering
7 requestAnimationFrame(render);
8}
9
10render();- Regel de renderlus met
requestAnimationFrameen werk frames efficiënt bij, gesynchroniseerd met de rendertiming van de browser.
Samenvatting
Door JavaScript en WebGL te combineren kunnen geavanceerde 3D-graphics in real-time in de browser worden gerealiseerd. WebGL omvat veel elementen, van de basisconcepten van shaders en bufferbeheer, het toepassen van texturen, tot prestatieoptimalisatie. Maar door deze effectief te benutten, kun je interactieve en visueel rijke applicaties ontwikkelen.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.