Tool Request: 705618089 - create_file
{"content":"<!DOCTYPE html>\n<html lang='en'>\n<head>\n <meta charset='UTF-8'>\n <title>WebGL Shader Demo</title>\n <style>\n body {\n margin: 0;\n }\n canvas {\n display: block;\n background-color: #ffffff;\n }\n </style>\n</head>\n<body>\n<script id='vertex-shader' type='x-shader/x-vertex'>\nattribute vec2 a_position;\nvarying vec4 v_color;\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_color = vec4(1.0, 1.0, 1.0, 1.0);\n}\n</script>\n<script id='fragment-shader' type='x-shader/x-fragment'>\nvarying vec4 v_color;\nvoid main() {\n gl_FragColor = v_color;\n}</script>\n\n<script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js'></script>\n<script>\nwindow.onload = function initWebGL() {\n var canvas = document.createElement('canvas');\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n document.body.appendChild(canvas);\n\n var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');\n if (!gl) {\n alert('WebGL is not supported! Try Chrome or Firefox.');\n return;\n }\n\n // Vertex shader source code\n var vertexShaderSource = document.getElementById('vertex-shader').textContent;\n // Fragment shader source code\n var fragmentShaderSource = document.getElementById('fragment-shader').textContent;\n\n function createShader(gl, type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n return shader;\n }\n\n // Create a vertex shader and fragment shader\n var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\n var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\n\n function createProgram(gl, vs, fs) {\n const program = gl.createProgram();\n gl.attachShader(program, vs);\n gl.attachShader(program, fs);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n console.log('Failed to compile program: ' + gl.getProgramInfoLog(program));\n return null;\n }\n gl.validateProgram(program);\n if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {\n console.log('Invalid program: ' + gl.getProgramInfoLog(program));\n return null;\n }\n return program;\n }\n\n var program = createProgram(gl, vertexShader, fragmentShader);\n if (!program) {\n alert('Error creating WebGL program!');\n return;\n }\n\n // Set up the vertex buffer and draw it\n gl.useProgram(program);\n\n const vertices = new Float32Array([\n -0.5, -0.5,\n 0.5, -0.5,\n 0.0, 0.5\n ]);\n const bufferId = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);\n gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);\n var a_position = gl.getAttribLocation(program, 'a_position');\n gl.enableVertexAttribArray(a_position);\n gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);\n\n // Clear the screen and draw\n gl.clearColor(0.1, 0.5, 0.1, 1); \n gl.viewport(0, 0, window.innerWidth, window.innerHeight);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n // Draw the triangle\n gl.drawArrays(gl.TRIANGLES, 0, 3); \n}\n</script>\n</body>\n</html>","file_name":"index.html"}