model: function (context, params) {
mat4.identity(model)
mat4.scale(model, model, [0.5,3,0.5])
mat4.translate(model, model, [-1.1,0.75,0])
mat4.translate(model, model, params.offset)
mat4.rotateY(model, model, params.angleY)
return model
},
test("decompose a 3D matrix", function(t) {
var m = mat.create()
var translate = [0,0,0],
scale = [0,0,0],
skew = [0,0,0],
perspective = [0,0,0,1],
quaternion = [0,0,0,1]
var valid = decompose(m)
t.equal(valid, true, 'can be decomposed')
mat.identity(m)
mat.translate(m, m, [-5, 2, 10])
decompose(m, translate)
t.deepEqual(translate, [-5, 2, 10], 'extracts translation')
mat.identity(m)
mat.scale(m, m, [1, 0, 5])
decompose(m, translate, scale)
t.deepEqual(scale, [1, 0, 5], 'extracts scale')
mat.identity(m)
mat.rotateX(m, m, Math.PI)
decompose(m, translate, scale, skew, perspective, quaternion)
t.deepEqual(quaternion, [1, 0, 0, 0], 'extracts rotation x')
mat.identity(m)
mat.rotateY(m, m, -Math.PI)
decompose(m, translate, scale, skew, perspective, quaternion)
t.deepEqual(quaternion, [0, -1, 0, 0], 'extracts rotation y')
mat.identity(m)
mat.rotateZ(m, m, -Math.PI)
decompose(m, translate, scale, skew, perspective, quaternion)
t.deepEqual(quaternion, [0, 0, -1, 0], 'extracts rotation z')
t.deepEqual(skew, [0,0,0], 'extracts skew')
mat.identity(m)
mat.translate(m, m, [10, 5, -50])
mat.scale(m, m, [0.25, 0.5, -0.5])
mat.rotateZ(m, m, -Math.PI)
decompose(m, translate, scale, skew, perspective, quaternion)
t.deepEqual(translate, [10,5,-50], 'extracts translation')
t.deepEqual(perspective, [0,0,0,1], 'extracts perspective')
t.deepEqual(scale, [-0.25,-0.5,-0.5], 'extracts scale')
t.deepEqual(quaternion, [0,0,0,1], 'extracts rotation')
t.end()
})
model: function (context, props) {
var freq = 0.5
if (context.time > updated + freq) {
vec3.copy(pdir, ndir)
ptheta = ntheta
ntheta = (Math.random()*2-1) * Math.PI * 2
ndir = [Math.cos(ntheta),0,Math.sin(ntheta)]
updated = context.time
}
var t = (context.time - updated) / freq
var v = []
var rmat = []
mat4.identity(rmat)
mat4.rotateY(rmat, rmat, spow(lerp(-ptheta,-ntheta,t),0.2))
vec3.lerp(v, pdir, ndir, t)
vec3.scale(v, v, 0.5)
vec3.add(v, pos, v)
if (vec3.length(pos) > 10) {
pos[0] = (Math.random()*2-1)*5
pos[2] = (Math.random()*2-1)*5
ntheta = -ntheta
ndir = [Math.cos(ntheta),0,Math.sin(ntheta)]
updated = context.time
}
mat4.identity(model)
mat4.translate(model, model, v)
mat4.multiply(model, model, rmat)
return model
}
OutlinePlugin.prototype.tick = function() {
var hit = this.game.raycastVoxels();
if (!hit) {
// remove outline if any
if (this.currentTarget) {
this.emit('remove', this.currentTarget.slice());
}
this.currentTarget = undefined;
return;
}
// if changed voxel target, update matrix and emit event
if (!this.currentTarget ||
hit.voxel[0] !== this.currentTarget[0] ||
hit.voxel[1] !== this.currentTarget[1] ||
hit.voxel[2] !== this.currentTarget[2]) {
// translate to voxel position
mat4.identity(this.modelMatrix);
mat4.translate(this.modelMatrix, this.modelMatrix, hit.voxel);
mat4.scale(this.modelMatrix, this.modelMatrix, epsilonVector);
if (this.currentTarget) {
this.emit('remove', this.currentTarget.slice());
}
this.currentTarget = hit.voxel.slice();
this.emit('highlight', this.currentTarget.slice(), hit);
}
};
function centerPositions(positions) {
var bb = boundingBox(positions)
var _translate = [
-0.5 * (bb[0][0] + bb[1][0]),
-0.5 * (bb[0][1] + bb[1][1]),
-0.5 * (bb[0][2] + bb[1][2])
]
var mat = mat4.create()
mat4.translate(mat, mat, _translate)
var newPositions = tform(positions, mat)
var bound = 13.0;
var _scale = [
bound / (bb[1][0] - bb[0][0]),
bound / (bb[1][1] - bb[0][1]),
bound / (bb[1][2] - bb[0][2])
]
var scale = mat4.create()
mat4.scale(scale, scale, _scale)
newPositions = tform(newPositions, scale)
return newPositions;
}
export default function centerGeometry(geometry, boundingBox){
const translation = [
-0.5 * (boundingBox[0][0] + boundingBox[1][0]),
-0.5 * (boundingBox[0][1] + boundingBox[1][1]),
-0.5 * (boundingBox[0][2] + boundingBox[1][2])
]
let translate = mat4.create()
translate = mat4.translate(translate, translate, translation)
//taken almost verbatim from https://github.com/wwwtyro/geo-3d-transform-mat4/blob/master/index.js
function transform(positions){
for (var i = 0; i < positions.length; i+=3) {
vec3.transformMat4(newpos[i], newpos[i], m)
}
/*var oldfmt = geoid.identify(positions)
var newpos = geoconv.convert(positions, geoid.ARRAY_OF_ARRAYS, 3)
for (var i = 0; i < newpos.length; i++) {
vec3.transformMat4(newpos[i], newpos[i], m)
}
newpos = geoconv.convert(newpos, oldfmt, 3)
return newpos*/
}
const centered = transform(geometry.positions, translate)
return centered
}
render:function(camera,time,settings){
_rotation += (360 * time.elapsed) * (settings.timeScale*0.000001);
_z = _initialZ+_zIndex*Math.cos(_rotation);
mat4.identity(model, model);
mat4.translate(model, model, [_z, 0, -10]);
//mat4.translate(model, model, [0, 0, 0]);
//mat4.rotate(model, model, _rotation, [0, 1, 0]);
if(tex){
tex.bind(0);
}
_shader.bind();
_shader.uniforms.uProjection = camera.projection;
_shader.uniforms.uModelView = model;
_shader.uniforms.view = camera.view
_shader.uniforms.resolution = _viewResolution;
var _time = time.lastTime-time.initTime;
_shader.uniforms.time = parseFloat(_time);
_vertices.bind();
_shader.attributes.aPosition.pointer();
_colors.bind();
_shader.attributes.aColor.pointer();
gl.drawArrays(gl.TRIANGLE_FAN, 0, _length);
_vertices.unbind();
_colors.unbind();
}
model: (_, props, batchId) => {
var m = mat4.identity([])
mat4.translate(m, m, props.translate)
var r = props.radius
mat4.scale(m, m, [r, r, r])
return m
}
model: function (context, props) {
var v = [1,props.h,1]
mat4.identity(model)
mat4.scale(model,model,v)
vec3.divide(v, props.pos, v)
mat4.translate(model,model,v)
mat4.identity(tmpa)
mat4.rotateZ(tmpa, tmpa, props.theta)
mat4.rotateX(tmpa, tmpa, props.phi)
mat4.multiply(model, tmpa, model)
return model
},
//Creates a mesh from a set of voxels
function createVoxelMesh(gl, voxels, voxelSideTextureIDs, voxelSideTextureSizes, position, pad, that) {
//Create mesh
var vert_data = createAOMesh(voxels, voxelSideTextureIDs, voxelSideTextureSizes)
var vertexArrayObjects = {}
if (vert_data === null) {
// no vertices allocated
} else {
//Upload triangle mesh to WebGL
var vert_buf = createBuffer(gl, vert_data)
var triangleVAO = createVAO(gl, [
{ "buffer": vert_buf,
"type": gl.UNSIGNED_BYTE,
"size": 4,
"offset": 0,
"stride": 8,
"normalized": false
},
{ "buffer": vert_buf,
"type": gl.UNSIGNED_BYTE,
"size": 4,
"offset": 4,
"stride": 8,
"normalized": false
}
])
triangleVAO.length = Math.floor(vert_data.length/8)
vertexArrayObjects.surface = triangleVAO
}
// move the chunk into place
var modelMatrix = mat4.create()
var w = voxels.shape[2] - pad // =[1]=[0]=game.chunkSize
var translateVector = [
position[0] * w,
position[1] * w,
position[2] * w]
mat4.translate(modelMatrix, modelMatrix, translateVector)
//Bundle result and return
var result = {
vertexArrayObjects: vertexArrayObjects, // other plugins can add their own VAOs
center: [w>>1, w>>1, w>>1],
radius: w,
modelMatrix: modelMatrix
}
if (that) that.emit('meshed', result, gl, vert_data, voxels)
return result
}
return function (count, opts) {
camera(mat4.identity(model))
// orbit:
mat4.rotateX(model, model, orbitx*count)
mat4.rotateY(model, model, orbity*count)
mat4.translate(model, model, pos)
mat4.identity(view)
mat4.rotateX(view, view, rotx*count)
mat4.rotateY(view, view, roty*count)
opts.model = model
opts.view = view
return draw(opts)
}
model: (_, props, batchId) => {
// we create the model matrix by combining
// translation, scaling and rotation matrices.
var m = mat4.identity([])
mat4.translate(m, m, props.translate)
var s = props.scale
if (typeof s === 'number') {
mat4.scale(m, m, [s, s, s])
} else { // else, we assume an array
mat4.scale(m, m, s)
}
if (typeof props.yRotate !== 'undefined') {
mat4.rotateY(m, m, props.yRotate)
}
return m
},
test('interpolates mat4', function(t){
var start = mat4.create()
var end = mat4.create()
mat4.translate(end, end, [10, -50, 20])
mat4.scale(end, end, [2, 4, 8])
var lerp = Interpolator(start, end)
var out = []
t.equal(typeof lerp, 'function', 'is valid for interpolation')
lerp(out, 1)
t.deepEqual(out, [ 2, 0, 0, 0, 0, 4, 0, 0, 0, 0, 8, 0, 10, -50, 20, 1 ])
lerp(out, 0.5)
t.deepEqual(out, [ 1.5, 0, 0, 0, 0, 2.5, 0, 0, 0, 0, 4.5, 0, 5, -25, 10, 1 ])
var lerp2 = Interpolator(mat4.scale([], mat4.create(), [0,0,0]), end)
t.equal(lerp2, false, 'zero scale is not invertible')
t.end()
})
function bind(dt) {
time += dt / 1000
const width = gl.drawingBufferWidth
const height = gl.drawingBufferHeight
const aspect = width / height
mat4.perspective(projection, Math.PI/4, aspect, 1, 1000)
mat4.identity(model)
mat4.translate(model, model, translation)
mat4.rotateY(model, model, Math.PI/2)
mat4.rotateX(model, model, rotation)
// mat4.rotateZ(model, model, rotation)
rotation += dt * 0.000025
shader.bind()
shader.uniforms.iGlobalTime = time
shader.uniforms.iResolution = resolution
shader.uniforms.iChannel0 = 0
shader.uniforms.projection = projection
shader.uniforms.model = model
shader.uniforms.view = view
}
TextRenderer.prototype.draw = function(camera, feature) {
var gl = this.gl
var object3d = feature.object
var text = feature.text
if (!object3d.visible)
return
this.element.textures[0].bind(0)
this.shader.uniforms.fade = this.fade
this.shader.uniforms.fade = 1
// gl.colorMask(true, true, true, true)
gl.cullFace(gl.FRONT)
mat4.multiply(modelTransform, object3d.matrix.elements, this.scale)
//setup transformation for this element
this.sprites.projection = camera.projectionMatrix.elements
this.sprites.view = camera.matrixWorldInverse.elements
this.sprites.model = modelTransform
this.element.text = text
this.element.clearLayout()
var b = this.element.getBounds(undefined, off)
var pad = [8, 4]
var border = 1
// this.sprites.begin()
// this.sprites.updateMatrices()
// this.sprites.color = BGFILL
// // this.sprites.fillRect(border-pad[0],
// // -b.height+border-pad[1],
// // b.width-border*2+pad[0]+pad[1],
// // b.height-border*2+pad[0]+pad[1])
// this.sprites.color = BORDER
// // this.sprites.strokeRect(-pad[0],
// // -b.height-pad[1],
// // b.width+pad[0]+pad[1],
// // b.height+pad[0]+pad[1],
// // border)
// this.sprites.end()
//avoid z-fighting with SDF text
mat4.translate(modelTransform, modelTransform, [0, 0, 0.1])
this.shader.bind()
this.shader.uniforms.projection = camera.projectionMatrix.elements
this.shader.uniforms.view = camera.matrixWorldInverse.elements
this.shader.uniforms.model = modelTransform
// gl.disable(gl.DEPTH_TEST)
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
WHITE[3] = feature.opacity
this.element.batch.color = WHITE
this.element.draw(this.shader, SDF_PADDING, SDF_PADDING)
}
shell.on("gl-init", function () {
var gl = shell.gl
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);
rocks = [];
/*
The rocks are generated by web workers.
*/
workers = new Array(NUM_WORKERS);
for(var workerI = 0; workerI < NUM_WORKERS; ++workerI) {
workers[workerI] = Work(require('./worker.js'));
workers[workerI].addEventListener('message', function (msg) {
/*
If we have not generated enough rocks, tell worker to generate another one.
*/
if (rocks.length >= (ROCK_W * ROCK_H)) {
workers[msg.data[0]].terminate();
// console.log("done working for worker ", msg.data[0]);
}
var rock = msg.data[1];
rocks.push(rock);
workers[msg.data[0]].postMessage(msg.data[0]);
});
// start worker. We send worker id to worker.
workers[workerI].postMessage(workerI);
}
/*
Create Plane geometry.
*/
planeGeo = createPlane(1, 1);
var model = mat4.create();
mat4.rotateX(model, model, Math.PI / 2);
mat4.translate(model, model, [0, 0.0, 0.9]);
mat4.scale(model, model, [1000, 1000, 1]);
planeGeo.positions = geoTransform(planeGeo.positions, model);
planeGeo = Geometry(gl)
.attr('aPosition', planeGeo.positions)
.attr('aNormal', createNormals.vertexNormals(planeGeo.cells, planeGeo.positions))
.faces(planeGeo.cells);
/*
Load Shaders
*/
rockShader = glShader(gl, glslify("./rock_vert.glsl"), glslify("./rock_frag.glsl"));
planeShader = glShader(gl, glslify("./plane_vert.glsl"), glslify("./plane_frag.glsl"));
});
model: (context, {position}) => mat4.translate([], mat4.identity([]), position)
function addSegment(dir, length, scale, rotation) {
if (typeof rotation == "undefined") {
rotation = [0, 0, 0]; // default
}
if (typeof scale === 'number') {
scale = [scale, scale, scale]; // expand to vector.
}
vec3.scaleAndAdd(q0, p0, dir, length);
vec3.scaleAndAdd(q1, p1, dir, length);
vec3.scaleAndAdd(q2, p2, dir, length);
vec3.scaleAndAdd(q3, p3, dir, length);
/*
Do scaling and rotation
*/
var ps = [q0, q1, q2, q3];
var bb = boundingBox(ps)
// Translate the geometry center to the origin.
var _toOrigin = [
-0.5 * (bb[0][0] + bb[1][0]),
-0.5 * (bb[0][1] + bb[1][1]),
-0.5 * (bb[0][2] + bb[1][2])
]
var toOrigin = mat4.create();
mat4.translate(toOrigin, toOrigin, _toOrigin);
var restore = mat4.create();
mat4.translate(restore, restore, [-_toOrigin[0], -_toOrigin[1], -_toOrigin[2]]);
var scaleMat = mat4.create();
mat4.scale(scaleMat, scaleMat, scale);
var q = quat.create();
quat.rotateX(q, q, rotation[0]);
quat.rotateY(q, q, rotation[1]);
quat.rotateZ(q, q, rotation[2]);
var rotMat = mat4.create();
mat4.fromQuat(rotMat, q);
ps = tform(ps, toOrigin);
ps = tform(ps, scaleMat);
ps = tform(ps, rotMat);
ps = tform(ps, restore);
q0 = vec3.fromValues(ps[0][0], ps[0][1], ps[0][2]);
q1 = vec3.fromValues(ps[1][0], ps[1][1], ps[1][2]);
q2 = vec3.fromValues(ps[2][0], ps[2][1], ps[2][2]);
q3 = vec3.fromValues(ps[3][0], ps[3][1], ps[3][2]);
positions.push([q0[0], q0[1], q0[2]]);
positions.push([q1[0], q1[1], q1[2]]);
positions.push([q2[0], q2[1], q2[2]]);
positions.push([q3[0], q3[1], q3[2]]);
var ip0 = index - 4;
var ip1 = index - 3;
var ip2 = index - 2;
var ip3 = index - 1;
var iq0 = index + 0;
var iq1 = index + 1;
var iq2 = index + 2;
var iq3 = index + 3;
cells.push([iq0, iq1, ip1, ip0]);
cells.push([iq1, iq2, ip2, ip1])
cells.push([iq2, iq3, ip3, ip2]);
cells.push([ip0, ip3, iq3, iq0]);
index += 4;
p0 = q0;
p1 = q1;
p2 = q2;
p3 = q3;
}
button.style.top = '0px';
button.style.left = '0px';
button.textContent = 'toggle mouse (iframe/camera)';
button.addEventListener('click', function() {
shell.canvas.style.pointerEvents = (shell.canvas.style.pointerEvents == 'none' ? '' : 'none');
shell.canvas.parentElement.style.pointerEvents = (shell.canvas.parentElement.style.pointerEvents == 'none' ? '' : 'none');
});
document.body.appendChild(button);
shell.on('gl-resize', function(width, height) {
css3d.updatePerspective(cameraFOVradians, shell.width, shell.height);
});
var bunnyModelMatrix = mat4.create();
mat4.scale(bunnyModelMatrix, bunnyModelMatrix, [1/10, 1/10, 1/10]);
mat4.translate(bunnyModelMatrix, bunnyModelMatrix, [-15, 0, 0]); // slightly overlapping gl-css3d
var bunnyColor = [1, 0, 0]; // solid red, no texture
shell.on('gl-render', function() {
var proj = mat4.perspective(mat4.create(), cameraFOVradians, shell.width/shell.height, 0.1, 1000.0)
var view = camera.view()
css3d.render(view, proj);
// draw another 3D object so the demo is more convincing
bunnyShader.bind();
bunnyShader.uniforms.projection = proj;
bunnyShader.uniforms.view = view;
bunnyShader.uniforms.model = bunnyModelMatrix;
bunnyShader.attributes.position.location = 0
bunnyShader.attributes.color = bunnyColor;
model: function () {
mat4.identity(model)
mat4.scale(model, model, [2/64,2/64,2/64])
mat4.translate(model, model, [-32,-32,-32])
return model
}
let gl = require('../base')(render, {
name: __dirname,
context: 'webgl',
description: `
_touch to animate_
2D lines expanded in a vertex shader
`
})
let time = 0
let projection = mat4.create()
let identity = mat4.create()
let rotation = mat4.create()
let view = mat4.create()
mat4.translate(view, view, [0.5, 0.0, -3])
mat4.scale(rotation, rotation, [0.5, 0.5, 0.5])
mat4.rotateY(rotation, rotation, -0.5)
let line = createLine(gl)
function render(dt) {
time += dt/1000
let width = gl.drawingBufferWidth
let height = gl.drawingBufferHeight
gl.disable(gl.DEPTH_TEST)
gl.disable(gl.CULL_FACE)
gl.enable(gl.BLEND)
line.color = [0.2, 0.2, 0.2]
gl.clear(gl.DEPTH_BUFFER_BIT)
function camera (model) {
return mat4.translate(model, model, [0,0,0])
}