itowns/examples/effects_postprocessing.html at 378bf4040f2729fc5274adf4de2a265cfa3e9fdc · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>

<head>
    <title>Itowns - postprocessing</title>

    <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>
    <script src="../dist/itowns.js"></script>
    <script src="js/GUI/LoadingScreen.js"></script>

    <script type="text/javascript">
        const graph = itowns.graph;

        // Graph showcase
        const outerGraph = new graph.Graph();

        // iTowns namespace defined here
        const placement = new graph.InputNode({
            coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
            range: 25_000_000,
        }, graph.BuiltinType.Placement);

        const viewerDiv = new graph.InputNode(document.getElementById('viewerDiv'));
        const viewNode = new graph.GlobeViewNode(viewerDiv, placement);
        outerGraph.set({placement, viewerDiv, viewNode});

        const div = viewerDiv.getOutput();
        const view = viewNode.getOutput('view', outerGraph);
        setupLoadingScreen(div, view);

        const renderer = {node: viewNode, output: 'renderer'};
        const render = new graph.RenderViewNode({node: viewNode, output: 'view'});
        outerGraph.set({render});

        // Post-processing subgraph
        const postProcessingGraph = new graph.Graph();

        // Coast highlight uniforms
        const sharpenWeight = new graph.InputNode(5);
        const sharpenOffset = new graph.InputNode(new itowns.THREE.Vector2(3., 0.));
        postProcessingGraph.set({sharpenWeight, sharpenOffset});

        // Screen shaders
        const warp = new graph.ScreenShaderNode(render, renderer, {
            fragmentShaderParts: {
                auxCode: /* glsl */`
uniform vec2 resolution;
`,
                main: /* glsl */`
float frequency = 50.;
float strength = 5.;

vec2 uv = sqrt(2. * abs(vUv - 0.5));
if (resolution.x > resolution.y) {
    uv.x *= resolution.x / resolution.y;
}
vec2 squv = uv * uv;
vec2 uvOffset = vec2(
    sin(floor(frequency * squv.x)),
    cos(floor(frequency * squv.y))
);
return texture2D(tDiffuse, vUv + uvOffset * vec2(strength, strength) / resolution);
`
            },
        });

        const coastHighlight = new graph.ScreenShaderNode(warp, renderer, {
            fragmentShaderParts: {
                uniforms: {uWeight: sharpenWeight, uOffset: sharpenOffset},
                auxCode: /* glsl */`
uniform vec2 resolution;

float getAvg(vec4 color) {
    return (color.r + color.g + color.b) / 3.0;
}
`,
                main: /* glsl */`
float mid = getAvg(color);
float left = getAvg(texture2D(tDiffuse, vUv - uOffset / resolution));

float diff = uWeight * (mid - left);
float avg = (mid + left) / 2.0;

float smoothed = max(0., diff - avg);
float blueness = color.b / (color.r + color.g + color.b);

return color + blueness * vec4(smoothed, smoothed, smoothed, 1.0);
`
            },
        });

        const greyscale = new graph.ScreenShaderNode(coastHighlight, renderer, {
            fragmentShaderParts: {
                main: /* glsl */`
float avg = (color.r + color.g + color.b) / 3.;
return vec4(avg, avg, avg, 1.0);`
            },
        });

        const uvcolor = new graph.ScreenShaderNode(greyscale, renderer, {
            fragmentShaderParts: {
                main: /* glsl */`
float r = min(color.r * vUv.x, 1.);
float g = min(color.g * vUv.y, 1.);
return vec4(r, g, color.b, 1.0);
                `,
            },
        });

        postProcessingGraph.set({warp, coastHighlight, greyscale, uvcolor});

        const postProcessingSubGraph = graph.SubGraph.from(postProcessingGraph, 'Post-processing');
        const postProcessingGraphNode = new graph.SubGraphNode(outerGraph, postProcessingSubGraph, {
            uvcolor: {
                node: uvcolor,
                output: 'value',
            },
        });

        const renderFBO = new graph.ScreenShaderNode({node: postProcessingGraphNode, output: 'uvcolor'}, renderer, {toScreen: true});
        outerGraph.set({postProcessingGraphNode, renderFBO});

        // We expect coastHighlight, greyscale and uvcolor to be merged
        // warp will not be merged as the merged node from the previous merges violates the no-offset access invariant
        postProcessingSubGraph.optimize(uvcolor);

        const graphNodeIds = graph => Array.from(graph.nodes.entries()).map(([name, n]) => `${name}: ${n.id}`).join('\n');

        let frame = 0;
        view.render = function render() {
            outerGraph.run(frame++, renderFBO);
            // Reach cruising speed before dumping so timing information is accurate
            if (frame == 10) {
                window.open(outerGraph.dumpDotGraphvizLink(), '_blank', 'popup');
            }
        };

        itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
            config.source = new itowns.WMTSSource(config.source);
            var layer = new itowns.ColorLayer('Ortho', config);
            view.addLayer(layer);
        });
        itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT.json').then(function _(config) {
            config.source = new itowns.WMTSSource(config.source);
            console.dir(config.source);
            var layer = new itowns.ElevationLayer(config.id, config);
            view.addLayer(layer);
        });
    </script>
</body>

</html>