Skip to content

Commit

Permalink
Fixed async issues
Browse files Browse the repository at this point in the history
  • Loading branch information
Florian Fechner authored and Florian Fechner committed Feb 24, 2018
1 parent 1ae856d commit a8cfa72
Showing 1 changed file with 98 additions and 89 deletions.
187 changes: 98 additions & 89 deletions voxel-visualization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,20 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
static get observers()
{
return [
'_onSchematicJsonPathChanged(schematicJsonPath)',
'_onSchematicPathChanged(schematicPath)',
'_onSchematicChanged(schematic)',
'_onTexturePackPathChanged(texturePackPath)',
'_onAmbientLightIntensityChanged(ambientLightIntensity)',
'_onDirectionalLightIntensityChanged(directionalLightIntensity)'
'draw(schematic, texturePackPath)',
'_onSchematicJsonPathChanged(schematicJsonPath)',
'_onSchematicPathChanged(schematicPath)',
'_onAmbientLightIntensityChanged(ambientLightIntensity)',
'_onDirectionalLightIntensityChanged(directionalLightIntensity)'
]
}

constructor()
{
super();

this.time = 0;

// this.scene
// this.camera
// this.group
Expand All @@ -79,19 +80,31 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe

_onResize()
{
if(this.renderer)
{
let width = this.clientWidth;
let height = this.clientHeight;

this.renderer.setSize(width, height);
this.camera = new THREE.PerspectiveCamera(35, width/height, 0.1, 3000);
}
this.draw();
}

connectedCallback()
{
super.connectedCallback();

let render = () =>
{
if(this.renderer && this.camera)
{
if(this.group)
{
this.group.rotation.y = this.time;
}

this.renderer.render(this.scene, this.camera);

this.time += 0.0025;
}

requestAnimationFrame(render);
}

render();
}

_onSchematicJsonPathChanged(schematicJsonPath)
Expand All @@ -107,20 +120,20 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
let normalizedAmbientLightIntensity = parseInt(this.ambientLightIntensity * 0xff);
let ambientLightColor = normalizedAmbientLightIntensity * 0x010101;

this.ambientLight.color.set(ambientLightColor);
if(this.ambientLight) this.ambientLight.color.set(ambientLightColor);
}

_onDirectionalLightIntensityChanged(directionalLightIntensity)
{
let normalizedDirectionalLightIntensity = parseInt(this.directionalLightIntensity * 0xff);
let directionalLightColor = normalizedDirectionalLightIntensity * 0x010101;

this.directionalLight.color.set(directionalLightColor);
if(this.directionalLight) this.directionalLight.color.set(directionalLightColor);
}

_onSchematicPathChanged(schematicPath)
{
let file = this.baseURI + schematicPath;
let file = schematicPath;
let request = new XMLHttpRequest();
request.responseType = "arraybuffer";

Expand Down Expand Up @@ -172,52 +185,51 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
return (256 + char);
}

