Created
July 14, 2020 17:46
-
-
Save mathdoodle/3c54bdae0583297ee519fb8e28b10abd to your computer and use it in GitHub Desktop.
WebGL Fundamentals from HTML 5 Rocks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| void main() { | |
| gl_FragColor = vec4(0, 1, 0, 1); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| attribute vec2 a_position; | |
| void main() { | |
| gl_Position = vec4(a_position, 0, 1); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| void main(void) { | |
| gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * The angle in the conic section formula. | |
| */ | |
| attribute float theta; | |
| /** | |
| * The eccentricity of the conic section. | |
| */ | |
| uniform float e; | |
| /** | |
| * The projection matrix. | |
| */ | |
| uniform mat4 P; | |
| /** | |
| * The view matrix. | |
| */ | |
| uniform mat4 V; | |
| /** | |
| * The semi-latus rectum. | |
| */ | |
| float L = 0.5; | |
| void main(void) { | |
| float c = cos(theta); | |
| float s = sin(theta); | |
| float r = L / (1.0 + e * c); | |
| gl_Position = P * V * vec4(r * c, r * s, 0.0, 1.0); | |
| gl_PointSize = 2.0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://jspm.io/[email protected]"></script> | |
| <link rel='stylesheet' href='style.css'> | |
| </head> | |
| <body> | |
| <canvas id='canvas' width='500' height='500'> | |
| Your browser does not support the HTML5 canvas element. | |
| </canvas> | |
| <script> | |
| System.defaultJSExtensions = true | |
| System.import('./script') | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function range(from: number, to: number, step = 1): number[] { | |
| const ns: number[] = [] | |
| const steps = (to - from) / step | |
| for (let i = 0; i < steps; i++) { | |
| ns[i] = from + i * step | |
| } | |
| return ns | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "copy-of-conic-sections-with-webgl", | |
| "version": "0.1.0", | |
| "description": "WebGL Fundamentals from HTML 5 Rocks", | |
| "dependencies": { | |
| "stats.js": "0.16.0", | |
| "davinci-eight": "7.4.4", | |
| "dat.gui": "0.7.7" | |
| }, | |
| "keywords": [ | |
| "WebGL", | |
| "shaders", | |
| "low level", | |
| "GLSL", | |
| "Graphics", | |
| "ES6", | |
| "classes", | |
| "mathdoodle" | |
| ], | |
| "linting": true | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Engine } from 'davinci-eight' | |
| import { HTMLScriptsMaterial } from 'davinci-eight' | |
| import { DataType } from 'davinci-eight' | |
| import { ClearBufferMask } from 'davinci-eight' | |
| import { VertexBuffer } from './VertexBuffer' | |
| // Get a WebGL context | |
| const engine = new Engine("canvas", {}, document) | |
| // engine.start('canvas') | |
| const canvas = engine.canvas | |
| // const gl = engine.gl | |
| const gl = canvas.getContext("webgl") as WebGLRenderingContext | |
| gl.clearColor(0.0, 0.0, 0.0, 1.0) | |
| gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight) | |
| // setup a GLSL program | |
| const material = new HTMLScriptsMaterial(engine, ['2d-vertex-shader', '2d-fragment-shader'], [], document) | |
| material.use() | |
| const vbo = new VertexBuffer(gl) | |
| const data = [ | |
| -1.0, -1.0, | |
| 1.0, -1.0, | |
| -1.0, 1.0, | |
| -1.0, 1.0, | |
| 1.0, -1.0, | |
| 1.0, 1.0] | |
| vbo.bind() | |
| vbo.upload(new Float32Array(data), gl.STATIC_DRAW) | |
| vbo.unbind() | |
| const aPosition = material.getAttrib('a_position') | |
| aPosition.enable() | |
| vbo.bind() // buffer must be bound while the attribute is configured. | |
| aPosition.config(2, DataType.FLOAT, false, 0, 0) | |
| vbo.unbind() | |
| const stats = new Stats() | |
| document.body.appendChild(stats.domElement) | |
| function animate() { | |
| stats.begin() | |
| engine.clear(ClearBufferMask.COLOR_BUFFER_BIT) | |
| material.use() | |
| // material.getUniform('e').uniform1f(controls.e) | |
| // material.getUniform('P').matrix4fv(false, camera.projectionMatrix.elements) | |
| // material.getUniform('V').matrix4fv(false, camera.viewMatrix.elements) | |
| vbo.bind() | |
| vbo.drawTriangles(0, 6) | |
| vbo.unbind() | |
| stats.end() | |
| requestAnimationFrame(animate) | |
| } | |
| requestAnimationFrame(animate) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: blue; | |
| overflow: hidden; | |
| } | |
| canvas { | |
| background-color: white; | |
| position: absolute; | |
| left: 10px; | |
| top: 10px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "allowJs": true, | |
| "checkJs": true, | |
| "declaration": true, | |
| "emitDecoratorMetadata": true, | |
| "experimentalDecorators": true, | |
| "jsx": "react", | |
| "module": "system", | |
| "noImplicitAny": true, | |
| "noImplicitReturns": true, | |
| "noImplicitThis": true, | |
| "noUnusedLocals": true, | |
| "noUnusedParameters": true, | |
| "preserveConstEnums": true, | |
| "removeComments": false, | |
| "skipLibCheck": true, | |
| "sourceMap": true, | |
| "strictNullChecks": true, | |
| "suppressImplicitAnyIndexErrors": true, | |
| "target": "es5", | |
| "traceResolution": true | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "rules": { | |
| "array-type": [ | |
| true, | |
| "array" | |
| ], | |
| "curly": false, | |
| "comment-format": [ | |
| true, | |
| "check-space" | |
| ], | |
| "eofline": true, | |
| "forin": true, | |
| "jsdoc-format": true, | |
| "new-parens": true, | |
| "no-conditional-assignment": false, | |
| "no-consecutive-blank-lines": true, | |
| "no-construct": true, | |
| "no-for-in-array": true, | |
| "no-inferrable-types": [ | |
| true | |
| ], | |
| "no-magic-numbers": false, | |
| "no-shadowed-variable": true, | |
| "no-string-throw": true, | |
| "no-trailing-whitespace": [ | |
| true, | |
| "ignore-jsdoc" | |
| ], | |
| "no-var-keyword": true, | |
| "one-variable-per-declaration": [ | |
| true, | |
| "ignore-for-loop" | |
| ], | |
| "prefer-const": true, | |
| "prefer-for-of": true, | |
| "prefer-function-over-method": false, | |
| "prefer-method-signature": true, | |
| "radix": true, | |
| "semicolon": [ | |
| true, | |
| "never" | |
| ], | |
| "trailing-comma": [ | |
| true, | |
| { | |
| "multiline": "never", | |
| "singleline": "never" | |
| } | |
| ], | |
| "triple-equals": true, | |
| "use-isnan": true | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class UserControls extends dat.GUI { | |
| public e = 0.1 | |
| constructor() { | |
| super() | |
| this.add(this, 'e', -5.0, 5.0) | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { BeginMode } from 'davinci-eight' | |
| /** | |
| * A WebGLBuffer associated with the ARRAY_BUFFER target. | |
| */ | |
| export class VertexBuffer { | |
| public buffer: WebGLBuffer | |
| constructor(private gl: WebGLRenderingContext) { | |
| this.buffer = gl.createBuffer() as WebGLBuffer | |
| } | |
| /** | |
| * Calls WebGLRenderingContext bindBuffer function with the ARRAY_BUFFER target and this.buffer. | |
| */ | |
| bind() { | |
| this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer) | |
| } | |
| unbind() { | |
| this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null) | |
| } | |
| /** | |
| * Calls WebGLRenderingContext bufferData function with the ARRAY_BUFFER target, the data and usage. | |
| */ | |
| upload(data: Float32Array, usage: number) { | |
| this.gl.bufferData(this.gl.ARRAY_BUFFER, data, usage) | |
| } | |
| drawPoints(first: number, count: number) { | |
| this.gl.drawArrays(BeginMode.POINTS, first, count) | |
| } | |
| drawTriangles(first: number, count: number) { | |
| this.gl.drawArrays(BeginMode.TRIANGLES, first, count) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment