Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita
はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはこちら サンプルコードはこちら 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・加工等して利用する場合の記載例）「新宿駅周辺屋内地図データ」（国土交通省）（https://www.geospatial.jp/ckan/dataset/mlit-i
Three.jsでCurl Noise - Qiita
はじめに GLSLを触り始めるとやっぱりやりたくなりますよね。Curl Noise。 残念なことにWebGLではまだCompute Shaderは対応されてない状況です。(WebGL2.0から対応するらしい） ですが、Three.jsにはGPUComputationRendererというものございまして、誰でも簡単に粉を飛ばせます。 今回作成するものです。gitはこちら。 また、今回はCurl Noiseの説明というよりかはThree.jsでGPUComputationRendererを使ってGPGPUをすることについて解説します。 実装の大まかな説明 Curl Noiseのようなパーティクルは少なくとも1万くらいのパーティクルを出すことが多いですが、普通にThree.jsでオブジェクトを生成、位置の更新を行うと非常に重い、というか生成すらままならないかもしれません。 そこで、GLSLの出
THREE.MeshLineで、ヌルヌル動く線を作ろう！ - 日本最大級のHR・フリーランスメディア Workship MAGAZINE
デモページ ソースダウンロード 線を使ったアニメーションは、流れ星や紙吹雪、風の動きなど、さまざまなモチーフの表現をより豊かにしてくれます。 今回はTHREE.MeshLineを使い、リボンのように滑らかに線が動くアニメーションを作る方法を、5つのデモとともにご紹介します。オリジナルのアニメーションを作る際は、ぜひ参考にしてみてください。 THREE.MeshLineとは 筆者は2年前から、Jaume Sanchez EliasがThree.js用に作成したライブラリ『THREE.MeshLine』を使用して、WebGLでヌルヌルと動く線を作りはじめました。 THREE.MeshLineの特徴は、Three.jsが長年抱えてきた「線の幅が変更できない」という問題に取り組んでいる点にあります。MeshLineは、幅のパラメーターをサポートしていないGL_LINEメソッドのかわりに、ビルボード
[Three.js] Three.jsでシェーダー入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに デモページ Three.jsやBabylon.jsのようなWebGLライブラリで、シェーダーを利用すると表現力が向上します。 シェーダーは難解です。これから学習を始める人にとって、どこから手をつけていいのかわからなくなります。WEB上にはシェーダーを扱ったさまざまな記事がありますが、どのような読者を想定して書かれているかは千差万別です。著者が想定している前提知識を持っておらず、読者が内容を理解できないことがあります。 この記事ではThree.jsを利用することを前提に、シェーダーを利用してマテリアルを自作するまでの方法を解説し
![[Three.js] Three.jsでシェーダー入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/12e2e1d4d933c594a8b8bb845ccaf0bd9a51927a/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGOTU1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTY1NjcyNTk3Mj9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9ZmQzZmUwMjhhYzI4NGRmZjRiMDczODNkZjUxZGNiNGE%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D2aaf2d91684a99553cabbb9aa5259ccb%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCVGhyZWUuanMlNUQlMjBUaHJlZS5qcyVFMyU4MSVBNyVFMyU4MiVCNyVFMyU4MiVBNyVFMyU4MyVCQyVFMyU4MyU4MCVFMyU4MyVCQyVFNSU4NSVBNSVFOSU5NiU4MCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWU3MjNhOGYyNzQzZDc3OGE0NTIwMDM1ZDIwNmUxYzli%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBtYXNhdG9fbWFraW5vJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MzRlM2M1YWQ2MmQ1MGZkYzY0ODU1NmViNjA1YmY3ZDc%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De4913d058ca414c4b5e0332b740aebcd)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
