itowns/examples/effects_postprocessing.html at dd5453e915f97011b060cad6c7ee486b018c5547 · iTowns/itowns · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
    <head>
        <title>Itowns - postprocessing</title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js",
                "GuiTools": "./jsm/GUI/GuiTools.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.182.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.182.0/examples/jsm/"
            }
        }
        </script>

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

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <!-- from https://github.com/mrdoob/three.js/blob/master/examples/js/shaders/DotScreenShader.js -->
        <script type="x-shader/x-vertex" id="vertexshader">
            varying vec2 vUv;

            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            }
        </script>

        <script type="x-shader/x-fragment" id="fragmentshader">
            uniform vec2 center;
            uniform float angle;
            uniform float scale;
            uniform vec2 tSize;

            uniform sampler2D tDiffuse;

            varying vec2 vUv;

            float pattern() {

                float s = sin( angle ), c = cos( angle );

                vec2 tex = vUv * tSize - center;
                vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;

                return ( sin( point.x ) * sin( point.y ) ) * 4.0;
            }
            void main() {
                vec4 color = texture2D( tDiffuse, vUv );
                float average = ( color.r + color.g + color.b ) / 3.0;
                gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
            }
        </script>

        <script type="module">

            import GuiTools from 'GuiTools';
            import setupLoadingScreen from 'LoadingScreen';
            import * as THREE from 'three';
            import * as itowns from 'itowns';
            import * as debug from 'debug';
            import * as itowns_widgets from 'itowns_widgets';
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
                range: 25000000,
            }


            // iTowns namespace defined here
            var viewerDiv = document.getElementById('viewerDiv');
            var view = new itowns.GlobeView(viewerDiv, placement);

            // Simple postprocessing setup
            //
            var postprocessScene = new THREE.Scene();
            var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), null);
            var cam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 10);

            setupLoadingScreen(viewerDiv, view);

            quad.frustumCulled = false;
            quad.material = new THREE.ShaderMaterial({
                uniforms: {
                    tDiffuse: { value: null },
                    tSize: { value: new THREE.Vector2(256, 256) },
                    center: { value: new THREE.Vector2(0.5, 0.5) },
                    angle: { value: 1.57 },
                    scale: { value: 1.0 },
                },
                vertexShader: document.getElementById('vertexshader').textContent,
                fragmentShader: document.getElementById('fragmentshader').textContent,
            });
            postprocessScene.add(quad);

            view.render = function render() {
                var g = view.mainLoop.gfxEngine;
                var r = g.renderer;
                r.setRenderTarget(g.fullSizeRenderTarget);
                r.clear();
                r.render(view.scene, view.camera3D);

                quad.material.uniforms.tDiffuse.value = g.fullSizeRenderTarget.texture;
                quad.material.uniforms.tSize.value.set(
                    g.fullSizeRenderTarget.width, g.fullSizeRenderTarget.height);

                r.setRenderTarget(null);
                r.clear();
                r.render(postprocessScene, cam);
            };

            const orthoConfig = await itowns.Fetcher.json('./layers/JSONLayers/Ortho.json');
            orthoConfig.source = new itowns.WMTSSource(orthoConfig.source);
            var orthoLayer = new itowns.ColorLayer('Ortho', orthoConfig);
            view.addLayer(orthoLayer);
            const ignMntConfig = await itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT.json');
            ignMntConfig.source = new itowns.WMTSSource(ignMntConfig.source);
            var elevationLayer = new itowns.ElevationLayer(ignMntConfig.id, ignMntConfig);
            view.addLayer(elevationLayer);
            window.view = view;
            window.itowns = itowns;
            window.THREE = THREE;

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