[B! webgl] nitoyonのブックマーク

地理院地図３D

※１　３Dプリンタ印刷用ファイルをダウンロードできます。 ※２　立体地図用ファイルがダウンロードできます。ローカル環境で閲覧される場合は、Firefox をご使用ください。 -　さらに１ステップ　- 「WebGL」を選択してダウンロードされるファイルのうち「texture.png」は通常の画像ファイルです。ペイントなどの描画ソフトで開き、線や文字を書き込んでオリジナル立体図を作ることもできます。また、座標付の画像を扱えるソフトでは、GPSの軌跡などを重ね合わせて保存すると、登山ルートなどが入った立体地図や立体模型を作ることができます。サンプルギャラリー各地方測量部おススメの場所です。イメージをクリックすると立体地図が開きます。ボタンをクリックすると大きなイメージでご覧いただけます。立体地図を閲覧するには、Internet Explorer 11、Google C

nitoyon 2014/03/19

まさかの国土地理院公式の WebGL (three.js) 使って地図を 3D 表示できるサービス。3Dプリンター用データダウンロード可。

リンク

WebGLの能力を引き出すプログラマブルシェーダー

WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ

nitoyon 2012/11/29

WebGL のシェーダーについて。http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics05/01.html の続編。

webgl

リンク

100,000 Stars

3,840°K (cooler) 7,300°K 42,000°K (hotter) B-V Stellar Color Index Temperatures in Kelvin The Sun is the star at the center of the Solar System. It is almost perfectly spherical and consists of hot plasma interwoven with magnetic fields.[12][13] It has a diameter of about 1,392,684 km,[5] about 109 times that of Earth, and its mass (about 2×1030 kilograms, 330,000 times that of Earth) accounts for

nitoyon 2012/11/16

ブラウザーで動く Powers of Ten の宇宙版。スケール変更・回転可能。WebGL (three.js)。

リンク

多彩な表現力のWebGLを扱いやすくする「Three.js」

多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（1/5 ページ） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎本連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し

nitoyon 2012/10/14

three.js で WebGL を使う方法紹介。

webgl

リンク

Interactive Globe: Small Arms Imports & Exports

This data visualization was produced by Google as part of the Google Ideas INFO (Illicit Networks, Forces in Opposition) Summit with support from the Igarape Institute and data provided by the Peace Research Institute Oslo (PRIO) small arms database. The visualization includes >1 million individual import and export data points from annual custom reports and maps the transfer of small arms, light

nitoyon 2012/08/08

輸出入のビジュアライズ。3D ぐりぐり。美しい。Google が作ってる模様。Chrome 推奨。three.js 仕様。

リンク

ASCII Google Street View (AMAZING)

If you are looking for a unique and interesting experience, you may want to check out this rendition of Google Street View in ASCII, which also includes some cool ASCII art. The device features an automatic rotation function, allowing users to focus on their desired content without the need to search for navigation arrows. Additionally, it offers a green color mode for enhanced viewing and a Matri

nitoyon 2012/07/31

WebGL と three.js でアスキーストリートビュー。Green mode が MATRIX を彷彿とさせる。

リンク

See 3D buildings in a whole new way with Google MapsGL

Post a Comment Note: Only a member of this blog may post a comment.

nitoyon 2012/04/27

WebGL 版 Google Maps で建物の高さを生かした 3D 表示が可能になった。”視差” を利用。

リンク

Chrome Experiments

Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web techno logy, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.

nitoyon 2012/02/06

Google Maps の衛星画像と高度データを使って地図をブロック表示。WebGL(three.js)使用。かわいい。

リンク

The Lessons - Hack The WebGL (WebGL勉強会)

Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode

nitoyon 2012/01/21

WebGL 入門チュートリアル。Learning WebGL (http://learningwebgl.com/blog/?page_id=1217)の和訳。

リンク

blog.alumican.net » Blog Archive » そろそろWebGLを・・・

そろそろWebGLでもやっておかないと食いっぱぐれるかなあ。というわけで、 » WebGL Chaser (Google Chrome推奨) マウスドラッグで視点切り替え、スペースキーでレンダリングモード切り替え。 WebGLといっても、mr.doob先生のThree.js経由です。ついでに、Three.jsを誰でも簡単に始められるようにテンプレートクラスを作っておきました。 » BasicView.js (GitHub) » BasicView Example 今年は色々な技術や感性を磨きつつ、それらを自分自身へ落とし込めるように頑張りますわー。

nitoyon 2012/01/21

three.js でかっこいい 3D 表示。

webgl

リンク

Streetview Stereographic

Shader Toy + Google Map + Panoramic Explorer Walk .. Keyboard ↑ ← ↓ → Rotate .. Click and drag left panel

nitoyon 2012/01/08

ストリートビューのパノラマ画像をステレオ投影。知ってる風景が小さな地球になって楽しい!!! WebGL 使用。

リンク

Google マップ GLベータ版をリリースしました

本日、ブラウザでより立体的な地図を体験できる Google MapsGL ベータ版をリリースしました。Web グラフィックライブラリー (WebGL) とは、プラグインを新たにインストールしなくても、お使いのブラウザでビジュアルやアニメーションをより鮮明にする表現できる新しいウェブ技術です。Google マップに WebGL を採用することで、建物のリアルな 3D 表示、画像間のスムーズな切り替え、ストリートビューへの滑らかな移行など、マップの使い心地が一段と向上しました。 Google Chrome 14 以上、または Firefox Beta 版等、一定要件を満たすブラウザとビデオカードがあれば、MapsGL の初期ベータ版をお試しいただけます。maps.google.co.jp にアクセスして [ 新しいマップテクノロジーを使ってみませんか ] をクリックしてください。 WebGL

nitoyon 2011/10/15

Google Maps WebGL 版。ズームのスムーズ化、45° Imageryの回転スムーズ化、ストリートビューへのスムーズな遷移。

リンク

Mozilla Re-Mix: どんなウェブページも3D化することができるFirefoxアドオン「Tilt」

Firefox 4以降からは、WebGL対応のグラフィックカードを搭載しているPCで3Dグラフィックスを描画することができるようになっています。この機能を利用して、どんなウェブページも3D化することができるようになるというアドオンが話題になっていましたので、ちょっと試してみました。 WebGLを利用して、表示しているウェブページを3D化する「Tilt」は、複数のMozilla開発者による「Developer Tools project」から生まれた実験的なアドオンです。 WebGL対応PCでFirefox 4以降を利用している環境にこのアドオンをインストールすると、任意のページを3D化し、マウスでグリグリと動かすことができるようになります。使い方は非常に簡単です。 3D化したいページを開き、Ctrl+Shift+L（Macの場合Cmd+Shift+L）を実行するか、ツールメニューから[

nitoyon 2011/07/22

HTML 階層を WebGL で 3D 化。/ 同じようなことを CSS Transform でやろうとしたけど激重だった。

リンク

はてなブックマーク

タグ

関連タグで絞り込む (12)

webglに関するnitoyonのブックマーク (13)

お知らせ

今週のはてなブックマーク数ランキング（2025年2月第4週）

今週のはてなブックマーク数ランキング（2025年2月第3週）

今週のはてなブックマーク数ランキング（2025年2月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!