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
Sure, here's an HTML file that draws a triangle using WebGL and takes up the full 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 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Set the color to red
}
</script>
<script>
window.onload = function() {
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('WebGL not supported in your browser');
return;
}
const vertexShaderSource = document.getElementById('vertex-shader').text;
const fragmentShaderSource = document.getElementById('fragment-shader').text;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const vertices = [
-0.5, -0.5, // Vertex 1
0.5, -0.5, // Vertex 2
0.0, 0.5 // Vertex 3
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
const aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(1.0, 1.0, 1.0, 1.0); // Set the clear color to white
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3); // Render the triangle
};
</script>
</body>
</html>
|
In this code:
1. We set the `<canvas>` element to take up the full page using CSS.
2. We define the vertex and fragment shaders as strings in `<script>` tags.
3. We create WebGL shaders and a program, and attach the shaders to the program.
4. We define the vertex data for the triangle.
5. We create a vertex buffer and bind it to the WebGL context.
6. We enable the vertex attribute and specify how the vertex data should be interpreted.
7. We clear the canvas with a white color.
8. We draw the triangle using the `gl.drawArrays` function.
When you open this HTML file in a web browser that supports WebGL, you should see a red triangle rendered on a white background, taking up the entire page.
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Set the color to red
}
</script>
<script>
window.onload = function() {
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('WebGL not supported in your browser');
return;
}
const vertexShaderSource = document.getElementById('vertex-shader').text;
const fragmentShaderSource = document.getElementById('fragment-shader').text;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const vertices = [
-0.5, -0.5, // Vertex 1
0.5, -0.5, // Vertex 2
0.0, 0.5 // Vertex 3
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
const aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(1.0, 1.0, 1.0, 1.0); // Set the clear color to white
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3); // Render the triangle
};
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drew what I wanted. Describe what is drawn in this image?
Output
The image shows a simple red triangle with a solid fill. The triangle is equilateral, meaning all three sides are of equal length, and it is centered against a white background.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a simple red triangle with a solid fill. The triangle is equilateral, meaning all three sides are of equal length, and it is centered against a white background."? 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
Here's a single HTML file that draws a triangle using WebGL and fills the entire page with the canvas:
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="main()">
<canvas id="glCanvas"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<script type="text/javascript">
function main() {
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('Unable to initialize WebGL. Your browser or computer may not support it.');
return;
}
const vsSource = document.getElementById('vertex-shader').textContent;
const fsSource = document.getElementById('fragment-shader').textContent;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const vertices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
const aPosition = gl.getAttribLocation(program, 'vPosition');
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
</script>
</body>
</html>
|
This HTML file includes:
1. CSS styles to make the canvas take up the full page.
2. A `<canvas>` element where WebGL will render the triangle.
3. Vertex and fragment shader code embedded in `<script>` tags.
4. JavaScript code that initializes WebGL, compiles and links the shaders, sets up a buffer with vertex data for the triangle, and draws the triangle on the canvas.
When you open this HTML file in a web browser that supports WebGL, it should display a red triangle filling the entire page.
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="main()">
<canvas id="glCanvas"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<script type="text/javascript">
function main() {
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('Unable to initialize WebGL. Your browser or computer may not support it.');
return;
}
const vsSource = document.getElementById('vertex-shader').textContent;
const fsSource = document.getElementById('fragment-shader').textContent;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const vertices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
const aPosition = gl.getAttribLocation(program, 'vPosition');
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
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
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drew what I wanted. Describe what is drawn in this image?
Output
The image shows a simple red triangle with a solid fill color on a black background. The triangle is positioned with one of its vertices pointing upwards, and its base parallel to the bottom of the image frame.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a simple red triangle with a solid fill color on a black background. The triangle is positioned with one of its vertices pointing upwards, and its base parallel to the bottom of the image frame."? 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
Here's a single HTML file that creates a full-page canvas and draws a triangle using 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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<meta charset="utf-8">
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script type="x-shader/x-vertex" id="vertexShader">
attribute vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
}
</script>
<script>
window.onload = function() {
const canvas = document.getElementById('glCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL is not supported in your browser.');
return;
}
const vertexShaderSource = document.getElementById('vertexShader').textContent;
const fragmentShaderSource = document.getElementById('fragmentShader').textContent;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Failed to link shaders:', gl.getProgramInfoLog(program));
return;
}
gl.useProgram(program);
const aPosition = gl.getAttribLocation(program, 'aPosition');
const triangleVertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
};
</script>
</body>
</html>
|
This code sets up a full-page canvas and creates a WebGL context. It then defines vertex and fragment shaders using the `<script>` elements with the appropriate MIME types (`x-shader/x-vertex` and `x-shader/x-fragment`).
The vertex shader simply passes through the vertex positions, while the fragment shader sets the color of the triangle to red.
In the JavaScript code, the shaders are compiled, linked into a program, and used to render a triangle defined by the vertex data. The `drawArrays` function is called with the `gl.TRIANGLES` mode to draw the triangle on the canvas.
When you open this HTML file in a web browser that supports WebGL, you should see a full-page canvas with a red triangle drawn in the center.
Note: This example assumes that your browser supports WebGL. Some older browsers or browsers on certain platforms may not have WebGL support.
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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<meta charset="utf-8">
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script type="x-shader/x-vertex" id="vertexShader">
attribute vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
}
</script>
<script>
window.onload = function() {
const canvas = document.getElementById('glCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL is not supported in your browser.');
return;
}
const vertexShaderSource = document.getElementById('vertexShader').textContent;
const fragmentShaderSource = document.getElementById('fragmentShader').textContent;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Failed to link shaders:', gl.getProgramInfoLog(program));
return;
}
gl.useProgram(program);
const aPosition = gl.getAttribLocation(program, 'aPosition');
const triangleVertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
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
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drew what I wanted. Describe what is drawn in this image?
Output
The image shows a solid red triangle centered on a black background. The triangle is equilateral, with all sides of equal length and all angles equal, each measuring 60 degrees. The triangle is positioned with one vertex pointing upwards and the base parallel to the bottom edge of the image.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a solid red triangle centered on a black background. The triangle is equilateral, with all sides of equal length and all angles equal, each measuring 60 degrees. The triangle is positioned with one vertex pointing upwards and the base parallel to the bottom edge of the image."? 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
Sure, here's a single HTML file with WebGL code that draws a triangle on a full-page canvas:
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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<meta charset="utf-8">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script type="x-shader/x-vertex" id="vertexShader">
attribute vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red
}
</script>
<script>
window.onload = function() {
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL is not supported');
return;
}
const vertexShaderSource = document.getElementById('vertexShader').textContent;
const fragmentShaderSource = document.getElementById('fragmentShader').textContent;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const triangleVertices = [
-0.5, -0.5, // Bottom-left
0.5, -0.5, // Bottom-right
0.0, 0.5 // Top
];
const triangleVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
const aPosition = gl.getAttribLocation(program, 'aPosition');
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
};
</script>
</body>
</html>
|
This code sets up a WebGL context on a full-page canvas and draws a red triangle using vertex and fragment shaders. Here's a breakdown of what's happening:
1. The HTML file includes a `<canvas>` element and two `<script>` blocks containing the vertex and fragment shader code.
2. The CSS styles ensure that the canvas takes up the entire page.
3. The JavaScript code gets a reference to the canvas and creates a WebGL context.
4. It compiles the vertex and fragment shaders from their respective sources.
5. A WebGL program is created, and the shaders are attached to it.
6. Vertex data representing a triangle is stored in a buffer object.
7. The vertex data is bound to the `aPosition` attribute in the vertex shader.
8. The canvas is cleared with a black color.
9. The triangle is drawn using the `gl.drawArrays` function.
When you open this HTML file in a modern web browser that supports WebGL, you should see a full-page canvas with a red triangle displayed.
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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<meta charset="utf-8">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script type="x-shader/x-vertex" id="vertexShader">
attribute vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red
}
</script>
<script>
window.onload = function() {
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL is not supported');
return;
}
const vertexShaderSource = document.getElementById('vertexShader').textContent;
const fragmentShaderSource = document.getElementById('fragmentShader').textContent;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const triangleVertices = [
-0.5, -0.5, // Bottom-left
0.5, -0.5, // Bottom-right
0.0, 0.5 // Top
];
const triangleVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
const aPosition = gl.getAttribLocation(program, 'aPosition');
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
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
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drew what I wanted. Describe what is drawn in this image?
Output
The image shows a red triangle centered on a black background. The triangle is pointing upwards and appears to be a solid color with no gradients or textures.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a red triangle centered on a black background. The triangle is pointing upwards and appears to be a solid color with no gradients or textures."? 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
Here's an HTML file that draws a triangle using WebGL on a full-page canvas:
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Set the color to red
}
</script>
<script type="text/javascript">
window.onload = function() {
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('Failed to get WebGL context');
return;
}
const vertexShaderSource = document.getElementById('vertex-shader').text;
const fragmentShaderSource = document.getElementById('fragment-shader').text;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Failed to link shaders');
return;
}
gl.useProgram(program);
const triangleVertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
const aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
};
</script>
</body>
</html>
|
This code creates a full-page canvas and uses WebGL to draw a red triangle on it. Here's how it works:
1. The HTML sets up a `<canvas>` element and includes two `<script>` tags with the vertex and fragment shaders.
2. The JavaScript code gets a WebGL context from the canvas and compiles the vertex and fragment shaders.
3. It creates a WebGL program by attaching the compiled shaders and linking them.
4. The triangle vertex data is defined and stored in a buffer object.
5. The `aVertexPosition` attribute is enabled and bound to the vertex buffer.
6. The canvas is cleared with a black color.
7. The `gl.drawArrays` function is called to draw the triangle on the canvas.
When you open this HTML file in a web browser, you should see a red triangle filling the entire page.
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Set the color to red
}
</script>
<script type="text/javascript">
window.onload = function() {
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('Failed to get WebGL context');
return;
}
const vertexShaderSource = document.getElementById('vertex-shader').text;
const fragmentShaderSource = document.getElementById('fragment-shader').text;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Failed to link shaders');
return;
}
gl.useProgram(program);
const triangleVertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
const aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
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
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drew what I wanted. Describe what is drawn in this image?
Output
The image shows a red triangle centered on a black background. The triangle is pointing upwards and appears to be a solid color with no gradients or textures.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a red triangle centered on a black background. The triangle is pointing upwards and appears to be a solid color with no gradients or textures."? 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