Calmery.me

みっかぼうずにならないようがんばる

稲荷山登山チャレンジ(成功)

友達と京都旅行,伏見稲荷大社に行ってきた.以前来たときは時間がなくて本殿で引き返したのだけど今回は登ることができた.満足.夕方と翌日のお昼,合わせて二回登ったのだけど雰囲気が違っていて面白い.夜は本当に何か出そう.夕方から夜にかけては人も少ないし(暗くて危ないけど)いいかも.

きれいだった😆 #theta360 - Spherical Image - RICOH THETA
京都駅から稲荷駅までは JR の奈良行きに乗って二駅.近い.快速は停まらないみたい.初めは日も暮れかけていたので寄り道せずに登った.翌日は記録をとってみた.多少抜けはあるけどこんな感じ.これで歩いた距離は 7 キロらしい.

思い出というか,一度目は飲み物を買い忘れていて途中の自販機で買った.当然といえば当然なのだけど高い.飲み物は登る前に買った方がよさそう(当たり前)

翌日は参拝できるところは全て行こうと五円玉を三十枚ほど持っていったのだけど足りなかった.倍はいる.この日は休日で五円玉を作るのに京都駅近くのゆうちょでひたすら五円玉を引き出した.今思うともはや不審者だった.

手荷物は稲荷駅から本殿に向う途中,右手の参集殿にあるロッカーに預けた.駅のロッカーは全く空いてなかったけど,こっちはかなり空いていた.意外と知られてないのかも.

案内には山頂まで一時間と書いてあるけど,休まず歩いて 30 分くらい.思ったより近い.二回目はお参りしつつ,寄り道しつつだったので時間がかかった.登り始めたのが 11 時半,山頂に着いたのが 13 時半,本殿に戻ってきたのが 15 時で三時間半くらい.途中でご飯を食べたりお参りしたりで歩いたのは二時間くらいだと思う.

ところどころ寄り道するのが楽しい.力松社近くからいける清瀧はすごい.行ってよかった.ジブリに出てきそう.ただ帰りが登りできつい.
f:id:calmery:20170225034614j:plain
f:id:calmery:20170225012858j:plain
四ツ辻からは道が二つに分かれていた.どちらに行っても山頂に行くことはできる.だけどここは登ってきた方から見て右側の道に進んだ方が良さそう.まっすぐ行くと緩やかで楽かと思いきや最後にトドメを刺しにくる.鬼畜.ここを登るのは相当きつそう.

Post from RICOH THETA. - Spherical Image - RICOH THETA
楽しかった.また秋くらいに行きたい.春は花粉症で夏は暑い,冬は寒いし.秋くらいがちょうどいい.まあ人が多そうだけど.

伏見稲荷大社とは全く関係がないのだけど嵐山の トップページ|京都嵐山 鯛茶漬け専門店-鯛匠HANANA- で食べることができる鯛茶漬けがおいしい.本当においしい.お店が開く 30 分前に行ったからか待たずに食べることができた.あんまり遅いと待つことになるので早めに.というか予約しておけばいい.
f:id:calmery:20170225021237j:plain
友達と.わーい!すごーい!おいしー!

Post from RICOH THETA. - Spherical Image - RICOH THETA

Blenderでモデルを作りthree.jsで表示する

Blender で作成したモデルとアニメーションを three.js を使いブラウザ上で表示できたのでメモ.今月の 17,18 日に開催された 林業応援ハッカソン でブラウザ上でモデルを動かすのに必要だった.

準備

Blender にアドオンを追加する.これは three.js が提供するもので,このアドオンを使用すると three.js で使用できる JSON 形式でモデルを書き出せるようになる.README か Three.js の JSONLoader のメモ - Qiita を参考にする.というか見た方が早いと思う.

$ cp -r three.js-master/utils/exporters/blender/addons/io_three /Users/calmery/Library/Application\ Support/Blender/2.77/scripts/addons/io_three

