\n\n \n\n[See the Examples!](https://oframe.github.io/ogl/examples)\n\nOGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are interested in creating their own shaders.\n\nWritten in es6 modules with zero dependencies, the API shares many similarities with ThreeJS, however it is tightly coupled with WebGL and comes with much fewer features.\n\nIn its design, the library does the minimum abstraction necessary, so devs should still feel comfortable using it in conjunction with native WebGL commands.\n\nKeeping the level of abstraction low helps to make the library easier to understand, extend, and also makes it more practical as a WebGL learning resource.\n\n## Install\n\n[Download](https://github.com/oframe/ogl/archive/master.zip)\n\n**or**\n\n```\nnpm i ogl\n```\n\n**or**\n\n```\nyarn add ogl\n```\n\n## Examples\n\n[Show me what you got!](https://oframe.github.io/ogl/examples) - Explore a comprehensive list of examples, with comments in the source code.\n\nInspired by the effectiveness of ThreeJS' examples, they will hopefully serve as reference for how to use the library, and to achieve a wide range of techniques.\n\n## Weight\n\nEven though the source is modular, as a guide, below are the complete component download sizes.\n\n| Component | Size (minzipped) |\n| --------- | ---------------: |\n| Core | 8kb |\n| Math | 6kb |\n| Extras | 15kb |\n| Total | 29kb |\n\nWith tree-shaking applied in a build step, one can expect the final size to be much lighter than the values above.\n\n## Usage\n\nIf installed amongst your project files, importing can be done from one single entry point.\n\n```js\nimport { ... } from './path/to/src/index.js';\n```\n\nElse if using a bundler or import maps with node modules, then import directly from the installed node module.\n\n```js\nimport { ... } from 'ogl';\n```\n\nBy default, the ES source modules are loaded (`src/index.js`).\n\nAs another alternative, you could load from a CDN, using either the jsdelivr, unpkg or skypack services.\n\n```js\nimport { ... } from 'https://cdn.jsdelivr.net/npm/ogl';\nimport { ... } from 'https://unpkg.com/ogl';\nimport { ... } from 'https://cdn.skypack.dev/ogl';\n```\n\nIf you take this route, I would highly recommend defining a specific version (append `@x.x.x`) to avoid code breaking, rather than fetching the latest version, as per the above links.\n\nAs a basic API example, below renders a spinning white cube.\n\n```js\nimport { Renderer, Camera, Transform, Box, Program, Mesh } from 'ogl';\n\n{\n const renderer = new Renderer();\n const gl = renderer.gl;\n document.body.appendChild(gl.canvas);\n\n const camera = new Camera(gl);\n camera.position.z = 5;\n\n function resize() {\n renderer.setSize(window.innerWidth, window.innerHeight);\n camera.perspective({\n aspect: gl.canvas.width / gl.canvas.height,\n });\n }\n window.addEventListener('resize', resize, false);\n resize();\n\n const scene = new Transform();\n\n const geometry = new Box(gl);\n\n const program = new Program(gl, {\n vertex: /* glsl */ `\n attribute vec3 position;\n\n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n\n void main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragment: /* glsl */ `\n void main() {\n gl_FragColor = vec4(1.0);\n }\n `,\n });\n\n const mesh = new Mesh(gl, { geometry, program });\n mesh.setParent(scene);\n\n requestAnimationFrame(update);\n function update(t) {\n requestAnimationFrame(update);\n\n mesh.rotation.y -= 0.04;\n mesh.rotation.x += 0.03;\n\n renderer.render({ scene, camera });\n }\n}\n```\n\nHere you can play with the above template live in a codesandbox\nhttps://codesandbox.io/s/ogl-5i69p\n\nFor a simpler use, such as a full-screen shader, more of the core can be omitted as a scene graph (Transform) and projection matrices (Camera) are not necessary. We'll also show how to easily create custom geometry.\n\n```js\nimport { Renderer, Geometry, Program, Mesh } from 'ogl';\n\n{\n const renderer = new Renderer({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n const gl = renderer.gl;\n document.body.appendChild(gl.canvas);\n\n // Triangle that covers viewport, with UVs that still span 0 > 1 across viewport\n const geometry = new Geometry(gl, {\n position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },\n uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) },\n });\n // Alternatively, you could use the Triangle class.\n\n const program = new Program(gl, {\n vertex: /* glsl */ `\n attribute vec2 uv;\n attribute vec2 position;\n\n varying vec2 vUv;\n\n void main() {\n vUv = uv;\n gl_Position = vec4(position, 0, 1);\n }\n `,\n fragment: /* glsl */ `\n precision highp float;\n\n uniform float uTime;\n\n varying vec2 vUv;\n\n void main() {\n gl_FragColor.rgb = vec3(0.8, 0.7, 1.0) + 0.3 * cos(vUv.xyx + uTime);\n gl_FragColor.a = 1.0;\n }\n `,\n uniforms: {\n uTime: { value: 0 },\n },\n });\n\n const mesh = new Mesh(gl, { geometry, program });\n\n requestAnimationFrame(update);\n function update(t) {\n requestAnimationFrame(update);\n\n program.uniforms.uTime.value = t * 0.001;\n\n // Don't need a camera if camera uniforms aren't required\n renderer.render({ scene: mesh });\n }\n}\n```\n\n## Structure\n\nIn an attempt to keep things light and modular, the library is split up into three components: **Math**, **Core**, and **Extras**.\n\nThe **Math** component is an extension of [gl-matrix](http://glmatrix.net/), providing instancable classes that extend Array for each of the module types. 8kb when gzipped, it has no dependencies and can be used separately.\n\nThe **Core** is made up of the following:\n\n- Geometry.js\n- Program.js\n- Renderer.js\n- Camera.js\n- Transform.js\n- Mesh.js\n- Texture.js\n- RenderTarget.js\n\nAny additional layers of abstraction will be included as **Extras**, and not part of the core as to reduce bloat. These provide a wide breadth of functionality, ranging from simple to advanced.\n\n## Unlicense\n\nThis is free and unencumbered software released into the public domain.\n\nAnyone is free to copy, modify, publish, use, compile, sell, or\ndistribute this software, either in source code form or as a compiled\nbinary, for any purpose, commercial or non-commercial, and by any\nmeans.\n\nIn jurisdictions that recognize copyright laws, the author or authors\nof this software dedicate any and all copyright interest in the\nsoftware to the public domain. We make this dedication for the benefit\nof the public at large and to the detriment of our heirs and\nsuccessors. We intend this dedication to be an overt act of\nrelinquishment in perpetuity of all present and future rights to this\nsoftware under copyright law.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\nOTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\nARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\nFor more information, please refer to \n","readmeFilename":"README.md"}
![\"OGL\"](\"https://github.com/oframe/ogl/raw/master/examples/assets/ogl.png\")
\n![\"version\"](\"https://img.shields.io/npm/v/ogl.svg\")
\n ![\"license\"](\"https://img.shields.io/npm/l/ogl.svg\")
\n