Shadows in iTowns

Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Shadows in iTowns

Carsten Oldenburg

Dear all,


is it possible to enable casting shadows in iTowns especially using 3DTiles?

Here is a minimal example with three.js 3D objects in iTowns.
I've set the castShadow and receiveShadow properties to true and added a new DirectionalLight casting shadows.

Might be possible that I've forgotten something!?!


<html>
    <head>
        <title>Shadow</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="examples/css/example.css">
        <link rel="stylesheet" type="text/css" href="examples/css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="examples/js/GUI/GuiTools.js"></script>
        <script src="dist/itowns.js"></script>
        <script src="examples/js/GUI/LoadingScreen.js"></script>
        <script src="dist/debug.js"></script>
        <script src="dist/three.min.js"></script>

        <script type="text/javascript">
            // Define initial camera position
            var positionOnGlobe = { longitude: 6.956944, latitude: 50.938056, altitude: 5000 };
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 6.978090, 50.922810), range: 1000, // Deutzer Hafen
                //tilt: 45,
                tilt: 10,
            }

            var viewerDiv = document.getElementById('viewerDiv');
            
            var scene = new THREE.Scene();
            scene.castShadow = true;
            scene.receiveShadow = true;
            
            var globeOptions = {
                scene3D : scene,
            }
            var view = new itowns.GlobeView(viewerDiv, placement, globeOptions);

            // delete original sun
            view.tileLayer.object3d.remove (view.tileLayer.object3d.children[0]);
            
            // Add new sun casting shadows
            var sun = new THREE.DirectionalLight( 0xffffff, 1, 100 );
            sun.position.set(9.3194, 0.30187, 4.0399);
            sun.castShadow = true;
            sun.updateMatrixWorld(true);
            view.tileLayer.object3d.add(sun);
            
            // position of the mesh
            var cameraTargetPosition = view.controls.getLookAtCoordinate();
            var meshCoord = cameraTargetPosition;
            meshCoord.altitude += 30;

            //Create a sphere that cast shadows (but does not receive them)
            var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
            var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
            var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
            sphere.castShadow = true; //default is false
            sphere.receiveShadow = true; //default
            sphere.position.copy(meshCoord.as(view.referenceCrs));
            view.tileLayer.object3d.add( sphere );

            var meshCoord2 = cameraTargetPosition;
            meshCoord2.altitude -= 10;

            meshCoord2.latitude += 0.01;

            //Create a plane that receives shadows (but does not cast them)
            var planeGeometry = new THREE.PlaneBufferGeometry( 80, 80, 32, 32 );
            var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
            var plane = new THREE.Mesh( planeGeometry, planeMaterial );
            plane.castShadow = true; //default is false
            plane.receiveShadow = true;
            plane.rotateY(0.3*Math.PI);
            plane.position.copy(meshCoord2.as(view.referenceCrs));
            view.tileLayer.object3d.add( plane );

            setupLoadingScreen(viewerDiv, view);

            var menuGlobe = new GuiTools('menuDiv', view, 300);
            
            // Add a debug UI
            var d = new debug.Debug(view, menuGlobe.gui);
            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);

        </script>
    </body>
</html>

Thanks in advance and all the best.
Carsten


_______________________________________________
ITowns-user mailing list
[hidden email]
https://lists.osgeo.org/mailman/listinfo/itowns-user
Reply | Threaded
Open this post in threaded view
|

Re: Shadows in iTowns

Gérald Choqueux
Hello

you need to enable renderer shadow map

view.mainLoop.gfxEngine.renderer.shadowMap.enabled = true;
view.mainLoop.gfxEngine.renderer.shadowMap.type = itowns.THREE.PCFShadowMap;


and move the light over the objects

var cP = view.controls.getLookAtCoordinate();
cP.altitude += 100;
sun.position.copy(cP.as(view.referenceCrs));

Beware the itowns ground doesn't handle shadows yet.

best regards






De : ITowns-user [[hidden email]] de la part de Carsten Oldenburg [[hidden email]]
Envoyé : vendredi 19 juin 2020 08:51
À : [hidden email]
Objet : [iTowns-user] Shadows in iTowns

