25:["$","title",null,{"children":"WebGL – step by step | Steffen Hänsch | Observable"}] 49:Tca2,initialize = { // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Clear the canvas gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); // Tell it to use our program (pair of shaders) gl.useProgram(shaderProgram); /* To store data on the GPU, we have to use the --gl.ARRAY_BUFFER--. These are the five steps of passing data to the Vertex Shader: (1) Create a buffer object (gl.createBuffer()). (2) Bind the buffer object to a target (gl.bindBuffer()). (3) Write data into the buffer object (gl.bufferData()). (4) Assign the buffer object to an attribute variable. (4.1) Lookup the variable name (gl.getAttribLocation()) (4.2) Point the buffer to attribute (gl.vertexAttribPointer()) (5) Enable assignment (gl.enableVertexAttribArray()). */ // (1) Create a buffer object. // If we give a variable name to the buffer, we can rebind to this buffer at a later point. const positionBuffer = gl.createBuffer(); // (2) Bind the created buffer to gl.ARRAY_BUFFER // (think of it as "set this buffer as the currently active ARRAY_BUFFER") gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // (3) Write the position data to the currently bound ARRAY_BUFFER // Hint: WebGL will always write to and read from the currently bound buffer. That means you can create // multiple buffers (e.g. for positions, colors, normals etc.) and pass their data to WebGL by binding // them to gl.ARRAY_BUFFER gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([ // the vertices of our triangle -0.5, 0.5, 0.5, 0.5, -0.5, -0.5, ]), gl.STATIC_DRAW // => Contents of the buffer are likely to be used often and not change often. // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData ); // (4.1) Look up where the vertex data needs to go (The variable name of the vertex shader). // Hint: Looking up attribute locations (and uniform locations) is something // you should do during initialization, not in your render loop. const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "a_position"); // (4.2) Tell the attribute how to get data out of the currently bound buffer const size = 2; // 2 components per iteration (x and y) const type = gl.FLOAT; // the data is 32bit floats const normalize = false; // don't normalize the data const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position const bufferOffset = 0; // offset in bytes of the first component in the vertex attribute array. Must be a // multiple of the byte length of type gl.vertexAttribPointer( positionAttributeLocation, size, type, normalize, stride, bufferOffset) // (5) Turn on the attribute gl.enableVertexAttribArray(positionAttributeLocation); // draw const primitiveType = gl.TRIANGLES; const offset = 0; const count = 3; // 3 vertices per triangle gl.drawArrays(primitiveType, offset, count); // logGLVersionAndGraphicsCard(gl); }4a:[] 29:{"id":"0b529af782baefd5","slug":null,"title":"WebGL – step by step","thumbnail":"495a7e48e00e85b484776118e0a05481e1aa3e04e9c5b3c0bc578956ae8dfa12","access_level":"public","create_time":"$D2018-11-08T20:10:33.435Z","update_time":"$D2024-07-11T11:30:54.832Z","view_time":null,"first_public_time":"$D2024-07-11T11:35:34.653Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9f0a5778a9e93283","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":"starter_2024","bio":"Visual Engineer.","followed_by_you":false,"follows_you":false},"version":427,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null,"bio":"Visual Engineer.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null,"role":"editor"},{"type":"team","id":"9f0a5778a9e93283","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c7433641bbe0af72","slug":"webgl","title":"WebGL","owner":{"id":"9f0a5778a9e93283","login":"s-haensch","name":"Steffen Hänsch"}},"type":"notebook","body":{"titling":"auto","title":"WebGL – step by step","cells":[{"id":0,"value":"md`\n# WebGL – step by step\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"md`\n### 1. The canvas\nfirst create a canvas and get its rendering context:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// our target canvas\ncanvas = DOM.canvas(width, 500)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"// the WebGLRenderingContext of our canvas\ngl = canvas.getContext('webgl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`\n
\nThe WebGLRenderingContext is how we can access the shader functionality of a canvas element.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md`\n
\n### 2. The shader source files\nthen create the programs for the vertex shader and the fragment shader:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"vsSource = `\nattribute vec4 a_position;\n\nvoid main() {\n gl_Position = a_position;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"fsSource = `\nprecision mediump float;\n\nvoid main() {\n gl_FragColor = vec4(0.4, 0.25, 0.75, 1); // a nice tone of purple\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`\n
\n### 3. Create and compile the shaders\nnext we will create a helper function that creates and compiles the shaders from our sourcecodes:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"// a utiliy function to create a shader, that we can use for both shaders\ncreateAndCompileShader = (gl, type, source) => {\n // create a new empty shader object of the given type (gl.VERTEX_SHADER\n // or gl.FRAGMENT_SHADER) using the given gl context\n const shader = gl.createShader(type);\n\n // add the sourcecode to the empty shader object\n gl.shaderSource(shader, source);\n \n // compile that shader\n gl.compileShader(shader);\n\n // if something goes wrong, delete the shader from the context and throw an error\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n gl.deleteShader(shader);\n throw new Error(`Couldn't compile shader`);\n }\n\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"// the vertex shader (coordinates)\nvertexShader = createAndCompileShader(gl, gl.VERTEX_SHADER, vsSource)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"// the fragment shader (colors)\nfragmentShader = createAndCompileShader(gl, gl.FRAGMENT_SHADER, fsSource)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`\n
\n### 4. Create the shader program\nthe shader program is what's executed in the GPU. Here we create a helper function that creates a new program and links the shaders to it.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"createShaderProgram = (gl, vertexShader, fragmentShader) => {\n // create a new empty shader program object using the given gl context\n const shaderProgram = gl.createProgram();\n \n // attach our shaders and link them\n gl.attachShader(shaderProgram, vertexShader);\n gl.attachShader(shaderProgram, fragmentShader);\n gl.linkProgram(shaderProgram);\n\n // If creating the shader program failed, throw error and delete the program\n if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {\n throw new Error(`Couldn't link shader`);\n gl.deleteProgram(shaderProgram);\n }\n \n return shaderProgram;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"shaderProgram = createShaderProgram(gl, vertexShader, fragmentShader)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`\n
\n### 5. Feed data to the program\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`\n
\n### helpers\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"logGLVersionAndGraphicsCard = (gl) => {\n console.log(gl.getParameter(gl.VERSION));\n console.log(gl.getParameter(gl.SHADING_LANGUAGE_VERSION));\n console.log(gl.getParameter(gl.VENDOR));\n \n // try to get the extensions\n const ext = gl.getExtension(\"WEBGL_debug_renderer_info\");\n\n // if the extension exists, find out the info.\n if (ext) {\n console.log(gl.getParameter(ext.UNMASKED_VENDOR_WEBGL));\n console.log(gl.getParameter(ext.UNMASKED_RENDERER_WEBGL));\n } \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null