[VWORLD3D] 브이월드 WebGL 3.5버전사용하기

[공공칠빵]

[VWORLD3D 브이월드 WebGL 그림자분석(일조권 분석)

* 응용프로그램 : https://pro.aicon.city/​

* 브이월드 WebGL 3.5버전 : https://pro.aicon.city/VWORLD3D_BUILDMAP/

* 관련글1 : [VWORLD3D] 브이월드 WebGL 그림자분석(일조권 분석)
지난글에서는 브이월드 WebGL에서 건물의 그림자분석(일조권 분석) 응용해보겠습니다.
브이월드 지도 서비스에서 3차원분석 기능엔 넣었지만, API는 없고 알려주지 않은 숨은 기능입니다.
API제공은 2.0 버전입니다. 응용프로그램 : https://pro.aicon.city/VWORLD3D_MAP/
​
* 관련글2 : [OL_FGIS/Pro] 3D 뷰어 기능 정리 및 활용안

​

이번글에서는 브이월드 WebGL 3.5버전을 사용하여,

건물의 그림자분석(일조권 분석)과 토공량 계산을 하는 예제입니다.

사업 대상지의 지형 평탄화(토공분석 응용)과 기존 건물 제거(건물삭제 응용)과 사용자 가상건물 생성 응용.

- 지형 평탄회를 위해 사업 대상지의 지형분석으로 굴착 높이를 재계산하여야 함.

- 기존건물 삭제시 멀티 폴리곤으로 처리 못함을 해결하여야 함.

- 가상건물생성시 텍스쳐 등 세슘API로 해결하여야 함.

1. 브이월드 WebGL 3.5를 선언합니다.

version=3.5&apiKey={key}&domain={domain}"></script>

2. 브이월드 WebGL 지도를 생성합니다.

function main_initMap() {
//지도 호출 완료후 실행
var _initFunc = function() {
init_Sunshine(); //그림자생성
delete_3dTileBilding(jijuk_depth); //사업대상지의 기존건물 삭제
delete_3dTileTerrain(jijuk_depth); //사업지 평탄화(토공분석)
Create_3dTileBilding(jijuk_depth); //가상건물생성
}
vw.ws3dInitCallBack = _initFunc;
var mapmode = "ws3d-map";
var basemapType = vw.ol3.BasemapType.GRAPHIC;
vw.MapControllerOption = {
container : "maparea",
mapMode : mapmode,
basemapType : basemapType,
controlDensity : vw.ol3.DensityType.EMPTY,
interactionDensity : vw.ol3.DensityType.BASIC,
controlsAutoArrange : true,
homePosition : vw.ol3.CameraPosition,
initPosition : vw.ol3.CameraPosition,
};
mapController = new vw.MapController(vw.MapControllerOption);
map2d = mapController.Map2D;
map3d = mapController.Map3D;
map3d.setLogoVisible(false);
map3d.setNavigationZoomVisible(true);
}

3. 그림자(일조권) 생성.

function init_Sunshine(){
//태양 광원 사용 여부, true시 태양 광원을 활성화 함, false시 객체 정면을 광원방향으로 함
ws3d.viewer.setting.useSunLighting = true;
ws3d.viewer.scene.sun.glowFactor = 1; // 태양 빛 증가
ws3d.viewer.shadows = true;
ws3d.viewer.terrainShadows = 1;// 지형 그림자 사용 활성화
}

4. 사업대상지의 기존건물 삭제

function delete_3dTileBilding(_depth) {
ws3d.viewer.map.terrain.samplingLevelMax = 13;
var jijuk_Json = JSON.parse(jijuk_coordinates);
for(let idx = 0; idx < jijuk_Json.length; idx++) {
var _Polygons = jijuk_Json[idx];
for(let ipoy = 0; ipoy < _Polygons.length; ipoy++) {
var _coordinates = _Polygons[ipoy];
// 오목 다각형일때 클리핑 플레인 처리가 안되서 Convex hull 처리 후 클리핑 플레인 생성
const points = [];
for(let i = 0; i < _coordinates.length; i++) {
const point = turf.point(_coordinates[i]);
points.push(point);
}
const points_featureCollection = turf.featureCollection(points);
const convexPolygon = turf.convex(points_featureCollection);
const ar = new Array();
for(let i = 0; i < convexPolygon.geometry.coordinates[0].length; i++) {
const pointCoordinate = convexPolygon.geometry.coordinates[0][i];
const ogcPoint = new ws3d.common.OgcPoint(pointCoordinate[0],pointCoordinate[1]);
ar.push(ogcPoint);
}
const Polygon = new ws3d.common.OgcPolygon(new ws3d.common.OgcLinearRing(ar));
const tileset = ws3d.viewer.map.getElementByPath(buildingTilePath)._tileset;
clipping_Polygon3dTile(Polygon, tileset);
}
}
}
function clipping_Polygon3dTile(polygonGeometry, tileset) {
//시계 방향이면 뒤집어 폴리곤 ring의 순서를 뒤집어 준다.
if(!_isCounterClockWisePolygon(polygonGeometry)){
polygonGeometry = _getReversedPolygon(polygonGeometry);
}
// 건물 타일셋
//const tileset = ws3d.viewer.map.getElementByPath(buildingTilePath)._tileset;
// 클리핑프레인 좌표를 루트타일원점을 기준으로하는 Matrix 이동
const rootTile = tileset.root;
const boundingVolume = rootTile.boundingVolume;
const clippingPlanesOrigin = boundingVolume.boundingSphere.center;
const toECEFMatrix = ws3d.common.Transforms.eastNorthUpToFixedFrame(clippingPlanesOrigin);
const toENUMatrix = ws3d.common.Matrix4.inverseTransformation(toECEFMatrix, new ws3d.common.Matrix4());
//const toENUMatrixWithoutTranslate = ws3d.common.Matrix4.getMatrix3(toENUMatrix, new ws3d.common.Matrix3());
const points = []; // Cartesian3 Array
const positionArray = polygonGeometry.getExteriorRing().positionArray;
let n = positionArray.length;
if( positionArray[0] === positionArray[positionArray.length-3]
&& positionArray[1] === positionArray[positionArray.length-2]
//&& positionArray[2] === positionArray[positionArray.length-1]
) {
n-=3;
}
for(let i = 0; i < n; i=i+3) {
const planeCoordCartesian3AsEcef = ws3d.common.Cartesian3.fromDegrees(positionArray[i],
positionArray[i+1], positionArray[i+2]);
points.push(planeCoordCartesian3AsEcef);
}
const pointsLength = points.length;
const clippingPlanes = [];
for (let i = 0; i < pointsLength; ++i) {
const nextIndex = (i + 1) % pointsLength;
if(points[i].x === points[nextIndex].x && points[i].y === points[nextIndex].y) {
continue;
}
let midpoint = ws3d.common.Cartesian3.add(
points[i],
points[nextIndex],
new ws3d.common.Cartesian3()
);
midpoint = ws3d.common.Cartesian3.multiplyByScalar(
midpoint,
0.5,
midpoint
);
const up = ws3d.common.Cartesian3.normalize(
midpoint,
new ws3d.common.Cartesian3()
);
let right = ws3d.common.Cartesian3.subtract(
points[nextIndex],
midpoint,
new ws3d.common.Cartesian3()
);
right = ws3d.common.Cartesian3.normalize(right, right);
let normal = ws3d.common.Cartesian3.cross(
right,
up,
new ws3d.common.Cartesian3()
);
normal = ws3d.common.Cartesian3.normalize(normal, normal);
const originCenteredPlane = new ws3d.common.Plane(normal, 0.0);
const distance = ws3d.common.Plane.getPointDistance(
originCenteredPlane,
midpoint
);
clippingPlanes.push(new ws3d.common.ClippingPlane(normal, distance));
}
ws3d.viewer.scene.frameState.afterRender.push(function(){
if(tileset.clippingPlanes != undefined) {
tileset.clippingPlanes.removeAll();
for(let i = 0; i < clippingPlanes.length; i++) {
tileset.clippingPlanes.add(clippingPlanes[i]);
}
tileset.clippingPlanes.enabled = true;
} else {
tileset.clippingPlanes = new ws3d.common.ClippingPlaneCollection({
planes: clippingPlanes,
edgeWidth: 1.0,
edgeColor: ws3d.common.Color.WHITE,
enabled: true,
modelMatrix: toENUMatrix
});
}
if(ws3d.common.Matrix4.equals(tileset.clippingPlanesOriginMatrix, ws3d.common.Matrix4.IDENTITY)) {
tileset.clippingPlanes.modelMatrix = ws3d.common.Matrix4.IDENTITY;
tileset.clippingPlanesOriginMatrix = ws3d.common.Matrix4.IDENTITY;
}
});
}

5. 사업지 평탄화(토공분석)

function delete_3dTileTerrain(depth) {
if(depth) {
ws3d.viewer.map.terrain.samplingLevelMax = 13;
let cellSize = 10;
let angle = Main_angle;
if(depth < 0) { // 성토일경우 각도는 음수로 변경
angle = angle * -1;
}
var jijuk_Json = JSON.parse(jijuk_coordinates);
for(let idx = 0; idx < jijuk_Json.length; idx++) {
var _Polygons = jijuk_Json[idx];
for(let ipoy = 0; ipoy < _Polygons.length; ipoy++) {
var _coordinates = _Polygons[ipoy];
const ar = new Array();
for(let i = 0; i < _coordinates.length; i++) {
const pointCoordinate = _coordinates[i];
const ogcPoint = new ws3d.common.OgcPoint(pointCoordinate[0],pointCoordinate[1],10);
ar.push(ogcPoint);
}
const Polygon = new ws3d.common.OgcPolygon(new ws3d.common.OgcLinearRing(ar));
drawFailureEnvelopeByEawkRest(cellSize, depth, angle, Polygon);
}
}
}
}
function drawFailureEnvelopeByEawkRest(cellSize, depth, angle, polygon){
if(depth) {
if (polygon) {
if(_isCounterClockWisePolygon(polygon)){
polygon = _getReversedPolygon2(polygon);
}
failureEnvelope.material = "../image/underground.jpg";
failureEnvelope._targetAngle = angle * Math.PI / 180; // 경사각 적용 (디그리->라디안)
failureEnvelope._targetAngleTangent = Math.tan(failureEnvelope._targetAngle);
// 파괴포락선 생성후 콜백으로 토공량 계산 시작
failureEnvelope.drawEnvelopeFrom2DPolygon(polygon, depth, function() {
// 1. 선택한 굴착지점 점고법 계산 (경사면을 고려하지 않은 토공량)
var _points = polygon.getExteriorRing().positionArray;
// 굴착 영역(폴리곤) 버텍스 추출 (x,y)
var polygonPointsArray = [];
for(var i = 0; i < _points.length; i = i+=3) {
var point = [];
point.push(_points[i]);
point.push(_points[i+1]);
polygonPointsArray.push(point);
}
var diggGridData = createGrid(polygonPointsArray, cellSize); // 굴착 영역 그리드 데이터 생성
// 그리드의 고도값 샘플링
Promise.resolve(
ws3d.viewer.map.terrain.sampleTerrainByPointArray(
diggGridData.pointGridCoordinates_ogcPoint
)
).then(function (terrainSamplePositions) {
// 점고법 계산 수행 (경사면을 고려하지 않은 토공량)
var diggTerrainVolume =
calTerrainVolume(diggGridData, terrainSamplePositions, depth, cellSize, null);
// 2. 굴착된 지형의 고도값을 샘플링하여 경사면에 대한 토공량을 계산
var _slopePolygonPoints =
failureEnvelope._polygonTopObject.srcGeometry.getExteriorRing().positionArray;
// 경사를 포함한 굴착 영역(폴리곤) 버텍스 추출 (x,y)
var slopePolygonPointsArray = [];
for(var i = 0; i < _slopePolygonPoints.length; i = i+=3) {
var point = [];
point.push(_slopePolygonPoints[i]);
point.push(_slopePolygonPoints[i+1]);
slopePolygonPointsArray.push(point);
}
var slopeGridData = createGrid(slopePolygonPointsArray, cellSize); // 굴착 영역 그리드 데이터 생성
var cartesians = []; // 경사 굴착 표면 그리드 경위도 좌표를 Cartesian으로 변경
for (var i = 0; i < slopeGridData.terrainSamplePositions.length; i++) {
var position_cartesian =
ws3d.common.Cartesian3.fromRadians(slopeGridData.terrainSamplePositions[i].longitude, slopeGridData.terrainSamplePositions[i].latitude);
cartesians.push(position_cartesian);
}
// 상단 표면 절개 (굴착된 지형에 고도값 샘플링을 위해)
clippingPolygon(failureEnvelope._polygonTopObject.srcGeometry);
});
});
}
}
}
​
// 폴리곤으로 표면 절개
function clippingPolygon(polygonGeometry) {
if(!_isCounterClockWisePolygon(polygonGeometry)){
polygonGeometry = _getReversedPolygon2(polygonGeometry);
}
const points = []; // Cartesian3 Array
const positionArray = polygonGeometry.getExteriorRing().positionArray;
// Cartesian 좌표로 변환
for(let i = 0; i < positionArray.length; i=i+3) {
points.push(
ws3d.common.Cartesian3.fromDegrees(positionArray[i], positionArray[i+1], positionArray[i+2])
)
}
if(points[0].x === points[points.length-1].x && points[0].y === points[points.length-1].y) {
points.pop(); // 닫힌 폴리곤 x
}
const pointsLength = points.length;
const clippingPlanes = [];
for (let i = 0; i < pointsLength; ++i) {
const nextIndex = (i + 1) % pointsLength;
if(points[i].x === points[nextIndex].x && points[i].y === points[nextIndex].y) {
continue;
}
let midpoint = ws3d.common.Cartesian3.add(
points[i],
points[nextIndex],
new ws3d.common.Cartesian3()
);
midpoint = ws3d.common.Cartesian3.multiplyByScalar(
midpoint,
0.5,
midpoint
);
const up = ws3d.common.Cartesian3.normalize(
midpoint,
new ws3d.common.Cartesian3()
);
let right = ws3d.common.Cartesian3.subtract(
points[nextIndex],
midpoint,
new ws3d.common.Cartesian3()
);
right = ws3d.common.Cartesian3.normalize(right, right);
let normal = ws3d.common.Cartesian3.cross(
right,
up,
new ws3d.common.Cartesian3()
);
normal = ws3d.common.Cartesian3.normalize(normal, normal);
const originCenteredPlane = new ws3d.common.Plane(normal, 0.0);
const distance = ws3d.common.Plane.getPointDistance(
originCenteredPlane,
midpoint
);
clippingPlanes.push(new ws3d.common.ClippingPlane(normal, distance));
}
if(ws3d.viewer.scene.globe.clippingPlanes != undefined) {
//ws3d.viewer.scene.globe.clippingPlanes.removeAll(); // 기존 지면 절개 초기화
for(let i = 0; i < clippingPlanes.length; i++) {
ws3d.viewer.scene.globe.clippingPlanes.add(clippingPlanes[i]);
}
ws3d.viewer.scene.globe.clippingPlanes.enabled = true;
}else{
ws3d.viewer.scene.globe.clippingPlanes = new ws3d.common.ClippingPlaneCollection({
planes: clippingPlanes,
edgeWidth: 1.0,
edgeColor: ws3d.common.Color.WHITE,
enabled: true,
});
}
ws3d.viewer.scene.globe.backFaceCulling = true;
ws3d.viewer.scene.globe.showSkirts = true;
ws3d.viewer.scene.render();
}

6. 가상건물생성

function Create_3dTileBilding(_depth){
ws3d.viewer.map.terrain.samplingLevelMax = 13; //DEMlevel 제한
var Buildings_Json = JSON.parse(Buildings_Json_Str);
for(var idx=0; idx<Buildings_Json.features.length; idx++){
var _feature = Buildings_Json.features[idx];
var _height = _feature.properties["height"];
if(!_height) _height = Number(_feature.properties["NumOfFloors"])*3.3;
const ar = new Array();
var _coordinates = _feature.geometry.coordinates[0];
if(_feature.geometry.type == 'MultiPolygon') _coordinates = _coordinates[0];
for(let i = 0; i < _coordinates.length; i++) {
const pointCoordinate = _coordinates[i];
const ogcPoint = new ws3d.common.OgcPoint(pointCoordinate[0],pointCoordinate[1]);
ar.push(ogcPoint);
}
var GeometryLine = new ws3d.common.OgcLinearRing(ar);
const Polygon = new ws3d.common.OgcPolygon(GeometryLine);
Create_Bilding(_depth, _height, Polygon, ar);
}


function Create_Bilding(_depth, vitualBldgHeight, polygon, ar){
Promise.resolve(
ws3d.viewer.map.terrain.sampleTerrainByPointArray(ar)
).then(function (terrainSamplePositions) {
var pointHeightArray = [];
for(let i = 0; i < terrainSamplePositions.length; i++) {
pointHeightArray.push(terrainSamplePositions[i]);
}
const terrainByPoint = Math.min.apply(null, pointHeightArray);
const createPolygon = ws3d.viewer.objectManager.createPolygons(
polygon,
false,
{
height: terrainByPoint - _depth,
extrudedHeight: vitualBldgHeight ,
fill:true,
material: new vw.Color(204,102,0).ws3dColor.withAlpha(1),
outlineColor: new vw.Color(0,0,0,1).ws3dColor.withAlpha(1),
outline:true,
shadows: 1,
},
vitualBldgGraphicsGroupId,
);
});
}
}

* 건축설계에서 실시간 건물 생성 예시