mathdoodle/2d-fragment-shader.glsl

## 2d-fragment-shader.glsl
void main() {
  gl_FragColor = vec4(0, 1, 0, 1);
}

## 2d-vertex-shader.glsl
attribute vec2 a_position;

void main() {
  gl_Position = vec4(a_position, 0, 1);
}

## README.md

      
    Raw
  

              README.md
            
          
    WebGL Fundamentals from HTML 5 Rocks


## conic-fs.glsl
void main(void) {
  gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}

## conic-vs.glsl
/**
 * 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;
}

## index.html
<!DOCTYPE html>
<html>

<head>
    <script src="https://jspm.io/system@0.19.34.js"></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>

## numeric.ts
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
}

## package.json
{
  "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
}

## script.ts
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)

## style.css
body {
    background-color: blue;
    overflow: hidden;
}

canvas {
    background-color: white;
    position: absolute;
    left: 10px;
    top: 10px;
}

## tsconfig.json
{
    "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
}

## tslint.json
{
    "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
    }
}

## UserControls.ts
export class UserControls extends dat.GUI {
    public e = 0.1
    constructor() {
        super()
        this.add(this, 'e', -5.0, 5.0)
    }
}

## VertexBuffer.ts
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)
    }
}
	attribute vec2 a_position;

	void main() {
	gl_Position = vec4(a_position, 0, 1);
	}
	/**
	* 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;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<script src="https://jspm.io/system@0.19.34.js"></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>
	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
	}
	{
	"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
	}
	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)
	body {
	background-color: blue;
	overflow: hidden;
	}

	canvas {
	background-color: white;
	position: absolute;
	left: 10px;
	top: 10px;
	}
	{
	"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
	}
	{
	"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
	}
	}
	export class UserControls extends dat.GUI {
	public e = 0.1
	constructor() {
	super()
	this.add(this, 'e', -5.0, 5.0)
	}
	}