Draw an image of a house with a chimney using WebGL in a single HTML file. Make the canvas take the full page.
Draw an image of a house with a chimney using WebGL in a single HTML file. Make the canvas take the full page.
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!
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> |
Rendering the webpage gives the following image:
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?
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.
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".
Yes it does.
Testing if the previous output contains the string es it does
: True
Testing if the previous output contains the string THREE.
: False
Draw an image of a house with a chimney using WebGL in a single HTML file. Make the canvas take the full page.
Draw an image of a house with a chimney using WebGL in a single HTML file. Make the canvas take the full page.
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!
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> |
Rendering the webpage gives the following image:
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?
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.
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".
Yes it does.
Testing if the previous output contains the string es it does
: True
Testing if the previous output contains the string THREE.
: False