createPlacementMatrix (pos, f, scale, rotationMatrix){
var placementMatrix = mat4.create();
mat4.identity(placementMatrix);
mat4.translate(placementMatrix, placementMatrix, pos);
if (rotationMatrix) {
mat4.multiply(placementMatrix,placementMatrix, rotationMatrix);
} else {
mat4.rotateZ(placementMatrix, placementMatrix, f);
}
mat4.scale(placementMatrix, placementMatrix, [scale , scale , scale ]);
var placementInvertMatrix = mat4.create();
mat4.invert(placementInvertMatrix, placementMatrix);
this.placementInvertMatrix = placementInvertMatrix;
this.placementMatrix = placementMatrix;
//update aabb
var bb = super.getBoundingBox();
if (bb) {
var a_ab = vec4.fromValues(bb.ab.x,bb.ab.y,bb.ab.z,1);
var a_cd = vec4.fromValues(bb.cd.x,bb.cd.y,bb.cd.z,1);
var worldAABB = mathHelper.transformAABBWithMat4(this.placementMatrix, [a_ab, a_cd]);
this.diameter = vec3.distance(worldAABB[0],worldAABB[1]);
this.aabb = worldAABB;
}
}
checkAgainstDepthBuffer(frustumMatrix, lookAtMat4, placementMatrix, checkDepth) {
var bb = this.getBoundingBox();
if (!bb) return false;
var combinedMat4 = mat4.create();
mat4.multiply(combinedMat4, frustumMatrix, lookAtMat4);
mat4.multiply(combinedMat4, combinedMat4, placementMatrix);
var bb1 = bb.ab,
bb2 = bb.cd;
var bb1vec = vec4.fromValues(bb1.x, bb1.y, bb1.z, 1);
var bb2vec = vec4.fromValues(bb2.x, bb2.y, bb2.z, 1);
vec4.transformMat4(bb1vec, bb1vec, combinedMat4);
vec4.transformMat4(bb2vec, bb2vec, combinedMat4);
//Perspective divide
vec4.scale(bb1vec, bb1vec, 1/bb1vec[3]);
vec4.scale(bb2vec, bb2vec, 1/bb2vec[3]);
var depth = Math.max(0, Math.min(bb1vec[2], bb2vec[2]));
var min_x = Math.min(bb1vec[0], bb2vec[0]); min_x = Math.max(min_x, -1.0);
var max_x = Math.max(bb1vec[0], bb2vec[0]); max_x = Math.min(max_x, 1.0);
var min_y = Math.min(bb1vec[1], bb2vec[1]); min_y = Math.max(min_y, -1.0);
var max_y = Math.max(bb1vec[1], bb2vec[1]); max_y = Math.min(max_y, 1.0);
return checkDepth(min_x, max_x, min_y, max_y, depth);
}
updateAABB (){
var bb = super.getBoundingBox();
if (bb) {
var a_ab = vec4.fromValues(bb.ab.x,bb.ab.y,bb.ab.z,1);
var a_cd = vec4.fromValues(bb.cd.x,bb.cd.y,bb.cd.z,1);
var worldAABB = mathHelper.transformAABBWithMat4(this.placementMatrix, [a_ab, a_cd]);
this.diameter = vec3.distance(worldAABB[0], worldAABB[1]);
this.aabb = worldAABB;
}
}
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();
}
update (deltaTime, cameraPos) {
if (!this.aabb) {
var bb = super.getBoundingBox();
if (bb) {
var a_ab = vec4.fromValues(bb.ab.x,bb.ab.y,bb.ab.z,1);
var a_cd = vec4.fromValues(bb.cd.x,bb.cd.y,bb.cd.z,1);
var worldAABB = mathHelper.transformAABBWithMat4(this.placementMatrix, [a_ab, a_cd]);
this.diameter = vec3.distance(worldAABB[0],worldAABB[1]);
this.aabb = worldAABB;
}
}
if (!this.getIsRendered()) return;
super.update(deltaTime, cameraPos, this.placementInvertMatrix);
}
project(lngLatZ) {
const [x, y] = this.projectZoom0(lngLatZ);
const v = vec4.fromValues(x, y, lngLatZ[2] || 0, 1);
vec4.transformMat4(v, v, this.viewMatrix);
vec4.transformMat4(v, v, this.projectionMatrix);
// vec4.transformMat4(v, v, this.viewportMatrix);
}
createPlacementMatrixFromParent (parentM2, attachment, scale){
var parentM2File = parentM2.m2Geom.m2File;
var attIndex = parentM2File.attachLookups[attachment];
var attachInfo = parentM2File.attachments[attIndex];
var boneId = attachInfo.bone;
var parentBoneTransMat = parentM2.bones[boneId].tranformMat;
var placementMatrix = mat4.create();
mat4.identity(placementMatrix);
mat4.multiply(placementMatrix,placementMatrix, parentM2.placementMatrix);
mat4.multiply(placementMatrix, placementMatrix, parentBoneTransMat);
mat4.translate(placementMatrix, placementMatrix, [
attachInfo.pos.x,
attachInfo.pos.y,
attachInfo.pos.z,
0
]);
var placementInvertMatrix = mat4.create();
mat4.invert(placementInvertMatrix, placementMatrix);
this.placementInvertMatrix = placementInvertMatrix;
this.placementMatrix = placementMatrix;
var bb = super.getBoundingBox();
if (bb) {
var a_ab = vec4.fromValues(bb.ab.x,bb.ab.y,bb.ab.z,1);
var a_cd = vec4.fromValues(bb.cd.x,bb.cd.y,bb.cd.z,1);
var worldAABB = mathHelper.transformAABBWithMat4(this.placementMatrix, [a_ab, a_cd]);
this.diameter = vec3.distance(worldAABB[0],worldAABB[1]);
this.aabb = worldAABB;
}
}
update(context, parent) {
super.update(context, parent);
if (this.hasChanged) {
// The line should point the ground...
let center = vec3.create();
vec3.transformMat4(center, center, this.globalMatrix);
let point = vec3.create();
vec3.copy(point, center);
point[1] = 0;
// Scale the line to match the size
this.guideLine.transform.scale[0] = center[1];
// Here comes the hard part... setting rotation.
let hand = vec4.fromValues(0, -1, 0, 0);
let inv = mat4.create();
mat4.invert(inv, this.globalMatrix);
vec4.transformMat4(hand, hand, inv);
vec4.normalize(hand, hand);
quat.rotationTo(this.guideLine.transform.rotation, [1, 0, 0], hand);
this.guideLine.transform.invalidate();
}
}
calcOwnPosition () {
var position = vec4.fromValues(0,0,0,1);
vec4.transformMat4(position, position, this.placementMatrix);
this.position = position;
}
export default function mousePick(renderer) {
const gl = renderer.gl;
// Generate box data we need
// We're literally spamming drawing calls - but it doesn't matter because
// that's not in the scope of this example.
let meshList = [];
for (let i = 0; i < 100; ++i) {
let transform = new MeshTransform();
transform.translate([
Math.random() * 30 - 15,
Math.random() * 30 - 15,
Math.random() * 30 - 15
]);
meshList.push({
transform: transform,
color: packColor(i)
});
}
let box = renderer.geometries.create(calcNormals(boxGeom()));
let texture = renderer.textures.create(require('../texture/2.png'));
let borderShader = renderer.shaders.create(
require('../shader/minimalBias.vert'),
require('../shader/monoColor.frag')
);
let pickShader = renderer.shaders.create(
require('../shader/minimal.vert'),
require('../shader/monoColor.frag')
);
let shader = renderer.shaders.create(
require('../shader/phong.vert'),
require('../shader/phong.frag')
);
let pickTexture = renderer.textures.create(null, {
format: gl.RGBA
});
let pickFramebuffer = renderer.framebuffers.create({
color: pickTexture,
depth: gl.DEPTH_COMPONENT16 // Automatically use renderbuffer
});
let align = true;
let alignColor = '#ff0000';
let alignDir = [1, 0, 0];
let alignGeom = renderer.geometries.create({
attributes: {
aPosition: [[-1, 0, 0], [1, 0, 0]]
},
mode: gl.LINES
});
let selectedId = 0;
let contextCache;
let mouseDown = false;
let mousePosX = 0;
let mousePosY = 0;
let relativeOffset = vec2.create();
return {
update(delta, context) {
contextCache = context;
renderer.render({
options: {
clearColor: new Float32Array([0, 0, 0, 1]),
clearDepth: 1,
cull: gl.BACK,
depth: gl.LEQUAL
},
uniforms: Object.assign({}, context.camera, {
uPointLight: [],
uDirectionalLight: {
direction: [0, 0.7 / 1.22, 1 / 1.22],
color: '#aaaaaa',
intensity: [0.3, 1.0, 1.0]
}
}),
passes: [meshList.map((data, id) => ({
shader: shader,
geometry: box,
uniforms: {
uMaterial: {
ambient: '#ffffff',
diffuse: '#ffffff',
specular: '#555555',
shininess: 30
},
uDiffuseMap: texture,
uModel: data.transform.get,
uNormal: data.transform.getNormal
},
passes: id === selectedId ? [{
options: {
// depthMask: true,
cull: gl.FRONT
},
uniforms: {
uBias: [0.1, 0],
uColor: '#ffffff'
},
shader: borderShader
}, {}] : [{}]
})), align && meshList[selectedId] != null && {
shader: pickShader,
geometry: alignGeom,
uniforms: {
uColor: alignColor,
uModel: [
alignDir[0] * 1000, alignDir[1] * 1000, alignDir[2] * 1000, 0,
0, 0, 0, 0,
0, 0, 0, 0,
meshList[selectedId].transform.position[0],
meshList[selectedId].transform.position[1],
meshList[selectedId].transform.position[2],
1
]
}
}]
});
},
mousedown(e, ndc) {
if (e.button !== 0) return;
// Render mouse pick data
renderer.render({
options: {
clearColor: new Float32Array([1, 1, 1, 1]),
clearDepth: 1,
cull: gl.BACK,
depth: gl.LEQUAL
},
uniforms: contextCache.camera,
passes: meshList.map(data => ({
shader: pickShader,
geometry: box,
uniforms: {
uColor: data.color,
uModel: data.transform.get,
uNormal: data.transform.getNormal
}
})),
framebuffer: pickFramebuffer
});
// Get mouse pixel
let pixel = new Uint8Array(4);
pickFramebuffer.readPixelsRGBA(e.clientX,
gl.drawingBufferHeight - e.clientY, 1, 1, pixel);
selectedId = unpackColor(pixel);
mousePosX = ndc[0];
mousePosY = ndc[1];
mouseDown = true;
if (meshList[selectedId] == null) return;
if (align) {
// We're aligning to axis - Get relative offset from origin to clicked
// point
let transform = meshList[selectedId].transform;
// Project current model position to projection space
// (to get Z value)
let perspPos = vec4.fromValues(0, 0, 0, 1);
vec4.transformMat4(perspPos, perspPos, transform.get());
vec4.transformMat4(perspPos, perspPos, contextCache.cameraObj.getPV());
vec4.scale(perspPos, perspPos, 1 / perspPos[3]);
// Last, store relative offset for future use
vec2.subtract(relativeOffset, ndc, perspPos);
}
},
keydown(e) {
if (e.keyCode === 67) {
align = false;
} else if (e.keyCode === 88) {
align = true;
alignColor = '#ff0000';
alignDir = [1, 0, 0];
} else if (e.keyCode === 89) {
align = true;
alignColor = '#00ff00';
alignDir = [0, 1, 0];
} else if (e.keyCode === 90) {
align = true;
alignColor = '#0000ff';
alignDir = [0, 0, 1];
}
},
mouseup() {
mouseDown = false;
},
mousemove(e, ndc) {
if (!mouseDown) return;
let deltaX = ndc[0] - mousePosX;
let deltaY = ndc[1] - mousePosY;
mousePosX = ndc[0];
mousePosY = ndc[1];
if (meshList[selectedId] == null) return;
if (!align) {
// Freestyle translation
let transform = meshList[selectedId].transform;
// Project current model position to projection space
let perspPos = vec4.fromValues(0, 0, 0, 1);
vec4.transformMat4(perspPos, perspPos, transform.get());
vec4.transformMat4(perspPos, perspPos, contextCache.cameraObj.getPV());
// Then move using delta value
perspPos[0] += deltaX * perspPos[3];
perspPos[1] += deltaY * perspPos[3];
// Inverse-project to world space
vec4.transformMat4(perspPos, perspPos, contextCache.cameraObj.
getInverseProjection());
vec4.transformMat4(perspPos, perspPos, contextCache.cameraObj.
transform.get());
// Last, write the pos to transform
vec3.copy(transform.position, perspPos);
transform.invalidate();
} else {
// How much should it move in viewport space in order to move (1, 0, 0)?
let transform = meshList[selectedId].transform;
// Project current model position to projection space
let perspPos = vec4.fromValues(0, 0, 0, 1);
vec4.transformMat4(perspPos, perspPos, transform.get());
let addedPos = vec4.create();
addedPos[3] = 1;
vec3.add(addedPos, perspPos, alignDir);
vec4.transformMat4(perspPos, perspPos, contextCache.cameraObj.getPV());
vec4.transformMat4(addedPos, addedPos, contextCache.cameraObj.getPV());
let centerPos = vec2.create();
vec2.copy(centerPos, perspPos);
vec2.scale(centerPos, centerPos, 1 / perspPos[3]);
let dirPos = vec2.create();
vec2.copy(dirPos, addedPos);
vec2.scale(dirPos, dirPos, 1 / addedPos[3]);
vec2.subtract(dirPos, dirPos, centerPos);
let dirNorm = vec2.create();
vec2.normalize(dirNorm, dirPos);
// Now we've got everything, calculated required transform length
// and translate to it
let projected = vec2.create();
vec2.subtract(projected, ndc, centerPos);
vec2.subtract(projected, projected, relativeOffset);
let dist = vec2.dot(projected, dirNorm);
let transSize = dist / vec2.length(dirPos);
let translation = vec3.create();
vec3.copy(translation, alignDir);
vec3.scale(translation, translation, transSize);
vec3.add(transform.position, transform.position, translation);
transform.invalidate();
}
}
};
}
render(sceneData, context, width, height) {
const gl = context;
const cam = sceneData.get('cam');
const camPos = cam.get("pos");
const camTarget = cam.get("target");
const pipe = sceneData.get('p1')
// console.log(pipe);
geomGen['pipe'](pipe);
this.setup(gl);
if (this.width !== width || this.height !== height) {
this.resize(gl, width, height);
}
this.clearCanvas(gl);
this.shader.use(gl);
this.fbo.activate(gl, this.ext, this.shader);
this.clearCanvas(gl);
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45, this.viewPortWidth / this.viewPortHeight, this.nearPlane, this.farPlane);
const viewMatrix = mat4.create();
mat4.lookAt(
viewMatrix,
vec3.fromValues(camPos.get('x'), camPos.get('y'), camPos.get('z')),
vec3.fromValues(camTarget.get('x'), camTarget.get('y'), camTarget.get('z')),
vec3.fromValues(0, 1, 0));
const normalMatrix = mat4.create();
mat4.transpose(normalMatrix, viewMatrix);
mat4.invert(normalMatrix, normalMatrix);
this.shader.updateUniform(gl, "projectionMatrix", projectionMatrix);
this.shader.updateUniform(gl, "modelViewMatrix", viewMatrix);
this.shader.updateUniform(gl, "normalMatrix", normalMatrix);
this.shader.updateUniform(gl, "material", vec4.fromValues(0.5, 0.3, 0, 1));
this.monkeyMesh.render(gl, this.shader);
// this.pipeMesh.render(gl, this.shader);
this.fbo.deactivate(gl);
this.outputFBO.activate(gl, this.ext, this.lightingShader);
// gl.viewport(0, 0, width * 0.5, height /2);
this.renderLighting(gl);
const canRead = (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE);
const pixels = new Uint8Array(this.width * this.height * 4);
// console.log(pixels);
if (canRead) {
console.log("Can read! Mmmm");
// console.log(pixels); /
// bind the framebuffer
// gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// read the pixels
gl.getExtension("OES_texture_float");
gl.readPixels(0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)
// Unbind the framebuffer
// gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}
this.outputFBO.deactivate(gl);
// gl.viewport(0, 0, width, height);
// this.renderLighting(gl, this.fbo);
//
gl.viewport(0, 0, this.width, this.height);
this.renderTextureToScreenSegment(gl, this.outputFBO.getTexture('test'), 0, 0,1, 1);
// this.renderTextureToScreenSegment(gl, this.fbo.getTexture('depth'), -0.75, -0.75, 0.25, 0.25);
// this.renderTextureToScreenSegment(gl, this.fbo.getTexture('normal'), -0.25, -0.75, 0.25, 0.25);
// this.renderTextureToScreenSegment(gl, this.fbo.getTexture('color'), 0.25, -0.75, 0.25, 0.25);
// gl.viewport(0, 0, width * 2, height * 2);
// this.renderTextureToScreenSegment(gl, this.outputFBO.getTexture('test'), 0, 0, 1, 1);
return pixels;
}
l = new Array(_len);
function clampedSin(f)
{
return Math.sin(Math.PI * Math.max(Math.min(1.0, f), 0) / 2);
}
for(var i = 0; i < _len; i++)
{
var f = i / 4.0;
j[i] = f;
l[i] = 3.5 * Math.max(1.0 - Math.pow(clampedSin(2.0 * Math.abs(f - 0.5)), 4.0), 0.2);
k[i] = clampedSin(1.0 - 2.0 * Math.abs(f - 0.5));
}
var baseColor = vec4.fromValues(0.78, 0.31, 0.31, 1.0);
var resonatorMidOffset = 0;
var portalBaseOffset = 0;
var up = vec3.fromValues(0, 1, 0);
function fillChunk(buf, index, x, y, z, u, v, normal, f6, color)
{
var off = index * _chunkSize;
buf[off + 0] = x;
buf[off + 1] = y;
buf[off + 2] = z;
buf[off + 3] = f6;
buf[off + 4] = u;
buf[off + 5] = v;
buf[off + 6] = normal[0];
buf[off + 7] = normal[2];