アドオンを追加後,Blender の User Performance から Add-ons を開き,Import-Export: Three.js Format にチェックを入れれば three.js 用の JSON 形式に書き出せるようになる.
f:id:calmery:20161224234440p:plain
Blender の他にも 3ds MAX や Maya,Revit 用のアドオンもあるみたい.どれも README に手順が書かれているのでそれを見ながらやればできそう.

書き出す

わかりやすいようにキューブに色をつけた.
f:id:calmery:20161225000501p:plain
Export から Three.js(json) を選択する.
f:id:calmery:20161225041940p:plain
Face materials にチェックを入れて書き出す必要があるみたい.チェックを入れずに書き出してマテリアルが表示されず大変だった.
f:id:calmery:20161224234922p:plain

読み込む

three.js の JSONLoader を使い,書き出した JSON からモデルを読み込む.

<body></body>

<script src="resources/js/three.min.js"></script>
<script src="resources/js/TrackballControls.js"></script>
<script>
    let scene = new THREE.Scene()

    let renderer = new THREE.WebGLRenderer( { antialias: true } )
    renderer.setSize( 600, 400 )
    renderer.setClearColor( 0xffffff, 1 )
    document.body.appendChild( renderer.domElement )

    let camera = new THREE.PerspectiveCamera( 60, ( 600 / 400 ), 1, 1000 )
    camera.position.set( 0, 0, 300 )

    let directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 )
    directionalLight.position.set( 0, 150, 1000 )
    scene.add( directionalLight )

    let trackball = new THREE.TrackballControls( camera )

    let loader = new THREE.JSONLoader()
    loader.load( 'blenderToThreejs.json', ( geometry, materials ) => {
        let faceMaterial = new THREE.MeshFaceMaterial( materials )
        mesh = new THREE.Mesh( geometry, faceMaterial )
        mesh.position.set( 0, 0, 0 )
        mesh.scale.set( 50, 50, 50 )
        scene.add( mesh )

        let animation = ( function(){
            requestAnimationFrame( arguments.callee )
            renderer.render( scene, camera )
            trackball.update()
        } )()
    } )
</script>

ちゃんと表示することができた.
f:id:calmery:20161225001648p:plain
もし,書き出したモデルが正しく表示されない場合は Blender Three.js エクスポート その3( テクスチャなどがエクスポート出来ない場合) を参考にする.人のモデルを作成したまでは良かったが,頭だけ表示されてないなんてことにならないようにしたい(なった)

アニメーション

キューブが下に落ちていくアニメーションを作成した.
f:id:calmery:20161225012147p:plain
同様に Export の Three.js(json) から保存する.このとき Animation の Morph Animation と Settings の Textures にチェックを入れる必要がある.
f:id:calmery:20161225012207p:plain
f:id:calmery:20161225012204p:plain
アニメーションを再生できるように修正する.ほとんど Blender Three.js エクスポート その4( モーフアニメーション) そのままなのは気にしてはいけない.

loader.load( 'animation.json', ( geometry, materials ) => {
    // 全てのマテリアルのモーフターゲットの値を true にする
    for( let i=0, l=materials.length; i<l; i++ ) materials[i].morphTargets = true;

    let faceMaterial = new THREE.MeshFaceMaterial( materials )
    mesh = new THREE.Mesh( geometry, faceMaterial )
    mesh.position.set( 0, 0, 0 )
    mesh.scale.set( 50, 50, 50 )
    scene.add( mesh )

    let current_frame = 0,
        total_frame   = 50

    let animation = ( function(){
        requestAnimationFrame( arguments.callee )

        last_frame = current_frame
        current_frame++

        // 現在のフレーム数が合計のフレーム数以上になったら現在のフレームを始めに戻す
        if( total_frame <= current_frame ) current_frame = 0

        mesh.morphTargetInfluences[last_frame] = 0
        mesh.morphTargetInfluences[current_frame] = 1

        renderer.render( scene, camera )
        trackball.update()
    } )()
} )

動かしてみた.
f:id:calmery:20161225034936g:plain

まとめ

Blender で作成したモデルやアニメーションを three.js 上で動かすことができた.

three.jsと標高タイルで3Dマップを生成する

