Initial Query
Draw an image of a house with a chimney using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a house with a chimney using WebGL in a single HTML file. Make the canvas take the full page.
Output
Below is a complete HTML file that uses WebGL to draw a simple house with a chimney. The canvas is set to fill the entire page. Just save the code as (for example) “house.html†and open it in your browser.
------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGL House with Chimney</title>
<style>
/* Ensure the canvas fills the whole page */
html, body, canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<canvas id="glcanvas"></canvas>
<script>
// Vertex shader program
const vsSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader program
const fsSource = `
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
`;
// Initialize WebGL context and start drawing when the window loads.
window.onload = function init() {
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert("WebGL isn't available in your browser");
return;
}
// Adjust the canvas size to fit the full window.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Compile shaders and setup a shader program.
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
const 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));
return;
}
gl.useProgram(shaderProgram);
// Lookup the location of attributes and uniforms
const positionLocation = gl.getAttribLocation(shaderProgram, "a_position");
const colorLocation = gl.getUniformLocation(shaderProgram, "u_color");
// Clear the canvas with a light blue background.
gl.clearColor(0.8, 0.9, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Helper function to draw a shape from vertices with a uniform color.
function drawShape(vertices, color) {
// Create a buffer and bind the vertices data.
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Enable the attribute and point to the currently bound buffer.
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
// Set the uniform color.
gl.uniform4fv(colorLocation, color);
// Draw the shape.
gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
}
// Define vertices for each shape.
// House Body (a rectangle drawn as two triangles)
const houseBodyVertices = [
-0.5, -0.7,
-0.5, 0.2,
0.5, 0.2,
-0.5, -0.7,
0.5, 0.2,
0.5, -0.7
];
// Brown color
const houseBodyColor = [0.8, 0.5, 0.2, 1.0];
// Roof (a triangle)
const roofVertices = [
-0.6, 0.2,
0.0, 0.8,
0.6, 0.2
];
// Dark reddish color
const roofColor = [0.7, 0.1, 0.1, 1.0];
// Chimney (a rectangle drawn as two triangles)
const chimneyVertices = [
0.2, 0.5,
0.2, 0.7,
0.35, 0.7,
0.2, 0.5,
0.35, 0.7,
0.35, 0.5
];
// Grey color
const chimneyColor = [0.5, 0.5, 0.5, 1.0];
// Draw the house parts in order.
drawShape(houseBodyVertices, houseBodyColor);
drawShape(roofVertices, roofColor);
drawShape(chimneyVertices, chimneyColor);
};
// Utility function for compiling a shader.
function loadShader(gl, type, source) {
const 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;
}
</script>
</body>
</html>
------------------------------------------------------------
Explanation:
1. The style ensures that the canvas (and the HTML page) takes up the full viewport.
2. The vertex shader simply passes 2D positions (with z = 0) to the clip space.
3. The fragment shader uses a uniform color.
4. Three shapes are drawn:
• The house body is a rectangle made of two triangles.
• The roof is a triangle.
• The chimney is drawn as a rectangle with two triangles.
5. Changing vertex coordinates or colors is easy by editing the corresponding arrays.
Open the file in your browser to see the house drawn with WebGL. Enjoy!
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGL House with Chimney</title>
<style>
/* Ensure the canvas fills the whole page */
html, body, canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<canvas id="glcanvas"></canvas>
<script>
// Vertex shader program
const vsSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader program
const fsSource = `
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
`;
// Initialize WebGL context and start drawing when the window loads.
window.onload = function init() {
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert("WebGL isn't available in your browser");
return;
}
// Adjust the canvas size to fit the full window.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Compile shaders and setup a shader program.
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
const 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));
return;
}
gl.useProgram(shaderProgram);
// Lookup the location of attributes and uniforms
const positionLocation = gl.getAttribLocation(shaderProgram, "a_position");
const colorLocation = gl.getUniformLocation(shaderProgram, "u_color");
// Clear the canvas with a light blue background.
gl.clearColor(0.8, 0.9, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Helper function to draw a shape from vertices with a uniform color.
function drawShape(vertices, color) {
// Create a buffer and bind the vertices data.
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Enable the attribute and point to the currently bound buffer.
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
// Set the uniform color.
gl.uniform4fv(colorLocation, color);
// Draw the shape.
gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
}
// Define vertices for each shape.
// House Body (a rectangle drawn as two triangles)
const houseBodyVertices = [
-0.5, -0.7,
-0.5, 0.2,
0.5, 0.2,
-0.5, -0.7,
0.5, 0.2,
0.5, -0.7
];
// Brown color
const houseBodyColor = [0.8, 0.5, 0.2, 1.0];
// Roof (a triangle)
const roofVertices = [
-0.6, 0.2,
0.0, 0.8,
0.6, 0.2
];
// Dark reddish color
const roofColor = [0.7, 0.1, 0.1, 1.0];
// Chimney (a rectangle drawn as two triangles)
const chimneyVertices = [
0.2, 0.5,
0.2, 0.7,
0.35, 0.7,
0.2, 0.5,
0.35, 0.7,
0.35, 0.5
];
// Grey color
const chimneyColor = [0.5, 0.5, 0.5, 1.0];
// Draw the house parts in order.
drawShape(houseBodyVertices, houseBodyColor);
drawShape(roofVertices, roofColor);
drawShape(chimneyVertices, chimneyColor);
};
// Utility function for compiling a shader.
function loadShader(gl, type, source) {
const 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;
}
</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 depicts a simple house. It has a brown square or rectangle representing the main structure and a red triangle on top symbolizing the roof. There is also a small gray rectangle on the roof, which could represent a chimney. The background is light blue.
LLM Generation
Query
Does this answer say that there is a picture of a house with a chimney "The image depicts a simple house. It has a brown square or rectangle representing the main structure and a red triangle on top symbolizing the roof. There is also a small gray rectangle on the roof, which could represent a chimney. The background is light blue."? 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 house with a chimney using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a house with a chimney using WebGL in a single HTML file. Make the canvas take the full page.
Output
Below is a complete HTML file that sets up a fullâ€page canvas and uses WebGL to draw a simple house—with a rectangular body, a triangular roof, and a rectangular chimney. To try it out, save the code as an “.html†file and open it in your browser.
------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebGL House with Chimney</title>
<style>
/* Remove margins and make the canvas fill the window */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas id="glcanvas"></canvas>
<script>
// Wait until the DOM is fully loaded
window.onload = function() {
// Get the canvas and initialize the WebGL context
const canvas = document.getElementById("glcanvas");
// Set the canvas size to the window’s inner size (for high-DPI devices you might also consider window.devicePixelRatio)
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const gl = canvas.getContext("webgl");
if (!gl) {
alert("Your browser does not support WebGL");
return;
}
// Vertex shader source: takes a_position attribute and outputs gl_Position.
const vsSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source: uses a uniform color.
const fsSource = `
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
`;
// Helper: Compiles a shader of a given type.
function compileShader(gl, type, source) {
const 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;
}
// Create the shader program.
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error("Unable to initialize the shader program:", gl.getProgramInfoLog(shaderProgram));
return;
}
gl.useProgram(shaderProgram);
// Look up attribute and uniform locations.
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "a_position");
const colorUniformLocation = gl.getUniformLocation(shaderProgram, "u_color");
// Create a buffer object for vertex positions.
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Enable the attribute.
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Set the viewport to match the canvas dimensions.
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Clear canvas.
gl.clearColor(0.9, 0.9, 0.9, 1.0); // light gray background
gl.clear(gl.COLOR_BUFFER_BIT);
// Helper function to draw a shape from a provided vertices array and color.
function drawShape(vertices, color, primitiveType) {
// Upload vertices to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Set the uniform color.
gl.uniform4fv(colorUniformLocation, color);
// Draw the shape.
gl.drawArrays(primitiveType, 0, vertices.length / 2);
}
// Define vertices (in clip space) for each part.
// 1. House Base: a rectangle defined as two triangles.
// Coordinates chosen so that the base is centered.
const houseBaseVertices = [
-0.5, -0.8,
0.5, -0.8,
0.5, 0.0,
-0.5, -0.8,
0.5, 0.0,
-0.5, 0.0
];
// Brown color for the body.
const houseBaseColor = [0.6, 0.4, 0.2, 1.0];
// 2. Roof: an isosceles triangle sitting on top of the house base.
const roofVertices = [
-0.55, 0.0,
0.55, 0.0,
0.0, 0.7
];
// Red color for the roof.
const roofColor = [0.8, 0.0, 0.0, 1.0];
// 3. Chimney: a small rectangle that partly rises above the roof.
// Drawn as two triangles. Adjust its position so it appears on the roof.
const chimneyVertices = [
0.15, 0.4,
0.15, 0.65,
0.30, 0.65,
0.15, 0.4,
0.30, 0.65,
0.30, 0.4
];
// Gray color for the chimney.
const chimneyColor = [0.5, 0.5, 0.5, 1.0];
// Draw the house base.
drawShape(houseBaseVertices, houseBaseColor, gl.TRIANGLES);
// Draw the roof.
drawShape(roofVertices, roofColor, gl.TRIANGLES);
// Draw the chimney.
drawShape(chimneyVertices, chimneyColor, gl.TRIANGLES);
};
</script>
</body>
</html>
------------------------------------------------------------
Explanation:
1. The CSS makes sure that both the html/body and the canvas fill the browser viewport.
2. The vertex shader simply passes through 2D positions (provided in clip-space).
3. The fragment shader uses a uniform color.
4. Three shapes are drawn:
• The house body is drawn as a rectangle.
• The roof is drawn as a triangle.
• The chimney is drawn as a smaller rectangle.
5. Each shape’s vertices and its color are uploaded and drawn with gl.drawArrays.
Open the HTML file in a browser that supports WebGL and you should see your simple house with a chimney!
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
158
159 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebGL House with Chimney</title>
<style>
/* Remove margins and make the canvas fill the window */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas id="glcanvas"></canvas>
<script>
// Wait until the DOM is fully loaded
window.onload = function() {
// Get the canvas and initialize the WebGL context
const canvas = document.getElementById("glcanvas");
// Set the canvas size to the window’s inner size (for high-DPI devices you might also consider window.devicePixelRatio)
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const gl = canvas.getContext("webgl");
if (!gl) {
alert("Your browser does not support WebGL");
return;
}
// Vertex shader source: takes a_position attribute and outputs gl_Position.
const vsSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source: uses a uniform color.
const fsSource = `
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
`;
// Helper: Compiles a shader of a given type.
function compileShader(gl, type, source) {
const 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;
}
// Create the shader program.
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error("Unable to initialize the shader program:", gl.getProgramInfoLog(shaderProgram));
return;
}
gl.useProgram(shaderProgram);
// Look up attribute and uniform locations.
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "a_position");
const colorUniformLocation = gl.getUniformLocation(shaderProgram, "u_color");
// Create a buffer object for vertex positions.
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Enable the attribute.
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Set the viewport to match the canvas dimensions.
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Clear canvas.
gl.clearColor(0.9, 0.9, 0.9, 1.0); // light gray background
gl.clear(gl.COLOR_BUFFER_BIT);
// Helper function to draw a shape from a provided vertices array and color.
function drawShape(vertices, color, primitiveType) {
// Upload vertices to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Set the uniform color.
gl.uniform4fv(colorUniformLocation, color);
// Draw the shape.
gl.drawArrays(primitiveType, 0, vertices.length / 2);
}
// Define vertices (in clip space) for each part.
// 1. House Base: a rectangle defined as two triangles.
// Coordinates chosen so that the base is centered.
const houseBaseVertices = [
-0.5, -0.8,
0.5, -0.8,
0.5, 0.0,
-0.5, -0.8,
0.5, 0.0,
-0.5, 0.0
];
// Brown color for the body.
const houseBaseColor = [0.6, 0.4, 0.2, 1.0];
// 2. Roof: an isosceles triangle sitting on top of the house base.
const roofVertices = [
-0.55, 0.0,
0.55, 0.0,
0.0, 0.7
];
// Red color for the roof.
const roofColor = [0.8, 0.0, 0.0, 1.0];
// 3. Chimney: a small rectangle that partly rises above the roof.
// Drawn as two triangles. Adjust its position so it appears on the roof.
const chimneyVertices = [
0.15, 0.4,
0.15, 0.65,
0.30, 0.65,
0.15, 0.4,
0.30, 0.65,
0.30, 0.4
];
// Gray color for the chimney.
const chimneyColor = [0.5, 0.5, 0.5, 1.0];
// Draw the house base.
drawShape(houseBaseVertices, houseBaseColor, gl.TRIANGLES);
// Draw the roof.
drawShape(roofVertices, roofColor, gl.TRIANGLES);
// Draw the chimney.
drawShape(chimneyVertices, chimneyColor, gl.TRIANGLES);
};
</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 depicts a simple drawing of a house. It consists of a brown square or rectangle representing the main structure of the house, topped with a red triangle representing the roof. There is also a small gray rectangle on the roof, which could represent a chimney. The background is a light gray color.
LLM Generation
Query
Does this answer say that there is a picture of a house with a chimney "The image depicts a simple drawing of a house. It consists of a brown square or rectangle representing the main structure of the house, topped with a red triangle representing the roof. There is also a small gray rectangle on the roof, which could represent a chimney. The background is a light gray color."? 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