this.textureCoords = this.editPoints.map((ep) => {
let c = ep.position()
let p = vec2.transformMat3([], [scrollLeft + c.left + 6, scrollTop + c.top + 6], mtx)
vec2.scale(p, p, 1 / 512)
p[1] = 1 - p[1]
return p
})
it('A3.3: Curve Derivative Control Points', function () {
// Simple Bezier curve derivative test
var p = 3;
var U = [0, 0, 0, 0, 1, 1, 1, 1];
var P = [
glm.vec2.fromValues(0, 0),
glm.vec2.fromValues(1, 1),
glm.vec2.fromValues(2, 1),
glm.vec2.fromValues(3, 0)
];
var r1 = 0;
var r2 = p;
var d = 1;
var PK = array2d(d + 1, r2 - r1 + 1, glm.vec2.create);
nurbs.getCurveDerivCtrlPoints(p, U, P, d, r1, r2, PK);
var i = 0;
var vec = autoVecSelect(P[0]);
var v = vec.create();
for (i = 0; i < p; ++i) {
vec.sub(v, P[i + 1], P[i]);
vec.scale(v, v, p);
var correct = closeTo(PK[1][i], v);
chai.assert(correct, 'Did not find correct 1st derivative at point ' + i + '.');
}
});
constructor(dimensions = vec2.fromValues(800, 600)) {
this.dimensions = vec2.clone(dimensions);
this.canvas = document.createElement('canvas');
this.canvas.width = this.dimensions[0];
this.canvas.height = this.dimensions[1];
document.body.appendChild(this.canvas);
this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
this.gl.enable(this.gl.BLEND);
this.gl.blendEquation(this.gl.FUNC_ADD);
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
this.projection = mat4.create();
mat4.ortho(this.projection, 0, this.dimensions[0], this.dimensions[1], 0, -1, 1);
this.setViewport(vec4.fromValues(0, 0, this.dimensions[0], this.dimensions[1]));
this.vertexBuffer = null;
this.indexBuffer = null;
this.shader = null;
this.enabledVertexAttributeArrays = {};
this.uniformValues = new Map();
}
loop(currentTime = Date.now()) {
requestAnimationFrame(() => this.loop());
let deltaTime = currentTime - this.lastTime;
this.mouseInput.update();
this.entities.forEach(entity => entity.update(deltaTime));
this.renderer.clear();
this.postProcessor.begin();
this.entities.forEach(entity => entity.draw());
this.postProcessor.end();
this.shakeShader.redDisplacementValue = vec2.fromValues(-0.005 + Math.random() * 0.01, -0.005 + Math.random() * 0.01);
this.shakeShader.greenDisplacementValue = vec2.fromValues(-0.005 + Math.random() * 0.01, -0.005 + Math.random() * 0.01);
this.shakeShader.blueDisplacementValue = vec2.fromValues(-0.005 + Math.random() * 0.01, -0.005 + Math.random() * 0.01);
this.postProcessor.draw(this.shakeShader);
this.lastTime = currentTime;
}
Transform.prototype.reset = function(){
glMatrix.vec2.set(this.position, 0, 0);
this.setRotation(0);
glMatrix.vec2.set(this.scale, 1, 1);
this.updateSprite();
return this;
};
Object.keys(markers).forEach( function(v) {
var el = document.getElementById(v);
if (!el) {
el = document.createElement('div');
var t = document.createTextNode(v);
el.appendChild(t);
document.body.appendChild(el);
el.id = v;
el.classList.add('marker');
el.onmousedown = function(event) {
currentlyDragging = event.target.id;
};
el.onmouseup = function(event) {
currentlyDragging = undefined;
};
}
var point = vec2.clone( markers[v] );
vec2.transformMat3( point, point, inversePanzoom );
vec2.transformMat3( point, point, inverseViewport );
el.style.bottom = (height - point[1].toString()) + 'px';
el.style.left = (point[0].toString() - 10) + 'px';
});
/** Compute rotation values (by updating the quaternion) */
rotate(mouseX, mouseY) {
var axisRot = _TMP_VEC3;
var diff = _TMP_VEC2;
var normalizedMouseXY = Geometry.normalizedMouse(mouseX, mouseY, this._width, this._height);
if (this._mode === Enums.CameraMode.ORBIT) {
vec2.sub(diff, normalizedMouseXY, this._lastNormalizedMouseXY);
this.setOrbit(this._rotX - diff[1] * 2, this._rotY + diff[0] * 2);
this.rotateDelay([-diff[1] * 6, diff[0] * 6], DELAY_ROTATE);
} else if (this._mode === Enums.CameraMode.PLANE) {
var length = vec2.dist(this._lastNormalizedMouseXY, normalizedMouseXY);
vec2.sub(diff, normalizedMouseXY, this._lastNormalizedMouseXY);
vec3.normalize(axisRot, vec3.set(axisRot, -diff[1], diff[0], 0.0));
quat.mul(this._quatRot, quat.setAxisAngle(_TMP_QUAT, axisRot, length * 2.0), this._quatRot);
this.rotateDelay([axisRot[0], axisRot[1], axisRot[2], length * 6], DELAY_ROTATE);
} else if (this._mode === Enums.CameraMode.SPHERICAL) {
var mouseOnSphereBefore = Geometry.mouseOnUnitSphere(this._lastNormalizedMouseXY);
var mouseOnSphereAfter = Geometry.mouseOnUnitSphere(normalizedMouseXY);
var angle = Math.acos(Math.min(1.0, vec3.dot(mouseOnSphereBefore, mouseOnSphereAfter)));
vec3.normalize(axisRot, vec3.cross(axisRot, mouseOnSphereBefore, mouseOnSphereAfter));
quat.mul(this._quatRot, quat.setAxisAngle(_TMP_QUAT, axisRot, angle * 2.0), this._quatRot);
this.rotateDelay([axisRot[0], axisRot[1], axisRot[2], angle * 6], DELAY_ROTATE);
}
this._lastNormalizedMouseXY = normalizedMouseXY;
this.updateView();
}
[TRANSFORM_PARAMS.SCALE]: percent => {
const minPercent = 0.1;
const dotRadius = 8;
const lineSpace = dotRadius + 3;
const lowerDot = vec2.fromValues(dotRadius, 100 - dotRadius * 2);
const upperDot = vec2.fromValues(100 - dotRadius * 2, dotRadius);
const lineStart = vec2.add(
vec2.create(),
lowerDot,
vec2.fromValues(lineSpace, -lineSpace),
);
const lineEnd = vec2.add(
vec2.create(),
upperDot,
vec2.fromValues(-lineSpace, lineSpace),
);
const realLineEnd = vec2.lerp(
vec2.create(),
lineStart,
lineEnd,
Math.max(percent, minPercent),
);
const polygonPoints = [[-16, 0], [3, -3], [0, 16]]
.map(([x, y]) => `${x + realLineEnd[0]},${y + realLineEnd[1]}`)
.join(' ');
return (
<svg viewBox="0 0 100 100" className="transform-controls__icon">
<circle cx={lowerDot[0]} cy={lowerDot[1]} r={dotRadius} />
<line
className="transform-controls__icon-line transform-controls__icon-line--light"
x1={lineStart[0]}
y1={lineStart[1]}
x2={lineEnd[0]}
y2={lineEnd[1]}
strokeWidth="5"
/>
<line
className="transform-controls__icon-line"
x1={lineStart[0]}
y1={lineStart[1]}
x2={realLineEnd[0]}
y2={realLineEnd[1]}
strokeWidth="5"
/>
<polygon points={polygonPoints} />
<circle cx={upperDot[0]} cy={upperDot[1]} r={dotRadius} />
</svg>
);
},
getBoundsFor(vertices, indices) {
let min = [Number.MAX_VALUE, Number.MAX_VALUE]
let max = [Number.MIN_VALUE, Number.MIN_VALUE]
indices.forEach((index) => {
vec2.min(min, min, vertices[index])
vec2.max(max, max, vertices[index])
})
return {min, max, size: vec2.sub([], max, min), center: vec2.lerp([], min, max, 0.5)}
}
/**
* Get the map center that place a given [lng, lat] coordinate at screen
* point [x, y]
*
* @param {Array} lngLat - [lng,lat] coordinates
* Specifies a point on the sphere.
* @param {Array} pos - [x,y] coordinates
* Specifies a point on the screen.
* @return {Array} [lng,lat] new map center.
*/
getLocationAtPoint({lngLat, pos}) {
const fromLocation = this.projectFlat(this.unproject(pos));
const toLocation = this.projectFlat(lngLat);
const center = this.projectFlat([this.longitude, this.latitude]);
const translate = vec2.sub([], toLocation, fromLocation);
const newCenter = vec2.add([], center, translate);
return this.unprojectFlat(newCenter);
}
function getBoundingBoxes() {
if (_config.locate) {
return BarcodeLocator.locate();
} else {
return [[
vec2.clone(_boxSize[0]),
vec2.clone(_boxSize[1]),
vec2.clone(_boxSize[2]),
vec2.clone(_boxSize[3])]];
}
}
finalizeBezier(point3rd) {
/**
* Smooth the join between beziers by modifying the last point of the current bezier
* to equal the average of the points either side of it.
*/
const point2nd = this.points[2].point;
const pointAvg = this.points[3].point;
vec2.scale(pointAvg, vec2.add(pointAvg, point2nd, point3rd), 0.5);
this.points[3].weight = SignatureBezierProvider.signatureWeightForLine(point2nd, pointAvg);
this.generateBezierPath(3, true);
}
let points = OUTLINE_INDICES.map((i) => {
let p = vec2.clone(this.webcam.rawFeaturePoints[i])
if (HEAD_INDICES.indexOf(i) >= 0) {
vec2.sub(p, p, headCenter)
vec2.normalize(p, p)
p[0] *= headRadius
p[1] *= headRadius2
// vec2.scale(p, p, headRadius)
vec2.add(p, p, headCenter)
}
return p
})
handleChange(pos, e) {
let vec = Vec2.create();
if (this.props.value) Vec2.copy(vec, this.props.value);
vec[pos] = parseFloat(e.target.value);
if (this.props.onChange) {
this.props.onChange({
target: {
value: vec
}
});
}
}
this.featurePoint3D.forEach((p, i) => {
let z = this.standardFaceData.getFeatureVertex(i)[2] * scale
if (isNaN(z)) {
return
}
let perspective = (cameraZ - z) / cameraZ
p[0] *= perspective
p[1] *= perspective
p[2] = z
vec2.min(min, min, p)
vec2.max(max, max, p)
})
function Transform(position, rotation, scale){
this.position = glMatrix.vec2.create();
this.rotation = 0;
this.rotationVector = glMatrix.vec2.create();
this.scale = glMatrix.vec2.fromValues(1,1);
this.reset();
if(position)
this.chainTranslate(position);
if(rotation)
this.chainRotate(rotation);
if(scale)
this.chainScale(scale);
}
updateFaceHole() {
if (!this.drawFaceHole || !this.rawFeaturePoints) {
return
}
this.face.geometry.init(this.rawFeaturePoints, 320, 180, this.scale.y, this.camera.position.z)
this.face.matrix.copy(this.matrixFeaturePoints)
if (this.isOutro) {
this.face.matrix.multiplyMatrices(ROT_Z_90, this.face.matrix)
}
let min = [Number.MAX_VALUE, Number.MAX_VALUE]
let max = [Number.MIN_VALUE, Number.MIN_VALUE]
this.rawFeaturePoints.forEach((p) => {
vec2.min(min, min, p)
vec2.max(max, max, p)
})
let center = vec2.lerp([], min, max, 0.5)
let size = Math.max.apply(null, vec2.sub([], max, min)) / 2
vec2.sub(min, center, [size, size])
vec2.add(max, center, [size, size])
this.faceSpaceMaterial.min.set(min[0], 180 - min[1])
this.faceSpaceMaterial.max.set(max[0], 180 - max[1])
let autoClear = this.renderer.autoClear
this.renderer.autoClear = false
this.webcamPlane.visible = true
this.face.visible = true
this.face.material = this.faceEdgeMaterial
this.faceEdgeMaterial.scale = 0.99
this.faceEdgeMaterial.brightness = 1
this.renderer.render(this.scene, this.camera, this.texture, true)
this.webcamPlane.visible = false
for (let i = 0; i < 8; i++) {
this.faceEdgeMaterial.scale = 0.99 - i * 0.004
this.faceEdgeMaterial.brightness = 0.8 - i * 0.05
this.renderer.clearTarget(this.texture, false, true, true)
this.renderer.render(this.scene, this.camera, this.texture)
}
this.face.material = this.faceSpaceMaterial
this.faceSpaceMaterial.update()
this.faceSpaceMaterial.scale = 0.99 - 8 * 0.004
this.renderer.clearTarget(this.texture, false, true, true)
this.renderer.render(this.scene, this.camera, this.texture)
this.renderer.autoClear = autoClear
}
/**
* Construct a resonator link mesh
* @param {context} gl WebGL context
* @param {vec2} portalPosition X,Z of the portal
* @param {Number} slot Resonator slot (0-7)
* @param {Number} distance Distance from the portal
* @param {vec4} color Color of the resonator link
* @param {Number} resonatorPercent Percent health of the resonator
*/
constructor(gl, portalPosition, slot, distance, color, resonatorPercent) {
var theta = slot / 8 * 2 * Math.PI;
var end = vec2.create();
var relative = vec2.fromValues(distance * Math.cos(theta), distance * Math.sin(theta));
vec2.add(end, portalPosition, relative);
var buf = _generateLinkAttributes(portalPosition, end, color, resonatorPercent);
var ind = _generateFaces(0);
var attributes = [];
attributes.push(new VertexAttribute('a_position', 4));
attributes.push(new VertexAttribute('a_texCoord0', 4));
attributes.push(new VertexAttribute('a_color', 4));
var attribute = new GLAttribute(gl, attributes, buf, gl.DYNAMIC_DRAW);
var faces = new GLIndex(gl, ind, gl.TRIANGLES);
super(gl, attribute, faces);
}
document.querySelector("#glCanvas").addEventListener("mousemove", function(e) {
var point = vec2.clone( [e.clientX, e.clientY] );
vec2.transformMat3( point, point, viewportMatrix );
var inverse = mat3.clone(panzoomMatrix);
vec2.transformMat3( point, point, inverse );
if (currentlyDragging) {
markers[currentlyDragging] = point;
gl.uniform2fv(shaderProgram.variables[currentlyDragging], point);
} else {
gl.uniform2fv(shaderProgram.variables["w"], point);
}
window.requestAnimationFrame(drawScene);
});
create: function() {
var pathObj = SceneObject.create();
pathObj.stroke = '#000000';
pathObj.strokeWidth = 1;
pathObj.strokeOpacity = 1.0;
pathObj.closed = false;
pathObj.fill = 'none';
pathObj.fillOpacity = 1.0;
pathObj.origin = glm.vec2.create();
pathObj.segments = [];
pathObj.data = {};
pathObj.toSVG = function() {
let attribString = '<path d="';
pathObj.segments.forEach(function(segment) {
attribString += segment.toSVG();
});
attribString += `" stroke = "${pathObj.stroke}" ` +
`stroke-width="${pathObj.strokeWidth}" ` +
`stroke-opacity="${pathObj.strokeOpacity}"`;
if (pathObj.closed) {
attribString += ` fill-opacity="${pathObj.fillOpacity}" ` +
`fill="${pathObj.fill}"`;
}
attribString += '/>';
return attribString;
};
pathObj.drawOnCanvas = function(ctx) {
pathObj.segments.forEach(function(segment) {
segment.drawOnCanvas(ctx);
});
};
return pathObj;
}
value: function unproject(xyz) {
var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref3$topLeft = _ref3.topLeft,
topLeft = _ref3$topLeft === undefined ? false : _ref3$topLeft;
var _xyz2 = _slicedToArray(xyz, 3),
x = _xyz2[0],
y = _xyz2[1],
_xyz2$ = _xyz2[2],
targetZ = _xyz2$ === undefined ? 0 : _xyz2$;
var y2 = topLeft ? this.height - y : y;
// since we don't know the correct projected z value for the point,
// unproject two points to get a line and then find the point on that line with z=0
var coord0 = this.transformVector(this.pixelUnprojectionMatrix, [x, y2, 0, 1]);
var coord1 = this.transformVector(this.pixelUnprojectionMatrix, [x, y2, 1, 1]);
var z0 = coord0[2];
var z1 = coord1[2];
var t = z0 === z1 ? 0 : (targetZ - z0) / (z1 - z0);
var v = vec2.lerp([], coord0, coord1, t);
// console.error(`unprojecting to non-linear ${v}<=${[x, y2, targetZ]}`);
var vUnprojected = this.unprojectFlat(v);
return xyz.length === 2 ? vUnprojected : [vUnprojected[0], vUnprojected[1], 0];
}
panzoom(document.querySelector("#glCanvas"), e => {
var center = vec2.clone( [e.x, e.y] );
vec2.transformMat3( center, center, viewportMatrix );
vec2.scale( center, center, -1 );
mat3.translate( panzoomMatrix, panzoomMatrix, center );
var scale = Math.exp(e.dz / 100.0);
mat3.scale( panzoomMatrix, panzoomMatrix, [scale,scale] );
vec2.scale( center, center, -1 );
mat3.translate( panzoomMatrix, panzoomMatrix, center );
mat3.translate( panzoomMatrix, panzoomMatrix, [-e.dx/viewportScale, e.dy/viewportScale] );
window.requestAnimationFrame(drawScene);
});
getRelativeMatrix() {
let mat = mat2d.create();
let absAnchorX = this._anchorX * this._width;
let absAnchorY = this._anchorY * this._height;
mat2d.translate(mat, mat, vec2.fromValues(this._x, this._y));
mat2d.translate(mat, mat, vec2.fromValues(absAnchorX, absAnchorY));
mat2d.rotate(mat, mat, this._rot);
mat2d.scale(mat, mat, vec2.fromValues(this._scaleX, this._scaleY));
mat2d.translate(mat, mat,
vec2.fromValues(-absAnchorX, -absAnchorY));
return mat;
}
getBounds() {
let scrollLeft = this.editArea.scrollLeft()
let scrollTop = this.editArea.scrollTop()
// console.log({scrollLeft, scrollTop})
let min = [Number.MAX_VALUE, Number.MAX_VALUE]
let max = [Number.MIN_VALUE, Number.MIN_VALUE]
this.editPoints.forEach((p) => {
let c = p.position()
c = [scrollLeft + c.left + 6, scrollTop + c.top + 6]
vec2.min(min, min, c)
vec2.max(max, max, c)
})
let size = vec2.sub([], max, min)
let center = vec2.lerp([], min, max, 0.5)
// console.log(min, max, size, center)
return {size, center}
}
/**
* @param {MdxModel} model
* @param {MdxParserEventObjectEmitter} eventObject
* @param {number} index
*/
constructor(model, eventObject, index) {
super(model, eventObject, index);
let viewer = model.viewer;
let name = eventObject.name;
let type = name.substring(0, 3);
let id = name.substring(4);
// Same thing
if (type === 'FPT') {
type = 'SPL';
}
this.ok = false;
this.type = type;
this.id = id;
this.internalResource = null;
// For SND
this.decodedBuffers = [];
this.tracks = eventObject.tracks;
this.ok = false;
this.globalSequence = null;
this.defval = vec2.create();
let globalSequenceId = eventObject.globalSequenceId;
if (globalSequenceId !== -1) {
this.globalSequence = model.globalSequences[globalSequenceId];
}
let tables = [];
let pathSolver = model.pathSolver;
if (type === 'SPN') {
tables[0] = viewer.loadGeneric(pathSolver('Splats\\SpawnData.slk')[0], 'text', mappedDataCallback);
} else if (type === 'SPL') {
tables[0] = viewer.loadGeneric(pathSolver('Splats\\SplatData.slk')[0], 'text', mappedDataCallback);
} else if (type === 'UBR') {
tables[0] = viewer.loadGeneric(pathSolver('Splats\\UberSplatData.slk')[0], 'text', mappedDataCallback);
} else if (type === 'SND') {
tables[0] = viewer.loadGeneric(pathSolver('UI\\SoundInfo\\AnimLookups.slk')[0], 'text', mappedDataCallback);
tables[1] = viewer.loadGeneric(pathSolver('UI\\SoundInfo\\AnimSounds.slk')[0], 'text', mappedDataCallback);
} else {
// Units\Critters\BlackStagMale\BlackStagMale.mdx has an event object named "Point01".
return;
}
let promise = viewer.promise();
viewer.whenLoaded(tables)
.then((tables) => {
this.load(tables);
promise.resolve();
});
}
App.prototype.getCanvasPosition = function() {
var position = vec2.create();
var object = this.canvas;
do {
vec2[0] += object.offsetLeft;
vec2[1] += object.offsetTop;
} while (object = object.offsetParent);
return position;
};
export function torus(p, t) {
let lengthPxz;
const q = vec2.create();
return ((p_, t_) => {
lengthPxz = vec2.length([p_[0], p_[2]]);
vec2.set(q, lengthPxz - t_[0], p_[1]);
return vec2.length(q) - t_[1];
})(p, t);
}
/**
* Calculate distance scales in meters around current lat/lon, both for
* degrees and pixels.
* In mercator projection mode, the distance scales vary significantly
* with latitude.
*/
function calculateDistanceScales({latitude, longitude, scale}) {
assert(!isNaN(latitude) && !isNaN(longitude) && !isNaN(scale), ERR_ARGUMENT);
// Approximately 111km per degree at equator
const METERS_PER_DEGREE = 111000;
const latCosine = Math.cos(latitude * Math.PI / 180);
const metersPerDegree = METERS_PER_DEGREE * latCosine;
// Calculate number of pixels occupied by one degree longitude
// around current lat/lon
const pixelsPerDegreeX = vec2.distance(
projectFlat([longitude + 0.5, latitude], scale),
projectFlat([longitude - 0.5, latitude], scale)
);
// Calculate number of pixels occupied by one degree latitude
// around current lat/lon
const pixelsPerDegreeY = vec2.distance(
projectFlat([longitude, latitude + 0.5], scale),
projectFlat([longitude, latitude - 0.5], scale)
);
const pixelsPerMeterX = pixelsPerDegreeX / metersPerDegree;
const pixelsPerMeterY = pixelsPerDegreeY / metersPerDegree;
const pixelsPerMeterZ = (pixelsPerMeterX + pixelsPerMeterY) / 2;
// const pixelsPerMeter = [pixelsPerMeterX, pixelsPerMeterY, pixelsPerMeterZ];
const worldSize = TILE_SIZE * scale;
const altPixelsPerMeter = worldSize / (4e7 * latCosine);
const pixelsPerMeter = [altPixelsPerMeter, altPixelsPerMeter, altPixelsPerMeter];
const metersPerPixel = [1 / altPixelsPerMeter, 1 / altPixelsPerMeter, 1 / pixelsPerMeterZ];
const pixelsPerDegree = [pixelsPerDegreeX, pixelsPerDegreeY, pixelsPerMeterZ];
const degreesPerPixel = [1 / pixelsPerDegreeX, 1 / pixelsPerDegreeY, 1 / pixelsPerMeterZ];
// Main results, used for converting meters to latlng deltas and scaling offsets
return {
pixelsPerMeter,
metersPerPixel,
pixelsPerDegree,
degreesPerPixel
};
}
vars.forEach( function(v) {
if (v == 'i') return;
if (v == 'e') return;
if (v == 'w') return;
if (v == 'z') return;
if (!(v in markers)) {
markers[v] = vec2.clone( [0.3*Math.random() - 0.15, 0.3*Math.random() - 0.15] );
}
});
image.onload = function(evt) {
self._inputTexture = new Texture({
context: self._context,
size: vec2.fromValues(this.width, this.height),
format: 'rgba',
precision: 'byte',
image: self._image
});
self._ready = true;
self._emitter.emit('load');
}