kopia lustrzana https://github.com/robhawkes/vizicities
Added poor-mans ambient occlusion
Robin Hawkes
rodzic
1fc22a3205
commit
143fddf14e
|
|
@ -8785,6 +8785,9 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
var colour = new _three2['default'].Color();
|
||||
|
||||
var light = new _three2['default'].Color(0xffffff);
|
||||
var shadow = new _three2['default'].Color(0x666666);
|
||||
|
||||
var features = geojson.features;
|
||||
|
||||
// Run filter, if provided
|
||||
|
|
@ -8844,11 +8847,54 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
colour.set(style.color);
|
||||
|
||||
allVertices.push(extruded.positions);
|
||||
allColours.push([colour.r, colour.g, colour.b]);
|
||||
allFaces.push(extruded.faces);
|
||||
var topColor = colour.clone().multiply(light);
|
||||
var bottomColor = colour.clone().multiply(shadow);
|
||||
|
||||
facesCount += extruded.faces.length;
|
||||
var _faces = [];
|
||||
var _colours = [];
|
||||
|
||||
allVertices.push(extruded.positions);
|
||||
|
||||
var _colour;
|
||||
extruded.top.forEach(function (face, fi) {
|
||||
_colour = [];
|
||||
|
||||
_colour.push([colour.r, colour.g, colour.b]);
|
||||
_colour.push([colour.r, colour.g, colour.b]);
|
||||
_colour.push([colour.r, colour.g, colour.b]);
|
||||
|
||||
_faces.push(face);
|
||||
_colours.push(_colour);
|
||||
});
|
||||
|
||||
// Set up colours for every vertex with poor-mans AO on the sides
|
||||
extruded.sides.forEach(function (face, fi) {
|
||||
_colour = [];
|
||||
|
||||
// First face is always bottom-bottom-top
|
||||
if (fi % 2 === 0) {
|
||||
_colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
|
||||
_colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
|
||||
_colour.push([topColor.r, topColor.g, topColor.b]);
|
||||
// Reverse winding for the second face
|
||||
// top-top-bottom
|
||||
} else {
|
||||
_colour.push([topColor.r, topColor.g, topColor.b]);
|
||||
_colour.push([topColor.r, topColor.g, topColor.b]);
|
||||
_colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
|
||||
}
|
||||
|
||||
_faces.push(face);
|
||||
_colours.push(_colour);
|
||||
});
|
||||
|
||||
// Skip bottom as there's no point rendering it
|
||||
// allFaces.push(extruded.faces);
|
||||
|
||||
allFaces.push(_faces);
|
||||
allColours.push(_colours);
|
||||
|
||||
facesCount += _faces.length;
|
||||
});
|
||||
|
||||
// Skip if no faces
|
||||
|
|
@ -8894,18 +8940,24 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
var ay = _vertices[index][1];
|
||||
var az = _vertices[index][2] + offset.y;
|
||||
|
||||
var c1 = _colour[j][0];
|
||||
|
||||
index = _faces[j][1];
|
||||
|
||||
var bx = _vertices[index][0] + offset.x;
|
||||
var by = _vertices[index][1];
|
||||
var bz = _vertices[index][2] + offset.y;
|
||||
|
||||
var c2 = _colour[j][1];
|
||||
|
||||
index = _faces[j][2];
|
||||
|
||||
var cx = _vertices[index][0] + offset.x;
|
||||
var cy = _vertices[index][1];
|
||||
var cz = _vertices[index][2] + offset.y;
|
||||
|
||||
var c3 = _colour[j][2];
|
||||
|
||||
// Flat face normals
|
||||
// From: http://threejs.org/examples/webgl_buffergeometry.html
|
||||
pA.set(ax, ay, az);
|
||||
|
|
@ -8930,9 +8982,9 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
normals[lastIndex * 9 + 1] = ny;
|
||||
normals[lastIndex * 9 + 2] = nz;
|
||||
|
||||
colours[lastIndex * 9 + 0] = _colour[0];
|
||||
colours[lastIndex * 9 + 1] = _colour[1];
|
||||
colours[lastIndex * 9 + 2] = _colour[2];
|
||||
colours[lastIndex * 9 + 0] = c1[0];
|
||||
colours[lastIndex * 9 + 1] = c1[1];
|
||||
colours[lastIndex * 9 + 2] = c1[2];
|
||||
|
||||
vertices[lastIndex * 9 + 3] = bx;
|
||||
vertices[lastIndex * 9 + 4] = by;
|
||||
|
|
@ -8942,9 +8994,9 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
normals[lastIndex * 9 + 4] = ny;
|
||||
normals[lastIndex * 9 + 5] = nz;
|
||||
|
||||
colours[lastIndex * 9 + 3] = _colour[0];
|
||||
colours[lastIndex * 9 + 4] = _colour[1];
|
||||
colours[lastIndex * 9 + 5] = _colour[2];
|
||||
colours[lastIndex * 9 + 3] = c2[0];
|
||||
colours[lastIndex * 9 + 4] = c2[1];
|
||||
colours[lastIndex * 9 + 5] = c2[2];
|
||||
|
||||
vertices[lastIndex * 9 + 6] = cx;
|
||||
vertices[lastIndex * 9 + 7] = cy;
|
||||
|
|
@ -8954,9 +9006,9 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
normals[lastIndex * 9 + 7] = ny;
|
||||
normals[lastIndex * 9 + 8] = nz;
|
||||
|
||||
colours[lastIndex * 9 + 6] = _colour[0];
|
||||
colours[lastIndex * 9 + 7] = _colour[1];
|
||||
colours[lastIndex * 9 + 8] = _colour[2];
|
||||
colours[lastIndex * 9 + 6] = c3[0];
|
||||
colours[lastIndex * 9 + 7] = c3[1];
|
||||
colours[lastIndex * 9 + 8] = c3[2];
|
||||
|
||||
lastIndex++;
|
||||
}
|
||||
|
|
@ -10876,6 +10928,9 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
var n = points.length;
|
||||
var positions;
|
||||
var cells;
|
||||
var topCells;
|
||||
var bottomCells;
|
||||
var sideCells;
|
||||
|
||||
// If bottom and top values are identical then return the flat shape
|
||||
options.top === options.bottom ? flat() : full();
|
||||
|
|
@ -10885,6 +10940,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
return [p[0], options.top, p[1]];
|
||||
});
|
||||
cells = faces;
|
||||
topCells = faces;
|
||||
}
|
||||
|
||||
function full() {
|
||||
|
|
@ -10907,6 +10963,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
}
|
||||
}
|
||||
|
||||
sideCells = [].concat(cells);
|
||||
|
||||
if (options.closed) {
|
||||
var top = faces;
|
||||
var bottom = top.map(function (p) {
|
||||
|
|
@ -10918,12 +10976,18 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
return [p[0], p[2], p[1]];
|
||||
});
|
||||
cells = cells.concat(top).concat(bottom);
|
||||
|
||||
topCells = top;
|
||||
bottomCells = bottom;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
positions: positions,
|
||||
faces: cells
|
||||
faces: cells,
|
||||
top: topCells,
|
||||
bottom: bottomCells,
|
||||
sides: sideCells
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -186,6 +186,9 @@ class TopoJSONTile extends Tile {
|
|||
|
||||
var colour = new THREE.Color();
|
||||
|
||||
var light = new THREE.Color(0xffffff);
|
||||
var shadow = new THREE.Color(0x666666);
|
||||
|
||||
var features = geojson.features;
|
||||
|
||||
// Run filter, if provided
|
||||
|
|
@ -245,11 +248,54 @@ class TopoJSONTile extends Tile {
|
|||
|
||||
colour.set(style.color);
|
||||
|
||||
allVertices.push(extruded.positions);
|
||||
allColours.push([colour.r, colour.g, colour.b]);
|
||||
allFaces.push(extruded.faces);
|
||||
var topColor = colour.clone().multiply(light);
|
||||
var bottomColor = colour.clone().multiply(shadow);
|
||||
|
||||
facesCount += extruded.faces.length;
|
||||
var _faces = [];
|
||||
var _colours = [];
|
||||
|
||||
allVertices.push(extruded.positions);
|
||||
|
||||
var _colour;
|
||||
extruded.top.forEach((face, fi) => {
|
||||
_colour = [];
|
||||
|
||||
_colour.push([colour.r, colour.g, colour.b]);
|
||||
_colour.push([colour.r, colour.g, colour.b]);
|
||||
_colour.push([colour.r, colour.g, colour.b]);
|
||||
|
||||
_faces.push(face);
|
||||
_colours.push(_colour);
|
||||
});
|
||||
|
||||
// Set up colours for every vertex with poor-mans AO on the sides
|
||||
extruded.sides.forEach((face, fi) => {
|
||||
_colour = [];
|
||||
|
||||
// First face is always bottom-bottom-top
|
||||
if (fi % 2 === 0) {
|
||||
_colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
|
||||
_colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
|
||||
_colour.push([topColor.r, topColor.g, topColor.b]);
|
||||
// Reverse winding for the second face
|
||||
// top-top-bottom
|
||||
} else {
|
||||
_colour.push([topColor.r, topColor.g, topColor.b]);
|
||||
_colour.push([topColor.r, topColor.g, topColor.b]);
|
||||
_colour.push([bottomColor.r, bottomColor.g, bottomColor.b]);
|
||||
}
|
||||
|
||||
_faces.push(face);
|
||||
_colours.push(_colour);
|
||||
});
|
||||
|
||||
// Skip bottom as there's no point rendering it
|
||||
// allFaces.push(extruded.faces);
|
||||
|
||||
allFaces.push(_faces);
|
||||
allColours.push(_colours);
|
||||
|
||||
facesCount += _faces.length;
|
||||
});
|
||||
|
||||
// Skip if no faces
|
||||
|
|
@ -295,18 +341,24 @@ class TopoJSONTile extends Tile {
|
|||
var ay = _vertices[index][1];
|
||||
var az = _vertices[index][2] + offset.y;
|
||||
|
||||
var c1 = _colour[j][0];
|
||||
|
||||
index = _faces[j][1];
|
||||
|
||||
var bx = _vertices[index][0] + offset.x;
|
||||
var by = _vertices[index][1];
|
||||
var bz = _vertices[index][2] + offset.y;
|
||||
|
||||
var c2 = _colour[j][1];
|
||||
|
||||
index = _faces[j][2];
|
||||
|
||||
var cx = _vertices[index][0] + offset.x;
|
||||
var cy = _vertices[index][1];
|
||||
var cz = _vertices[index][2] + offset.y;
|
||||
|
||||
var c3 = _colour[j][2];
|
||||
|
||||
// Flat face normals
|
||||
// From: http://threejs.org/examples/webgl_buffergeometry.html
|
||||
pA.set(ax, ay, az);
|
||||
|
|
@ -331,9 +383,9 @@ class TopoJSONTile extends Tile {
|
|||
normals[lastIndex * 9 + 1] = ny;
|
||||
normals[lastIndex * 9 + 2] = nz;
|
||||
|
||||
colours[lastIndex * 9 + 0] = _colour[0];
|
||||
colours[lastIndex * 9 + 1] = _colour[1];
|
||||
colours[lastIndex * 9 + 2] = _colour[2];
|
||||
colours[lastIndex * 9 + 0] = c1[0];
|
||||
colours[lastIndex * 9 + 1] = c1[1];
|
||||
colours[lastIndex * 9 + 2] = c1[2];
|
||||
|
||||
vertices[lastIndex * 9 + 3] = bx;
|
||||
vertices[lastIndex * 9 + 4] = by;
|
||||
|
|
@ -343,9 +395,9 @@ class TopoJSONTile extends Tile {
|
|||
normals[lastIndex * 9 + 4] = ny;
|
||||
normals[lastIndex * 9 + 5] = nz;
|
||||
|
||||
colours[lastIndex * 9 + 3] = _colour[0];
|
||||
colours[lastIndex * 9 + 4] = _colour[1];
|
||||
colours[lastIndex * 9 + 5] = _colour[2];
|
||||
colours[lastIndex * 9 + 3] = c2[0];
|
||||
colours[lastIndex * 9 + 4] = c2[1];
|
||||
colours[lastIndex * 9 + 5] = c2[2];
|
||||
|
||||
vertices[lastIndex * 9 + 6] = cx;
|
||||
vertices[lastIndex * 9 + 7] = cy;
|
||||
|
|
@ -355,9 +407,9 @@ class TopoJSONTile extends Tile {
|
|||
normals[lastIndex * 9 + 7] = ny;
|
||||
normals[lastIndex * 9 + 8] = nz;
|
||||
|
||||
colours[lastIndex * 9 + 6] = _colour[0];
|
||||
colours[lastIndex * 9 + 7] = _colour[1];
|
||||
colours[lastIndex * 9 + 8] = _colour[2];
|
||||
colours[lastIndex * 9 + 6] = c3[0];
|
||||
colours[lastIndex * 9 + 7] = c3[1];
|
||||
colours[lastIndex * 9 + 8] = c3[2];
|
||||
|
||||
lastIndex++;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@ var extrudePolygon = function(points, faces, _options) {
|
|||
var n = points.length;
|
||||
var positions;
|
||||
var cells;
|
||||
var topCells;
|
||||
var bottomCells;
|
||||
var sideCells;
|
||||
|
||||
// If bottom and top values are identical then return the flat shape
|
||||
(options.top === options.bottom) ? flat() : full();
|
||||
|
|
@ -26,6 +29,7 @@ var extrudePolygon = function(points, faces, _options) {
|
|||
function flat() {
|
||||
positions = points.map(function(p) { return [p[0], options.top, p[1]]; });
|
||||
cells = faces;
|
||||
topCells = faces;
|
||||
}
|
||||
|
||||
function full() {
|
||||
|
|
@ -44,17 +48,25 @@ var extrudePolygon = function(points, faces, _options) {
|
|||
}
|
||||
}
|
||||
|
||||
sideCells = [].concat(cells);
|
||||
|
||||
if (options.closed) {
|
||||
var top = faces;
|
||||
var bottom = top.map(function(p) { return p.map(function(v) { return v + n; }); });
|
||||
bottom = bottom.map(function(p) { return [p[0], p[2], p[1]]; });
|
||||
cells = cells.concat(top).concat(bottom);
|
||||
|
||||
topCells = top;
|
||||
bottomCells = bottom;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
positions: positions,
|
||||
faces: cells
|
||||
faces: cells,
|
||||
top: topCells,
|
||||
bottom: bottomCells,
|
||||
sides: sideCells
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue