Tool Request: call_3MET7HsOWJRySnKQ7PbCc2gB - create_file
{"content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Basic WebGL Shader Demo</title>\n <style>\n body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #333; color: #fff; }\n canvas { display: block; }\n </style>\n</head>\n<body>\n <canvas id=\"glCanvas\"></canvas>\n <script>\n // Get A WebGL context\n const canvas = document.getElementById(\"glCanvas\");\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n const gl = canvas.getContext(\"webgl\");\n if (!gl) {\n alert(\"Unable to initialize WebGL. Your browser may not support it.\");\n }\n\n // Vertex shader program\n const vsSource = `\n attribute vec4 aVertexPosition;\n\n void main(void) {\n gl_Position = aVertexPosition;\n }\n `;\n\n // Fragment shader program\n const fsSource = `\n precision mediump float;\n \n void main(void) {\n gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); // Orange color\n }\n `;\n\n // Initialize a shader program; this is where all the lighting for the\n // vertices and so forth is established.\n function initShaderProgram(gl, vsSource, fsSource) {\n const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);\n const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);\n\n // Create the shader program\n const shaderProgram = gl.createProgram();\n gl.attachShader(shaderProgram, vertexShader);\n gl.attachShader(shaderProgram, fragmentShader);\n gl.linkProgram(shaderProgram);\n\n // If creating the shader program failed, alert\n if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {\n alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));\n return null;\n }\n\n return shaderProgram;\n }\n\n // creates a shader of the given type, uploads the source and\n // compiles it.\n function loadShader(gl, type, source) {\n const shader = gl.createShader(type);\n\n // Send the source to the shader object\n gl.shaderSource(shader, source);\n\n // Compile the shader program\n gl.compileShader(shader);\n\n // See if it compiled successfully\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n return null;\n }\n\n return shader;\n }\n\n // Initialize the shader program\n const shaderProgram = initShaderProgram(gl, vsSource, fsSource);\n\n // Look up where the vertex data needs to go.\n const programInfo = {\n program: shaderProgram,\n attribLocations: {\n vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),\n },\n };\n\n // Here's a simple square (two triangles)\n const positions = [\n 1.0, 1.0,\n -1.0, 1.0,\n 1.0, -1.0,\n -1.0, -1.0,\n ];\n\n // Create a buffer for the square's positions.\n const positionBuffer = gl.createBuffer();\n\n // Select the positionBuffer as the one to apply buffer operations to\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n\n // 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.\n gl.bufferData(gl.ARRAY_BUFFER,\n new Float32Array(positions),\n gl.STATIC_DRAW);\n\n // Draw the scene repeatedly\n function render() {\n // Adjust canvas size\n resizeCanvasToDisplaySize(gl.canvas);\n gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\n\n // Clear the canvas\n gl.clearColor(0.0, 0.0, 0.0, 1.0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n // Tell WebGL how to pull out the positions from the position\n // buffer into the vertexPosition attribute.\n {\n const numComponents = 2; // pull out 2 values per iteration\n const type = gl.FLOAT; \n const normalize = false; \n const stride = 0; \n const offset = 0; \n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n gl.vertexAttribPointer(\n programInfo.attribLocations.vertexPosition,\n numComponents,\n type,\n normalize,\n stride,\n offset);\n gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);\n }\n\n // Tell WebGL to use our program when drawing\n gl.useProgram(programInfo.program);\n\n // Draw the square (two triangles)\n {\n const offset = 0;\n const vertexCount = 4;\n gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);\n }\n }\n\n // Call render\n render();\n\n // Utility: resize the canvas to the display size\n function resizeCanvasToDisplaySize(canvas) {\n const displayWidth = canvas.clientWidth;\n const displayHeight = canvas.clientHeight;\n\n if (canvas.width !== displayWidth || canvas.height !== displayHeight) {\n canvas.width = displayWidth;\n canvas.height = displayHeight;\n }\n }\n </script>\n</body>\n</html>\n","file_name": "index.html"}