今日はクリスマスイブですね.皆様いかがお過ごしでしょうか.かく言う私はお布団にくるまり http://qiita.com/advent-calendar/2016/no-girlfriend を眺めています.お察しください.

ブラウザ上で現在位置を中心とした 3D マップを 国土地理院の標高タイルthree.js で作ることができたのでメモ.今月の 17,18 日に開催された 林業応援ハッカソン で作った.
github.com
流れとしてはまず現在位置を取得し,その取得した現在位置からタイル座標を求める.ちなみに私は初めてタイル座標というものを知った.このタイル座標や後々利用するピクセル座標については TrailNote : 座標の変換(世界座標、ピクセル座標、タイル座標、緯度・経度) が参考になる.次に求めたタイル座標を元に 国土地理院の標高タイル から標高データを取得し three.js で描画する.

タイル座標を求める

緯度と経度からタイル座標を求める.Showing pixel and tile coordinates  |  Google Maps JavaScript API  |  Google Developers を参考にした.

const createCoordinate = ( lat, lng ) => {
    const TILE_SIZE  = 256,
          ZOOM_LEVEL = 14
    return createInfoWindowContent( ( new google.maps.LatLng( lat, lng ) ), ZOOM_LEVEL, TILE_SIZE )
}

const createInfoWindowContent = ( latLng, zoom, tileSize ) => {
    const scale = 1 << zoom
    
    const worldCoordinate = ( ( latLng, tileSize ) => {
        const siny = Math.min( Math.max( ( Math.sin(latLng.lat() * Math.PI / 180) ), -0.9999 ), 0.9999 )
        return new google.maps.Point( tileSize * ( 0.5 + latLng.lng() / 360 ), tileSize * ( 0.5 - Math.log( ( 1 + siny ) / ( 1 - siny ) ) / ( 4 * Math.PI ) ) )
    } )( latLng, tileSize )

    const pixelCoordinate = new google.maps.Point( Math.floor( worldCoordinate.x * scale ), Math.floor( worldCoordinate.y * scale ) ),
          tileCoordinate  = new google.maps.Point( Math.floor( worldCoordinate.x * scale / tileSize ), Math.floor( worldCoordinate.y * scale / tileSize ) )

    return {
        lat            : latLng.lat(),
        lng            : latLng.lng(),
        zoomLevel      : zoom,
        pixelCoordinate: { x: pixelCoordinate.x, y: pixelCoordinate.y },
        worldCoordinate: { x: worldCoordinate.x, y: worldCoordinate.y },
        tileCoordinate : { x: tileCoordinate.x, y: tileCoordinate.y }
    }
}

標高データを取得する

タイル座標を使い,標高データを CSV で取得する.また,タイル座標に対応したテクスチャも取得することができる.ただし,国土地理院の標高タイルではズームレベルが 14 で固定されており,他のズームレベルでは標高データを取得することができないことに注意する.

標高データ
http://cyberjapandata.gsi.go.jp/xyz/dem/ZOOM_LEVEL/TILE_COORDINATE_X/TILE_COORDINATE_Y.txt
http://cyberjapandata.gsi.go.jp/xyz/dem/14/14547/6463.txt
テクスチャ
http://cyberjapandata.gsi.go.jp/xyz/relief/ZOOM_LEVEL/TILE_COORDINATE_X/TILE_COORDINATE_Y.png
http://cyberjapandata.gsi.go.jp/xyz/relief/14/14547/6463.png

取得した標高データは適当に処理して配列に変換する.

mapData = mapData.substring( 0, mapData.length-1 ).split( '\n' ).map( ( row ) => {
    return row.split( ',' ).map( ( height ) => {
        return parseFloat( height ) || -1
    } )
} )

あとは three.js の PlaneGeometry で元となる Plane を作成し,取得した標高データを元に各点の高さを変更する.

let geometry = new THREE.PlaneGeometry( 0, 0, xLength-1, yLength-1 )

for( let y=0; y<yLength; y++ )
    for( let x=0; x<xLength; x++ )
        geometry.vertices[x + ( y * xLength )] = { x: x, y: y, z: mapData[y][x] }