_onSchematicChanged(schematic)
draw()
{
let canvas = this.$["canvas"];

this.renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
this.renderer.setClearColor(0xfbfbfb);
this.renderer.setPixelRatio(window.devicePixelRatio);
let blockIdListPath = this.resolveUrl("block_id_list.json");

if(this.scene)
this._readJsonFile(blockIdListPath, (data) =>
{
while(this.scene.children.length > 0)
{
this.scene.remove(this.scene.children[0]);
}
}
let canvas = this.$["canvas"];

this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
this.renderer.setClearColor(0xfbfbfb);
this.renderer.setPixelRatio(window.devicePixelRatio);

let normalizedAmbientLightIntensity = parseInt(this.ambientLightIntensity * 0xff);
let ambientLightColor = normalizedAmbientLightIntensity * 0x010101;
this.ambientLight = new THREE.AmbientLight(ambientLightColor);
let width = this.clientWidth;
let height = this.clientHeight;
let aspectRatio = (width/height) ? (width/height) : 1;

let normalizedDirectionalLightIntensity = parseInt(this.directionalLightIntensity * 0xff);
let directionalLightColor = normalizedDirectionalLightIntensity * 0x010101;
this.directionalLight = new THREE.DirectionalLight(directionalLightColor, 2);
this.directionalLight.position.set(2, 4, 5);
this.renderer.setSize(width, height);
this.camera = new THREE.PerspectiveCamera(35, aspectRatio, 0.1, 3000);

this.scene.add(this.ambientLight);
this.scene.add(this.directionalLight);
this.scene = new THREE.Scene();

if(schematic)
{
let blocks = schematic.blocks;
let width = schematic.width;
let height = schematic.height;
let depth = schematic.depth;
let normalizedAmbientLightIntensity = parseInt(this.ambientLightIntensity * 0xff);
let ambientLightColor = normalizedAmbientLightIntensity * 0x010101;
this.ambientLight = new THREE.AmbientLight(ambientLightColor);

let expandedBlocks = this.expand(blocks, width, height, depth);
let expandedWidth = width + 2;
let expandedHeight = height + 2;
let expandedDepth = depth + 2;
let normalizedDirectionalLightIntensity = parseInt(this.directionalLightIntensity * 0xff);
let directionalLightColor = normalizedDirectionalLightIntensity * 0x010101;
this.directionalLight = new THREE.DirectionalLight(directionalLightColor, 2);
this.directionalLight.position.set(2, 4, 5);

let blockIdListPath = this.resolveUrl("block_id_list.json");
this.scene.add(this.ambientLight);
this.scene.add(this.directionalLight);

this._readJsonFile(blockIdListPath, (data) =>
if(this.schematic)
{
let blocks = this.schematic.blocks;
let width = this.schematic.width;
let height = this.schematic.height;
let depth = this.schematic.depth;

let expandedBlocks = this.expand(blocks, width, height, depth);
let expandedWidth = width + 2;
let expandedHeight = height + 2;
let expandedDepth = depth + 2;

let blockIdList = JSON.parse(data);
let solidBlocks = expandedBlocks.map((block) => blockIdList[block.id] ? true : false );
let filledBlocks = this.fillVoids(solidBlocks, expandedWidth, expandedHeight, expandedDepth);
Expand All @@ -235,6 +247,7 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
let uvs = new Float32Array(this.calculateUVs(faces, blockIdList));

this.group = new THREE.Group();
this.group.position.set(0, 0, -3);

for(let i=0; i<keys.length; i++)
{
Expand All @@ -247,6 +260,7 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
if(this.texturePackPath)
{
texture = new THREE.TextureLoader().load(this.calculateTexturePath(key, blockIdList));

texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
}
Expand All @@ -264,43 +278,8 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
}

this.scene.add(this.group);
});

this.async(() =>
{
this._onResize();
}, 2000);

// Rendering Routine
let time = 0;

let render = () =>
{
if(this.renderer && this.camera)
{
if(this.group)
{
let base = -2;

this.group.position.set(0, 0, base / this.zoom);
this.group.rotation.y = time;
}

this.renderer.render(this.scene, this.camera);

time += 0.0025;
}

requestAnimationFrame(render);
}

render();
}
}

_onTexturePackPathChanged(texturePackPath)
{
this._onSchematicChanged();
});
}

calculateTexturePath(key, blockIdList)
Expand Down Expand Up @@ -333,7 +312,37 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe

let textureName = texture.split(":")[0];

return [this.baseURI, this.texturePackPath, "/assets/minecraft/textures/blocks/", textureName, ".png"].join("");
return this._joinPath(this.texturePackPath, "assets/minecraft/textures/blocks/", textureName + ".png");
}

_joinPath(/* ... */)
{
let parts = [];
for (let i = 0, l = arguments.length; i < l; i++)
{
parts = parts.concat(arguments[i].split("/"));
}

let newParts = [];
for (let i = 0; i < parts.length; i++)
{
let part = parts[i];

if (!part || part === ".") continue;

if (part === "..")
{
newParts.pop();
}
else
{
newParts.push(part);
}
}
// Preserve the initial slash if there was one.
if (parts[0] === "") newParts.unshift("");
// Turn back into a single string path.
return newParts.join("/") || (newParts.length ? "/" : ".");
}

calculateTextureRotation(key, blockIdList)
Expand Down Expand Up @@ -838,7 +847,7 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe

_readJsonFile(file, callback)
{
var rawFile = new XMLHttpRequest();
let rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = () =>
Expand Down

0 comments on commit a8cfa72

Please sign in to comment.