iTowns · HoloTheDrunk · May 6, 2024 · May 7, 2024 · May 7, 2024 · May 13, 2024
diff --git a/.babelrc b/.babelrc
@@ -1,11 +1,6 @@
 {
     "presets": [
-        ["@babel/preset-env", {
-            "targets": {
-                "browsers": "defaults and supports webgl2"
-            },
-            "modules": false
-        }]
+        ["@babel/preset-typescript"]
     ],
     "plugins": [
         ["module-resolver",  { "root": ["./src"] } ],
@@ -17,9 +12,11 @@
                 ".css"
             ]
         }],
-        ["module-extension-resolver"],
-        ["@babel/plugin-transform-runtime", {
-            "regenerator": false
+        ["module-extension-resolver", {
+            "srcExtensions": [
+                ".ts",
+                ".js"
+            ]
         }],
         ["minify-replace", {
             "replacements": [{

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,20 +1,25 @@
 module.exports = {
     root: true,
+    plugins: [
+        '@typescript-eslint',
+    ],
+    parser: '@typescript-eslint/parser',
     extends: [
         'eslint-config-airbnb-base',
         'eslint-config-airbnb-base/rules/strict',
+        'plugin:@typescript-eslint/recommended',
     ],
     parserOptions: {
-        ecmaVersion: 13,
+        ecmaVersion: 2023,
         sourceType: 'module',
         ecmaFeatures: {
             impliedStrict: true,
         },
     },
     settings: {
         'import/resolver': {
-            webpack: {
-                config: './webpack.config.cjs',
+            'babel-module': {
+                extensions: ['.js', '.ts'],
             },
         },
     },
@@ -25,9 +30,22 @@ module.exports = {
         commonjs: true,
     },
     rules: {
+        'import/extensions': [
+            'off',
+        ],
         'no-trailing-spaces': 'warn',
         'padded-blocks': 'warn',
-        'no-unused-vars': 'warn',
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': [
+            'warn',
+            {
+                argsIgnorePattern: '^_',
+                varsIgnorePattern: '^_',
+                caughtErrorsIgnorePattern: '^_',
+            },
+        ],
+        '@typescript-eslint/no-this-alias': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
         'no-plusplus': 'off',
         // this option sets a specific tab width for your code
         // http://eslint.org/docs/rules/indent
@@ -108,6 +126,18 @@ module.exports = {
         // change default-param-last to on, but there are several breaking changes or default params to add.
         'default-param-last': 'off',
     },
+    overrides: [
+        {
+            files: ['*.ts'],
+            rules: {
+                'valid-jsdoc': 'off',
+                '@typescript-eslint/explicit-function-return-type': [
+                    'error',
+                    { allowExpressions: true },
+                ],
+            },
+        },
+    ],
     globals: {
         __DEBUG__: false,
     },

diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@ potree
 coverage
 .nyc_output/
 /src/ThreeExtended/
+types/
diff --git a/babel.config.json b/babel.config.json
@@ -0,0 +1,5 @@
+{
+    "babelrcRoots": [
+        "."
+    ]
+}
diff --git a/examples/effects_postprocessing.html b/examples/effects_postprocessing.html
@@ -1,113 +1,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>
-        <!-- 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 );
+<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');
             }
-        </script>
-
-        <script type="text/javascript">
-            var placement = {
-                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
-                range: 25000000,
-            }
-
+        };
+
+        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>
 
-            // iTowns namespace defined here
-            var viewerDiv = document.getElementById('viewerDiv');
-            var view = new itowns.GlobeView(viewerDiv, placement);
-
-            // Simple postprocessing setup
-            //
-            var postprocessScene = new itowns.THREE.Scene();
-            var quad = new itowns.THREE.Mesh(new itowns.THREE.PlaneGeometry(2, 2), null);
-            var cam = new itowns.THREE.OrthographicCamera(-1, 1, 1, -1, 0, 10);
-
-            setupLoadingScreen(viewerDiv, view);
-
-            quad.frustumCulled = false;
-            quad.material = new itowns.THREE.ShaderMaterial({
-                uniforms: {
-                    tDiffuse: { value: null },
-                    tSize: { value: new itowns.THREE.Vector2(256, 256) },
-                    center: { value: new itowns.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);
-            };
-
-            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);
-                var layer = new itowns.ElevationLayer(config.id, config);
-                view.addLayer(layer);
-            });
-        </script>
-    </body>
 </html>