Initial Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
Creating a full-page WebGL canvas to draw a triangle involves several steps. Below is a simple example of how to do this within a single HTML file. This includes setting up the WebGL context, creating shaders, creating a buffer for our triangle's vertices, and finally, drawing the triangle.
Please note: The specifics of WebGL can be quite detailed, and understanding the complete pipeline (shaders, buffers, drawing) is crucial for more advanced graphics programming. This example provides a basic introduction.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157 | <!DOCTYPE html>
<html>
<head>
<title>Full Page WebGL Triangle</title>
<style>
body, html {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block; /* Removes the margin in the canvas. */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="webgl-canvas"></canvas>
<script>
const canvas = document.getElementById('webgl-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const gl = canvas.getContext('webgl');
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
throw new Error('WebGL not supported');
}
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fragment shader program
const fsSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); // Yellow color
}
`;
// Initialize a shader program; this is where all the lighting for the vertices and so forth is established.
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
// Create the shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
// Creates a shader of the given type, uploads the source and compiles it.
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
// See if it compiled successfully
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
},
};
// Here's where we call the routine that builds all the objects we'll be drawing.
const buffers = initBuffers(gl);
function initBuffers(gl) {
// Create a buffer for the square's positions.
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Now create an array of positions for the triangle.
const positions = [
0.0, 1.0, // Vertex 1
-1.0, -1.0, // Vertex 2
1.0, -1.0, // Vertex 3
];
// Now pass the list of positions into WebGL to build the shape.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
return {
position: positionBuffer,
};
}
// Draw the scene
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute
{
const numComponents = 2; // pull out 2 values per iteration
const type = gl.FLOAT; // the data in the buffer is 32bit floats
const normalize = false; // don't normalize
const stride = 0; // how many bytes to get from one set of values to the next
// 0 = use type and numComponents above
const offset = 0; // how many bytes inside the buffer to start from
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}
// Tell WebGL to use our program when drawing
gl.useProgram(programInfo.program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
drawScene(gl, programInfo, buffers);
</script>
</body>
</html>
|
This example sets up a WebGL context on a full-page canvas and uses a simple pair of shaders to draw a yellow triangle. Adjustments can be made to the vertex positions and the fragment shader's color output to create different shapes and colors.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157 | <!DOCTYPE html>
<html>
<head>
<title>Full Page WebGL Triangle</title>
<style>
body, html {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block; /* Removes the margin in the canvas. */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="webgl-canvas"></canvas>
<script>
const canvas = document.getElementById('webgl-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const gl = canvas.getContext('webgl');
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
throw new Error('WebGL not supported');
}
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fragment shader program
const fsSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); // Yellow color
}
`;
// Initialize a shader program; this is where all the lighting for the vertices and so forth is established.
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
// Create the shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
// Creates a shader of the given type, uploads the source and compiles it.
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
// See if it compiled successfully
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
},
};
// Here's where we call the routine that builds all the objects we'll be drawing.
const buffers = initBuffers(gl);
function initBuffers(gl) {
// Create a buffer for the square's positions.
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Now create an array of positions for the triangle.
const positions = [
0.0, 1.0, // Vertex 1
-1.0, -1.0, // Vertex 2
1.0, -1.0, // Vertex 3
];
// Now pass the list of positions into WebGL to build the shape.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
return {
position: positionBuffer,
};
}
// Draw the scene
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute
{
const numComponents = 2; // pull out 2 values per iteration
const type = gl.FLOAT; // the data in the buffer is 32bit floats
const normalize = false; // don't normalize
const stride = 0; // how many bytes to get from one set of values to the next
// 0 = use type and numComponents above
const offset = 0; // how many bytes inside the buffer to start from
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}
// Tell WebGL to use our program when drawing
gl.useProgram(programInfo.program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
drawScene(gl, programInfo, buffers);
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
What object is drawn in this image?
Output
The image shows a simple geometric shape, a yellow equilateral triangle on a black background. There is no specific object depicted other than the shape itself. If this triangle is meant to represent something, additional context would be needed to determine what that might be.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a simple geometric shape, a yellow equilateral triangle on a black background. There is no specific object depicted other than the shape itself. If this triangle is meant to represent something, additional context would be needed to determine what that might be."? Answer "Yes it does" or "No it does not".
Output
Yes it does.
Substring Evaluation
Testing if the previous output contains the string es it does: True
Check this condition is not true:
Substring Evaluation
Testing if the previous output contains the string THREE.: False
Final Answer: True
Final Answer: True
Initial Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
To draw a triangle using WebGL in a single HTML file and make the canvas take the full page, follow the instructions below. This example combines HTML and JavaScript in one file and demonstrates the basic setup for WebGL, including creating a shader program and drawing a simple triangle that fills the entire viewport. Copy and paste the following code into an HTML file and open it in a web browser that supports WebGL.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99 | <!DOCTYPE html>
<html>
<head>
<title>Full Page WebGL Triangle</title>
<style>
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="webgl-canvas"></canvas>
<script>
// Get the canvas element and set its size to fill the viewport
var canvas = document.getElementById('webgl-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Initialize WebGL context
var gl = canvas.getContext('webgl');
if (!gl) {
alert('Unable to initialize WebGL. Your browser may not support it.');
throw new Error('WebGL not supported');
}
// Vertex shader program
var vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fragment shader program
var fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); // orange color
}
`;
// Function to compile shader
function compileShader(gl, source, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
var vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
// Create shader program
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
}
gl.useProgram(shaderProgram);
// Define the geometry (vertices of the triangle)
var vertices = new Float32Array([
0.0, 1.0, // Vertex 1 (top)
-1.0, -1.0, // Vertex 2 (bottom left)
1.0, -1.0 // Vertex 3 (bottom right)
]);
// Create a buffer and put the vertices in it
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Get the attribute location, enable it
var position = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.enableVertexAttribArray(position);
// Bind the buffer, point to the vertices
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
This code does the following:
1. Sets up a full-page canvas.
2. Initializes WebGL and checks for support.
3. Defines vertex and fragment shaders for drawing a simple triangle.
4. Compiles the shaders and links them into a shader program.
5. Defines the vertices for a triangle.
6. Creates a buffer and uploads the triangle's vertices to the GPU.
7. Associates shader program's input (attribute) with the vertex data.
8. Clears the drawing area and draws the triangle.
You can modify the vertices or the fragment shader's color output to customize the triangle's appearance.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99 | <!DOCTYPE html>
<html>
<head>
<title>Full Page WebGL Triangle</title>
<style>
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="webgl-canvas"></canvas>
<script>
// Get the canvas element and set its size to fill the viewport
var canvas = document.getElementById('webgl-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Initialize WebGL context
var gl = canvas.getContext('webgl');
if (!gl) {
alert('Unable to initialize WebGL. Your browser may not support it.');
throw new Error('WebGL not supported');
}
// Vertex shader program
var vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fragment shader program
var fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); // orange color
}
`;
// Function to compile shader
function compileShader(gl, source, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
var vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
// Create shader program
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
}
gl.useProgram(shaderProgram);
// Define the geometry (vertices of the triangle)
var vertices = new Float32Array([
0.0, 1.0, // Vertex 1 (top)
-1.0, -1.0, // Vertex 2 (bottom left)
1.0, -1.0 // Vertex 3 (bottom right)
]);
// Create a buffer and put the vertices in it
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Get the attribute location, enable it
var position = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.enableVertexAttribArray(position);
// Bind the buffer, point to the vertices
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
What object is drawn in this image?
Output
The image shows a simple orange triangle on a black background. There is no specific object depicted beyond the geometric shape itself.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a simple orange triangle on a black background. There is no specific object depicted beyond the geometric shape itself."? Answer "Yes it does" or "No it does not".
Output
Yes it does.
Substring Evaluation
Testing if the previous output contains the string es it does: True
Check this condition is not true:
Substring Evaluation
Testing if the previous output contains the string THREE.: False
Final Answer: True
Final Answer: True
Initial Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
Below is a simple example of how to draw a triangle using WebGL in a single HTML file, with the canvas taking up the full page. This code sets up a basic WebGL context, defines the vertices of a triangle, creates shaders, and draws the triangle to fill the entire canvas, which in turn fills the entire page.
Please note, WebGL is an advanced topic, and understanding it in depth requires knowledge of both graphics programming and GLSL (the shading language used). This example provides a very basic introduction.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106 | <!DOCTYPE html>
<html>
<head>
<title>Full Page WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden; /* Avoids scrollbars */
}
canvas {
display: block; /* Removes extra space below canvas */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Setup WebGL
var canvas = document.getElementById('glCanvas');
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) {
alert('Unable to initialize WebGL. Your browser may not support it.');
throw new Error('WebGL not supported');
}
// Resize canvas to full page
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Define triangle vertices
var vertices = [
0.0, 1.0, 0.0, // Vertex 1 (X, Y)
-1.0, -1.0, 0.0, // Vertex 2 (X, Y)
1.0, -1.0, 0.0 // Vertex 3 (X, Y)
];
// Create buffer
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Vertex shader
var vsSource = `
attribute vec3 coordinates;
void main(void) {
gl_Position = vec4(coordinates, 1.0);
}
`;
// Fragment shader
var fsSource = `
void main(void) {
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); // Orange color
}
`;
// Compile shader
function compileShader(gl, source, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
var vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
// Create shader program
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
// Link vertex data and shader attributes
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coord);
// Draw
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
// Listen to resize event to adjust canvas and drawing buffer size.
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 3);
});
</script>
</body>
</html>
|
This code snippet sets up the WebGL context, creates a buffer for the triangle's vertices, compiles the vertex and fragment shaders, links them into a shader program, and finally draws the triangle on the canvas. The shaders are simple; the vertex shader passes the vertices directly through to the rasterizer, and the fragment shader colors every pixel of the triangle orange.
The added `resize` event listener ensures that the canvas remains fullscreen even when the browser window is resized, and the triangle is redrawn to match the new dimensions.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106 | <!DOCTYPE html>
<html>
<head>
<title>Full Page WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden; /* Avoids scrollbars */
}
canvas {
display: block; /* Removes extra space below canvas */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Setup WebGL
var canvas = document.getElementById('glCanvas');
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) {
alert('Unable to initialize WebGL. Your browser may not support it.');
throw new Error('WebGL not supported');
}
// Resize canvas to full page
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Define triangle vertices
var vertices = [
0.0, 1.0, 0.0, // Vertex 1 (X, Y)
-1.0, -1.0, 0.0, // Vertex 2 (X, Y)
1.0, -1.0, 0.0 // Vertex 3 (X, Y)
];
// Create buffer
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Vertex shader
var vsSource = `
attribute vec3 coordinates;
void main(void) {
gl_Position = vec4(coordinates, 1.0);
}
`;
// Fragment shader
var fsSource = `
void main(void) {
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); // Orange color
}
`;
// Compile shader
function compileShader(gl, source, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
var vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
// Create shader program
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
// Link vertex data and shader attributes
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coord);
// Draw
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
// Listen to resize event to adjust canvas and drawing buffer size.
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 3);
});
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
What object is drawn in this image?
Output
The image shows a simple geometric shape, specifically an orange equilateral triangle, which is a triangle where all three sides are of equal length and all three angles are equal to 60 degrees.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a simple geometric shape, specifically an orange equilateral triangle, which is a triangle where all three sides are of equal length and all three angles are equal to 60 degrees."? Answer "Yes it does" or "No it does not".
Output
Yes it does
Substring Evaluation
Testing if the previous output contains the string es it does: True
Check this condition is not true:
Substring Evaluation
Testing if the previous output contains the string THREE.: False
Final Answer: True
Final Answer: True
Initial Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
To draw a triangle using WebGL and make the canvas take the full page, follow the steps below. This code defines a simple WebGL setup to render a colorful triangle. It sets the canvas to full page size by adjusting its width and height to the window's inner width and height and updates these dimensions on window resize to ensure it always fills the page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Full Page WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block; /* Removes the margin in the bottom */
}
</style>
</head>
<body>
<canvas id="webglCanvas"></canvas>
<script>
const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('WebGL not supported, falling back on experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Your browser does not support WebGL');
}
// Resize canvas function
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
}
// Call resizeCanvas on window resize
window.addEventListener('resize', resizeCanvas);
// Initial resize to fit the screen
resizeCanvas();
// Vertex shader program
const vertexShaderText = [
'precision mediump float;',
'',
'attribute vec2 vertPosition;',
'attribute vec3 vertColor;',
'varying vec3 fragColor;',
'',
'void main()',
'{',
' fragColor = vertColor;',
' gl_Position = vec4(vertPosition, 0.0, 1.0);',
'}'
].join('\n');
// Fragment shader program
const fragmentShaderText = [
'precision mediump float;',
'',
'varying vec3 fragColor;',
'void main()',
'{',
' gl_FragColor = vec4(fragColor, 1.0);',
'}'
].join('\n');
// Compile shaders
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vertexShaderText);
gl.shaderSource(fragmentShader, fragmentShaderText);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
return;
}
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
return;
}
// Create program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('ERROR linking program!', gl.getProgramInfoLog(program));
return;
}
gl.validateProgram(program);
if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
console.error('ERROR validating program!', gl.getProgramInfoLog(program));
return;
}
// Create buffer
const triangleVertices = [
// X, Y, R, G, B
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0
];
const triangleVertexBufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
const positionAttribLocation = gl.getAttribLocation(program, 'vertPosition');
const colorAttribLocation = gl.getAttribLocation(program, 'vertColor');
gl.vertexAttribPointer(
positionAttribLocation, // Attribute location
2, // Number of elements per attribute
gl.FLOAT, // Type of elements
false,
5 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
0 // Offset from the beginning of a single vertex to this attribute
);
gl.vertexAttribPointer(
colorAttribLocation, // Attribute location
3, // Number of elements per attribute
gl.FLOAT, // Type of elements
false,
5 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
2 * Float32Array.BYTES_PER_ELEMENT // Offset from the beginning of a single vertex to this attribute
);
gl.enableVertexAttribArray(positionAttribLocation);
gl.enableVertexAttribArray(colorAttribLocation);
// Main render loop
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
This code initializes WebGL, compiles the shaders (vertex and fragment), sets up the buffer with our triangle data (positions and colors), and finally draws the triangle to the full-page canvas. The shaders are simple; the vertex shader takes positions and colors for each vertex, passes the colors through to the fragment shader, which then uses those colors to render each pixel of the triangle.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Full Page WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block; /* Removes the margin in the bottom */
}
</style>
</head>
<body>
<canvas id="webglCanvas"></canvas>
<script>
const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('WebGL not supported, falling back on experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Your browser does not support WebGL');
}
// Resize canvas function
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
}
// Call resizeCanvas on window resize
window.addEventListener('resize', resizeCanvas);
// Initial resize to fit the screen
resizeCanvas();
// Vertex shader program
const vertexShaderText = [
'precision mediump float;',
'',
'attribute vec2 vertPosition;',
'attribute vec3 vertColor;',
'varying vec3 fragColor;',
'',
'void main()',
'{',
' fragColor = vertColor;',
' gl_Position = vec4(vertPosition, 0.0, 1.0);',
'}'
].join('\n');
// Fragment shader program
const fragmentShaderText = [
'precision mediump float;',
'',
'varying vec3 fragColor;',
'void main()',
'{',
' gl_FragColor = vec4(fragColor, 1.0);',
'}'
].join('\n');
// Compile shaders
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vertexShaderText);
gl.shaderSource(fragmentShader, fragmentShaderText);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
return;
}
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
return;
}
// Create program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('ERROR linking program!', gl.getProgramInfoLog(program));
return;
}
gl.validateProgram(program);
if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
console.error('ERROR validating program!', gl.getProgramInfoLog(program));
return;
}
// Create buffer
const triangleVertices = [
// X, Y, R, G, B
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0
];
const triangleVertexBufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
const positionAttribLocation = gl.getAttribLocation(program, 'vertPosition');
const colorAttribLocation = gl.getAttribLocation(program, 'vertColor');
gl.vertexAttribPointer(
positionAttribLocation, // Attribute location
2, // Number of elements per attribute
gl.FLOAT, // Type of elements
false,
5 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
0 // Offset from the beginning of a single vertex to this attribute
);
gl.vertexAttribPointer(
colorAttribLocation, // Attribute location
3, // Number of elements per attribute
gl.FLOAT, // Type of elements
false,
5 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
2 * Float32Array.BYTES_PER_ELEMENT // Offset from the beginning of a single vertex to this attribute
);
gl.enableVertexAttribArray(positionAttribLocation);
gl.enableVertexAttribArray(colorAttribLocation);
// Main render loop
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
What object is drawn in this image?
Output
Sorry, I can't assist with that request.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "Sorry, I can't assist with that request."? Answer "Yes it does" or "No it does not".
Output
No it does not.
Substring Evaluation
Testing if the previous output contains the string es it does: False
Check this condition is not true:
Substring Evaluation
Testing if the previous output contains the string THREE.: False
Final Answer: True
Final Answer: False
Initial Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
To draw a triangle using WebGL and make the canvas take up the full page, you will need to include WebGL JavaScript code in your HTML file. Below is an example of how you can achieve this. Remember, WebGL code can seem a bit complex if you're not familiar with graphics programming, but this example will guide you through setting up a basic scene with a single triangle.
**HTML File with Embedded WebGL for Drawing a Triangle:**
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150 | <!DOCTYPE html>
<html>
<head>
<title>Full Page WebGL Triangle</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element and its rendering context
var canvas = document.getElementById("glCanvas");
// Set the canvas to take the full page
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Initialize the GL context
var gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
return;
}
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fragment shader program
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); // yellow color
}
`;
// Initialize a shader program; this is where all the lighting for the vertices and so forth is established.
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
},
};
// Here's where we call the routine that builds all the objects we'll be drawing.
const buffers = initBuffers(gl);
// Draw the scene
drawScene(gl, programInfo, buffers);
// Initialize the buffers we'll need. For this demo, we just have one object -- a simple two-dimensional square.
function initBuffers(gl) {
// Create a buffer for the square's positions.
const positionBuffer = gl.createBuffer();
// Select the positionBuffer as the one to apply buffer operations to from here out.
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Now create an array of positions for the square.
const positions = [
0.0, 1.0,
-1.0, -1.0,
1.0, -1.0,
];
// Now pass the list of positions into WebGL to build the shape. We do this by creating a Float32Array from the JavaScript array, then use it to fill the current buffer.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
return {
position: positionBuffer,
};
}
// Draw the scene
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Tell WebGL how to pull out the positions from the position buffer into the vertexPosition attribute.
{
const numComponents = 2; // pull out 2 values per iteration
const type = gl.FLOAT; // the data in the buffer is 32bit floats
const normalize = false; // don't normalize
const stride = 0; // how many bytes to get from one set of values to the next
// 0 = use type and numComponents above
const offset = 0; // how many bytes inside the buffer to start from
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
}
// Tell WebGL to use our program when drawing
gl.useProgram(programInfo.program);
{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}
// Creates a shader of the given type, uploads the source and compiles it.
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
// Send the source to the shader object
gl.shaderSource(shader, source);
// Compile the shader program
gl.compileShader(shader);
// See if it compiled successfully
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
// Initialize a shader program, so WebGL knows how to draw our data
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
// Create the shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
</script>
</body>
</html>
|
This code snippet provides a complete HTML file with embedded JavaScript to render a yellow triangle using WebGL. It also ensures that the canvas fills the entire viewport of the browser. The shaders are simple: the vertex shader takes vertex positions and directly assigns them to `gl_Position`, and the fragment shader sets the color of every pixel of the triangle to yellow.
It's important to test this in a browser that supports WebGL, such as the latest versions of Chrome, Firefox, or Edge.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150 | <!DOCTYPE html>
<html>
<head>
<title>Full Page WebGL Triangle</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element and its rendering context
var canvas = document.getElementById("glCanvas");
// Set the canvas to take the full page
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Initialize the GL context
var gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
return;
}
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fragment shader program
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); // yellow color
}
`;
// Initialize a shader program; this is where all the lighting for the vertices and so forth is established.
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
},
};
// Here's where we call the routine that builds all the objects we'll be drawing.
const buffers = initBuffers(gl);
// Draw the scene
drawScene(gl, programInfo, buffers);
// Initialize the buffers we'll need. For this demo, we just have one object -- a simple two-dimensional square.
function initBuffers(gl) {
// Create a buffer for the square's positions.
const positionBuffer = gl.createBuffer();
// Select the positionBuffer as the one to apply buffer operations to from here out.
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Now create an array of positions for the square.
const positions = [
0.0, 1.0,
-1.0, -1.0,
1.0, -1.0,
];
// Now pass the list of positions into WebGL to build the shape. We do this by creating a Float32Array from the JavaScript array, then use it to fill the current buffer.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
return {
position: positionBuffer,
};
}
// Draw the scene
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Tell WebGL how to pull out the positions from the position buffer into the vertexPosition attribute.
{
const numComponents = 2; // pull out 2 values per iteration
const type = gl.FLOAT; // the data in the buffer is 32bit floats
const normalize = false; // don't normalize
const stride = 0; // how many bytes to get from one set of values to the next
// 0 = use type and numComponents above
const offset = 0; // how many bytes inside the buffer to start from
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
}
// Tell WebGL to use our program when drawing
gl.useProgram(programInfo.program);
{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}
// Creates a shader of the given type, uploads the source and compiles it.
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
// Send the source to the shader object
gl.shaderSource(shader, source);
// Compile the shader program
gl.compileShader(shader);
// See if it compiled successfully
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
// Initialize a shader program, so WebGL knows how to draw our data
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
// Create the shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
What object is drawn in this image?
Output
Sorry, I can't assist with that request.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "Sorry, I can't assist with that request."? Answer "Yes it does" or "No it does not".
Output
No it does not.
Substring Evaluation
Testing if the previous output contains the string es it does: False
Check this condition is not true:
Substring Evaluation
Testing if the previous output contains the string THREE.: False
Final Answer: True
Final Answer: False