2023,江端さんの技術メモ

単純だけど、これでオブジェクトを書いたり消したりすれば、実現できるかな?

 

<!doctype html>
<html>
<head>
    <title>Many Points with  leaflet Canvas</title>
    <meta charset="utf-8">

    <style>
        
        #map {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #333;
        }
    </style>

</head>
<body>
    <div id="map"></div>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="L.CanvasOverlay.js"></script>
    <script src="http://www.sumbera.com/gist/data.js" charset="utf-8"></script>


    <script>

        var points = data; // data loaded from data.js
        var leafletMap = L.map('map').setView([50.00, 14.44], 9);
        L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png")
            .addTo(leafletMap);

        L.canvasOverlay()
            .drawing(drawingOnCanvas)
            .addTo(leafletMap);

        function drawingOnCanvas(canvasOverlay, params) {
            var ctx = params.canvas.getContext('2d');
            ctx.clearRect(0, 0, params.canvas.width, params.canvas.height);
            ctx.fillStyle = "rgba(255,116,0, 0.2)";


            //for (var i = 0; i < data.length; i++) {
            for (var i = 0; i < data.length; i=i+300) {
                var d = data[i];
                if (params.bounds.contains([d[0], d[1]])) {
                    dot = canvasOverlay._map.latLngToContainerPoint([d[0], d[1]]);
                    ctx.beginPath();
                    //ctx.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
                    ctx.arc(dot.x, dot.y, 10, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.closePath();
                }
            }

            //for (var i = 0; i < data.length ; i++) {
            for (var i = 0; i < data.length ; i=i+10) {
                var d = data[i];
                if (params.bounds.contains([d[0], d[1]])) {
                    dot = canvasOverlay._map.latLngToContainerPoint([d[0], d[1]]);
					//ctx.beginPath();
					ctx.clearRect(dot.x-10, dot.y-10, dot.x+0, dot.y+0);
                    //ctx.closePath();
                }
            }


        };
    </script>
</body>
</html>

 

2023,江端さんの技術メモ

https://prideout.net/emulating-double-precision の ざっくり翻訳

頂点変換の精度を向上させる
WebGLとOpenGL ESは64ビット演算をサポートしていませんが、頂点シェーダーで少し足掻くだけでエミュレートできます。
まず、この記事に興味を持たれた方は、Patrick CozziとKevin Ringが出版した「3D Engine Design for Virtual Globes」というとても素晴らしい本に興味を持たれたのではないでしょうか。この本には、精度についての章があり、その他にも多くのことが書かれています。
地図画像を読み込むと、以下の2つのインタラクティブなWebGLキャンバスが表示されます。青い十字線は、バークレー・マリーナのすぐ北にあるセザール・チャベス公園の展望台です。ここは、私の2人の子供たちのお気に入りの場所で、十分に拡大すると見ることができます。Googleマップと同じように、ズームやパンをしてみてください。
子供たちが見えるくらいまで拡大すると、左のキャンバスでは十字線が揺れていますが、右のキャンバスでは揺れていないことに気がつくかもしれません。左のキャンバスでは従来のモデル・ビュー・プロジェクション・マトリックスを使用していますが、右のキャンバスでは MVP を計算する際にカメラが (0,0,0) にあるように見せかけ、バーテックスシェーダーで手動で変換を行っています。このためのGLSLを以下に示します。
ハイパートとローパートの2つのユニフォームを使って、目の位置をGPUに送信していることに注意してください。この2つのパーツを抽出するために、以下のCPUサイドのコードを使用することができます:
C言語ではなくJavaScriptを使用している場合、Float32Arrayを使用して、上記のスニペットで見られるdouble-to-floatキャストを行うことができるかもしれません。
64ビット頂点
これまで、64ビットのカメラ位置の扱い方について説明してきましたが、これは上記のデモで十分です。では、64ビットの頂点が必要な場合はどうでしょうか。この場合も、GPUに送る前に各2倍を2つの浮動小数点に分割することができます。この場合、VBOが2倍になり、バーテックスシェーダが少し複雑になるため、よりコストがかかります。
私はこれを完全にテストしたわけではありませんが、ドナルド・クヌース(Donald Knuth)の研究に基づく古い数学精度ライブラリであるDSFUN90で使用されている「ダブル・シングル」ルーチンをGLSLで移植したものがあります!
いくつかの脚注
このページの地図デモは、私が取り組んでいる小さなC99ライブラリを使い、MODULARIZE=1、PRECISE_F32=1のフラグを付けてEmscriptenで実行したものです。PRECISE_F32を使用しない場合、Emscriptenはfloat変数でもdoubleを使用するため、split_doubleのコードが壊れてしまいます。
デモ用のマップテクスチャを得るために、mapbox.comの本当に素晴らしいStatic maps APIを使用しました。

2022/07,江端さんの技術メモ

の後で、「一体、江端は何を考えているんだ」と思われるかもしれませんが、『宇都宮ライトレールの利用を拒否させるような、ダイクストラをどうやって作ろうか』と考えています ―― しかも、できるだけ手を抜いて。https://wp.kobore.net/%e6%b1%9f%e7%ab%af%e3%81%95%e3%82%93%e3%81%ae%e6%8a%80%e8%a1%93%e3%83%a1%e3%83%a2/post-6473/

ところで、今、いくつかDBを作っていますが、混乱しかけているので、メモを残しておきます。

utsu_tram_db  : 道路と鉄道の強制結合
utsu_tram_db2: 鉄道のコストを下げて、宇都宮ライトレールを優先的に選ばれるようにした
utsu_tram_db3: 宇都宮ライトレールを単線にして、取り扱いをラクにした

ただ、今、ここで、バスが宇都宮ライトレールの上を驀進するようになってきましたので、これを何とかしないといけなくなりました。

ここで逆転の発想で、

utsu_tram_db4: 宇都宮ライトレールを誰も使いたくなくなるくらいに、コストを爆上げしてやればいい

と気がつきました。

で、utsu_tram_db3と、utsu_tram_db4を併用してやれば良い、と気がつきました。


この続きを記載したのですが、反映に失敗したようです。

という訳で簡単に説明しますと、utsu_tram_db3のコスト(現在0.2倍)を、逆に100倍にしたものをutsu_tram_db4として作成しました。現在上手く動いています(色々失敗もしましたが、それを書き残す気力は、もうありません。この週末、20時間以上コーディングしていて、フラフラです)


ちなみに、上記の作業で作ったデータベースを、他の人に渡す為に、以下の作業を行いました。

# pg_dump -U postgres -p 15432 utsu_tram_db3 > utsu_tram_db3.sql
# pg_dump -U postgres -p 15432 utsu_tram_db4 > utsu_tram_db4.sql

で作った、2つのデータベースのダンプ(utsu_tram_db3.sqlと、utsu_tram_db4.sql)を圧縮したのが、こちら。

utsu_tram_db.zip

まず、
create database utsu_tram_db3;
\c utsu_tram_db3
create extension postgis;
create extension pgrouting;
(utsu_tram_db4についても同じ)

としておいてから

これをutsu_tram_db.zipを解凍して、

# psql -U postgres -p 15432 utsu_tram_db3 < utsu_tram_db3.sql
# psql -U postgres -p 15432 utsu_tram_db4 < utsu_tram_db4.sql

で、PostgreSQLにインポートできます(source番号なども完全一致する(はず))。

2023,江端さんの技術メモ

■wsl2は通常状態ではdockerにアクセスできない。
→ Docker Desktopで、wsl2を使えるようにチェックを付ける

■wsl2からpsqlを使えるようにできるように、"sudo apt psql なんとか"で、psqlをインストールしておく
→ 要するに、wsl2からDBアクセスできなければ、お話にならない
こんなエラーで面倒な目にあった(なんか色々やっているうちに動くようになった)

psql: error: connection to server at "localhost" (::1), port 15432 failed: Connection refused (0x0000274D/10061)
Is the server running on that host and accepting TCP/IP connections?
connection to server at "localhost" (127.0.0.1), port 15432 failed: Connection refused (0x0000274D/10061)
Is the server running on that host and accepting TCP/IP connections?

とか、

psql: error: connection to server on socket "/var/run/postgresql/.s.PGSQL.5432" failed: No such file or directory

などが出てくるが、やっかいなことに、DBを3回くらい作り直すと、直っていたりするので、原因が特定できないことが多い。

T.B.D.