Dear all,


is it possible to enable casting shadows in iTowns especially using 3DTiles?

Here is a minimal example with three.js 3D objects in iTowns.
I've set the castShadow and receiveShadow properties to true and added a new DirectionalLight casting shadows.

Might be possible that I've forgotten something!?!


<html>
    <head>
        <title>Shadow</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="examples/css/example.css">
        <link rel="stylesheet" type="text/css" href="examples/css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="examples/js/GUI/GuiTools.js"></script>
        <script src="dist/itowns.js"></script>
        <script src="examples/js/GUI/LoadingScreen.js"></script>
        <script src="dist/debug.js"></script>
        <script src="dist/three.min.js"></script>

        <script type="text/javascript">
            // Define initial camera position
            var positionOnGlobe = { longitude: 6.956944, latitude: 50.938056, altitude: 5000 };
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 6.978090, 50.922810), range: 1000, // Deutzer Hafen
                //tilt: 45,
                tilt: 10,
            }

            var viewerDiv = document.getElementById('viewerDiv');
            
            var scene = new THREE.Scene();
            scene.castShadow = true;
            scene.receiveShadow = true;
            
            var globeOptions = {
                scene3D : scene,
            }
            var view = new itowns.GlobeView(viewerDiv, placement, globeOptions);

            // delete original sun
            view.tileLayer.object3d.remove (view.tileLayer.object3d.children[0]);
            
            // Add new sun casting shadows
            var sun = new THREE.DirectionalLight( 0xffffff, 1, 100 );
            sun.position.set(9.3194, 0.30187, 4.0399);
            sun.castShadow = true;
            sun.updateMatrixWorld(true);
            view.tileLayer.object3d.add(sun);
            
            // position of the mesh
            var cameraTargetPosition = view.controls.getLookAtCoordinate();
            var meshCoord = cameraTargetPosition;
            meshCoord.altitude += 30;

            //Create a sphere that cast shadows (but does not receive them)
            var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
            var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
            var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
            sphere.castShadow = true; //default is false
            sphere.receiveShadow = true; //default
            sphere.position.copy(meshCoord.as(view.referenceCrs));
            view.tileLayer.object3d.add( sphere );

            var meshCoord2 = cameraTargetPosition;
            meshCoord2.altitude -= 10;

            meshCoord2.latitude += 0.01;

            //Create a plane that receives shadows (but does not cast them)
            var planeGeometry = new THREE.PlaneBufferGeometry( 80, 80, 32, 32 );
            var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
            var plane = new THREE.Mesh( planeGeometry, planeMaterial );
            plane.castShadow = true; //default is false
            plane.receiveShadow = true;
            plane.rotateY(0.3*Math.PI);
            plane.position.copy(meshCoord2.as(view.referenceCrs));
            view.tileLayer.object3d.add( plane );

            setupLoadingScreen(viewerDiv, view);

            var menuGlobe = new GuiTools('menuDiv', view, 300);
            
            // Add a debug UI
            var d = new debug.Debug(view, menuGlobe.gui);
            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);

        </script>
    </body>
</html>

Thanks in advance and all the best.
Carsten


_______________________________________________
ITowns-user mailing list
[hidden email]
https://lists.osgeo.org/mailman/listinfo/itowns-user
Reply | Threaded
Open this post in threaded view
|

Re: Shadows in iTowns

Carsten Oldenburg

Hi Gerald,


thanks for your reply.


Everything is fine now!!


Best regards,

Carsten


---

Carsten Oldenburg, M.Sc.

Technische Hochschule Ostwestfalen-Lippe | University of Applied Sciences & Arts
Detmolder Schule für Architektur, Innenarchitektur und Stadtplanung

LivingLab Essigfabrik
Siegburger Straße 110, 50679 Köln

Forschungsschwerpunkt ’nextPlace’
Emilienstraße 45, 32756 Detmold
+49(0)5231-769 6032


