Demonstrates how to write convenience wrappers for the EIGHT.Grid
.
gridXY demonstrates a complete encapsulation.
gridYZ demonstrates a customized options list.
gridZX demonstrates a customized options list.
import { Engine, Grid } from 'davinci-eight' | |
export default function gridXY(engine: Engine, | |
options: { | |
xMin?: number; | |
xMax?: number; | |
xSegments?: number; | |
yMin?: number; | |
yMax?: number; | |
ySegments?: number; | |
} = {}): Grid { | |
return new Grid(engine, { | |
uMin: options.xMin, | |
uMax: options.xMax, | |
uSegments: options.xSegments, | |
vMin: options.yMin, | |
vMax: options.yMax, | |
vSegments: options.ySegments, | |
aPosition: (u: number, v: number) => { | |
return { x: u, y: v, z: 0 } | |
} | |
}) | |
} |
import { Engine, Grid } from 'davinci-eight' | |
export default function gridYZ(engine: Engine, | |
options: { | |
yMin?: number; | |
yMax?: number; | |
ySegments?: number; | |
zMin?: number; | |
zMax?: number; | |
zSegments?: number; | |
} = {}) { | |
return new Grid(engine, { | |
uMin: options.yMin, | |
uMax: options.yMax, | |
uSegments: options.ySegments, | |
vMin: options.zMin, | |
vMax: options.zMax, | |
vSegments: options.zSegments, | |
aPosition: (u: number, v: number) => { | |
return { x: 0, y: u, z: v } | |
} | |
}) | |
} |
import { Engine, Grid } from 'davinci-eight' | |
export default function gridZX(engine: Engine, | |
options: { | |
zMin?: number; | |
zMax?: number; | |
zSegments?: number; | |
xMin?: number; | |
xMax?: number; | |
xSegments?: number; | |
} = {}) { | |
return new Grid(engine, { | |
uMin: options.zMin, | |
uMax: options.zMax, | |
uSegments: options.zSegments, | |
vMin: options.xMin, | |
vMax: options.xMax, | |
vSegments: options.xSegments, | |
aPosition: (u: number, v: number) => { | |
return { x: v, y: 0, z: u } | |
} | |
}) | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://jspm.io/[email protected]"></script> | |
<link rel='stylesheet' href='style.css'> | |
</head> | |
<body> | |
<canvas id='canvas'></canvas> | |
<script> | |
System.defaultJSExtensions = true | |
System.import('./index') | |
</script> | |
</body> | |
</html> |
import { Engine, Capability, Scene } from 'davinci-eight' | |
import { BlendingFactorSrc, BlendingFactorDest } from 'davinci-eight' | |
import { DirectionalLight, Facet, PerspectiveCamera } from 'davinci-eight' | |
import { TrackballControls } from 'davinci-eight' | |
import { Box } from 'davinci-eight' | |
import { Color } from 'davinci-eight' | |
import { e2, e3 } from './math' | |
import gridXY from './gridXY' | |
import gridYZ from './gridYZ' | |
import gridZX from './gridZX' | |
const engine = new Engine('canvas') | |
.size(500, 500) | |
.clearColor(0.1, 0.1, 0.1, 1.0) | |
.enable(Capability.DEPTH_TEST) | |
.enable(Capability.BLEND) | |
.blendFunc(BlendingFactorSrc.SRC_ALPHA, BlendingFactorDest.ONE) | |
const scene = new Scene(engine) | |
const ambients: Facet[] = [] | |
const camera = new PerspectiveCamera() | |
camera.eye.copy(e3 - e2).normalize().scale(10) | |
camera.up.copy(e2) | |
ambients.push(camera) | |
const dirLight = new DirectionalLight() | |
ambients.push(dirLight) | |
const trackball = new TrackballControls(camera, window) | |
// Workaround because Trackball no longer supports context menu for panning. | |
trackball.noPan = true | |
trackball.subscribe(engine.canvas) | |
const plane = new Box(engine) | |
plane.color = Color.blue | |
plane.width = 6 | |
plane.height = 6 | |
plane.depth = 0.2 | |
plane.opacity = 0.4 | |
plane.transparent = true | |
scene.add(plane) | |
const cube = new Box(engine) | |
cube.color = Color.red | |
cube.opacity = 1. | |
cube.transparent = false | |
scene.add(cube) | |
const gXY = gridXY(engine, { xMin: -4, xMax: 4, xSegments: 8, yMin: -4, yMax: 4, ySegments: 8 }) | |
gXY.color = Color.gray | |
scene.add(gXY) | |
const gYZ = gridYZ(engine, { yMin: -4, yMax: 4, ySegments: 8, zMin: -4, zMax: 4, zSegments: 8 }) | |
gYZ.color = Color.gray | |
scene.add(gYZ) | |
const gZX = gridZX(engine, { zMin: -4, zMax: 4, zSegments: 8, xMin: -4, xMax: 4, xSegments: 8 }) | |
gZX.color = Color.gray | |
scene.add(gZX) | |
const stats = new Stats() | |
stats.showPanel(0) | |
document.body.appendChild(stats.domElement) | |
/** | |
* Animates the scene. | |
*/ | |
function animate() { | |
stats.begin() | |
engine.clear() | |
trackball.update() | |
dirLight.direction.copy(camera.look).sub(camera.eye) | |
// const t = timestamp * 0.001 | |
scene.render(ambients) | |
stats.end() | |
requestAnimationFrame(animate) | |
} | |
requestAnimationFrame(animate) |
import { Geometric3 } from 'davinci-eight' | |
// | |
// Basis elements | |
// | |
export const zero = Geometric3.zero() | |
export const one = Geometric3.one() | |
export const e1 = Geometric3.e1() | |
export const e2 = Geometric3.e2() | |
export const e3 = Geometric3.e3() | |
/** | |
* The pseudoscalar for Euclidean 3D Geometric Space. | |
*/ | |
export const I = e1 ^ e2 ^ e3 | |
// | |
// Universal functions | |
// | |
export { exp } from 'davinci-eight' | |
export { log } from 'davinci-eight' | |
export { cos } from 'davinci-eight' | |
export { sin } from 'davinci-eight' | |
// | |
// Constants | |
// | |
/** | |
* A complete turn, 2 * π. | |
*/ | |
export const τ = 2 * Math.PI |
{ | |
"description": "DaVinci eight Grids", | |
"dependencies": { | |
"stats.js": "0.16.0", | |
"davinci-eight": "8.2.0" | |
}, | |
"operatorOverloading": true, | |
"name": "copy-of-eight-alpha-blending", | |
"version": "0.1.0", | |
"keywords": [ | |
"WebGL", | |
"EIGHT", | |
"Grid", | |
"STEMCstudio" | |
], | |
"author": "David Geo Holmes", | |
"linting": true, | |
"hideConfigFiles": true | |
} |
body { | |
margin: 0; | |
overflow: hidden; | |
background: blue; | |
} | |
canvas { | |
width: 500px; | |
height: 500px; | |
} | |
#stats { | |
position: absolute; | |
top: 0; | |
left: 0; | |
} |
{ | |
"allowJs": true, | |
"checkJs": true, | |
"declaration": true, | |
"emitDecoratorMetadata": true, | |
"experimentalDecorators": true, | |
"jsx": "react", | |
"module": "system", | |
"noImplicitAny": true, | |
"noImplicitReturns": true, | |
"noImplicitThis": true, | |
"noUnusedLocals": true, | |
"noUnusedParameters": false, | |
"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 | |
} | |
} |