自分を中心とした 3D マップを生成する

現在位置からタイル座標を求める場合,自分の現在位置に対応したタイル座標を得ることができる.だがタイル上のどの位置にいても同じタイル座標を得てしまう.まあタイル座標というくらいだし当たり前なのだろうけど.またまた TrailNote : 座標の変換(世界座標、ピクセル座標、タイル座標、緯度・経度) を参考にした.自分の現在位置を元に 3D マップを作成しても自分を中心としたマップは作成されないのでいい感じにゴニョゴニョする.

仕方がないので差分をとって取得した標高データを合成する.タイル座標からピクセル座標を求めて現在位置のピクセル座標と比較する.自分がタイルのどの辺りにいるのかを調べて足りない標高データを取得するようにした.
f:id:calmery:20161224164312p:plain
もっとスマートにやりたかった.恥ずかしい.mori_hack/main.js at master · calmery/mori_hack · GitHub に頑張ったあとがある.

const targetTile = createCoordinate( position.lat, position.lng )

const difference = ( ( targetTile ) => {
    let t = targetTile.tileCoordinate,
        p = targetTile.pixelCoordinate

    let tileToLatLng = ( tx, ty, zoom ) => {
        let numOfTiles = Math.pow( 2, zoom ),
            x = tx / numOfTiles,
            y = ty / numOfTiles,
            latRadians = ( y - ( 1 / 2 ) ) / - ( 1 / ( 2 * Math.PI ) )
        return { lat: ( 2 * Math.atan( Math.exp( latRadians ) ) - Math.PI / 2 ) / Math.PI * 180,  lng: ( x - ( 1 / 2 ) ) / ( 1 / 360 ) }
    }

    let latLng = tileToLatLng( t.x, t.y, t.z ),
        tile = createCoordinate( latLng.lat, latLng.lng )

    return { x: p.x - tile.pixelCoordinate.x, y: p.y - tile.pixelCoordinate.y }
} )( targetTile )

const essentialTile = ( ( targetTile, difference ) => {
    let tx = targetTile.tileCoordinate.x,
        ty = targetTile.tileCoordinate.y

    let tiles = [ [], [] ],
        differenceFromBase = {}

    if( difference.x <= 128 && difference.y <= 128 ){
        tiles[0][0] = { x: -1, y: -1 }
        tiles[0][1] = { x:  0, y: -1 }
        tiles[1][0] = { x: -1, y:  0 }
        tiles[1][1] = { x:  0, y:  0 }

        differenceFromBase.x = 256 + difference.x
        differenceFromBase.y = 256 + difference.y
    } else if( difference.x > 128 && difference.y <= 128 ){
        ...
    } else if( difference.x <= 128 && difference.y > 128 ){
        ...
    } else if( difference.x > 128 && difference.y > 128 ){
        ...
    }

    return { tiles: tiles, difference: differenceFromBase }
} )( targetTile, difference )

足りない標高データを補うため合計で 4 回,標高データを取得する必要がある.配列に現在位置より求めたタイル座標からどの程度ずれているかの情報を格納している.上の図の場合,こんな配列になる.

[
    [{ x: -1, y: -1 }, { x:  0, y: -1 }],
    [{ x: -1, y:  0 }, { x:  0, y:  0 }]
]

この配列を元に標高データを取得し,あとはタイル座標から求めたピクセル座標と,現在位置のピクセル座標の差分を元に,足りない標高データを補った配列を作る.テクスチャも同様に 4 枚取得し canvas に貼り付けて切り取る.人吉駅を中心とするとこんな感じの 3D マップができる.f:id:calmery:20161224165333p:plain
ちょっとわかりにくいが中心に人吉駅がある.Google Map で見るとちゃんと中心にきていることがわかるかも.

まとめ

Unity を使って OpenStreetMap Japan | 自由な地図をみんなの手に/The Free Wiki World Map とかと組み合わせると面白そうだと思った.mori_hack/sample at master · calmery/mori_hack · GitHub にすぐに動かせるものがあるのでお試しあれ.