Von: Gerald Choqueux <[hidden email]>
Gesendet: Montag, 22. Juni 2020 11:32:13
An: Carsten Oldenburg; [hidden email]
Betreff: RE:Shadows in iTowns
 
Hello

you need to enable renderer shadow map

view.mainLoop.gfxEngine.renderer.shadowMap.enabled = true;
view.mainLoop.gfxEngine.renderer.shadowMap.type = itowns.THREE.PCFShadowMap;


and move the light over the objects

var cP = view.controls.getLookAtCoordinate();
cP.altitude += 100;
sun.position.copy(cP.as(view.referenceCrs));

Beware the itowns ground doesn't handle shadows yet.

best regards






De : ITowns-user [[hidden email]] de la part de Carsten Oldenburg [[hidden email]]
Envoyé : vendredi 19 juin 2020 08:51
À : [hidden email]
Objet : [iTowns-user] Shadows in iTowns

Dear all,


is it possible to enable casting shadows in iTowns especially using 3DTiles?

Here is a minimal example with three.js 3D objects in iTowns.
I've set the castShadow and receiveShadow properties to true and added a new DirectionalLight casting shadows.

Might be possible that I've forgotten something!?!


<html>
    <head>
        <title>Shadow</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="examples/css/example.css">
        <link rel="stylesheet" type="text/css" href="examples/css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="examples/js/GUI/GuiTools.js"></script>
        <script src="dist/itowns.js"></script>
        <script src="examples/js/GUI/LoadingScreen.js"></script>
        <script src="dist/debug.js"></script>
        <script src="dist/three.min.js"></script>

        <script type="text/javascript">
            // Define initial camera position
            var positionOnGlobe = { longitude: 6.956944, latitude: 50.938056, altitude: 5000 };
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 6.978090, 50.922810), range: 1000, // Deutzer Hafen
                //tilt: 45,
                tilt: 10,
            }

            var viewerDiv = document.getElementById('viewerDiv');
            
            var scene = new THREE.Scene();
            scene.castShadow = true;
            scene.receiveShadow = true;
            
            var globeOptions = {
                scene3D : scene,
            }
            var view = new itowns.GlobeView(viewerDiv, placement, globeOptions);

            // delete original sun
            view.tileLayer.object3d.remove (view.tileLayer.object3d.children[0]);
            
            // Add new sun casting shadows
            var sun = new THREE.DirectionalLight( 0xffffff, 1, 100 );
            sun.position.set(9.3194, 0.30187, 4.0399);
            sun.castShadow = true;
            sun.updateMatrixWorld(true);
            view.tileLayer.object3d.add(sun);
            
            // position of the mesh
            var cameraTargetPosition = view.controls.getLookAtCoordinate();
            var meshCoord = cameraTargetPosition;
            meshCoord.altitude += 30;

            //Create a sphere that cast shadows (but does not receive them)
            var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
            var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
            var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
            sphere.castShadow = true; //default is false
            sphere.receiveShadow = true; //default
            sphere.position.copy(meshCoord.as(view.referenceCrs));
            view.tileLayer.object3d.add( sphere );

            var meshCoord2 = cameraTargetPosition;
            meshCoord2.altitude -= 10;

            meshCoord2.latitude += 0.01;

            //Create a plane that receives shadows (but does not cast them)
            var planeGeometry = new THREE.PlaneBufferGeometry( 80, 80, 32, 32 );
            var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
            var plane = new THREE.Mesh( planeGeometry, planeMaterial );
            plane.castShadow = true; //default is false
            plane.receiveShadow = true;
            plane.rotateY(0.3*Math.PI);
            plane.position.copy(meshCoord2.as(view.referenceCrs));
            view.tileLayer.object3d.add( plane );

            setupLoadingScreen(viewerDiv, view);

            var menuGlobe = new GuiTools('menuDiv', view, 300);
            
            // Add a debug UI
            var d = new debug.Debug(view, menuGlobe.gui);
            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);

        </script>
    </body>
</html>

Thanks in advance and all the best.
Carsten


_______________________________________________
ITowns-user mailing list
[hidden email]
https://lists.osgeo.org/mailman/listinfo/itowns-user