タグ

言語|WebGLに関するyoshia_eのブックマーク (4)

  • WebGL 入門 その1

    最近 WebGL の勉強を始めまして、doxas さんが主催している WebGL 勉強会に参加している。 WebGL、かなりややこしい感じなので、受講した日はその日の情報を咀嚼しようと思った。 (有料の講座ですが、こういうの書くのは講師の方に許可得てます。) 今日は WebGL の基的な部分の話だった。 基の部分で既に無事死亡している。 WebGL とは GPU に直接アクセスできるブラウザに組み込まれた API で、OpenGL というネイティブで動作するグラフィック API を、ブラウザから呼び出すパイプ的な存在。 直接 GPU を利用できるので、すっごい高速。ぬるぬるしてるのはそういうことなんですね。 ただ、ブラウザに組み込まれた API ということは、つまりブラウザ側の実装に依存しているというわけで、ブラウザ間の差異や、そもそも OS レベルで無効化されてることもあるそう。 ま

  • 立体地図(地理院地図3D・触地図)

    地理院地図の「3D機能」や地理院地図Globeでは、「誰でも・簡単に・日全国どこでも」3次元で見ることができます。 地理院地図の3D機能では3Dプリンタ用のデータをダウンロードすることもできます。 サイトでは、立体地図の使い方や立体模型、触地図の作り方をご紹介します。 最新情報 立体地図を作る(ダウンロード編)に日の典型地形の立体模型を追加しました。(平成30年7月4日) 地理院地図を改良し、地下の空中の3D表示や、3D表示範囲の選択が可能になりました。(平成29年3月14日) 地理院地図Globeを正式公開しました。(平成29年3月14日) 海外の地形も3D表示できるようになりました。(平成28年12月21日) 地理院地図3Dのプログラムの修正について(平成28年11月21日)

  • 初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>

    初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> 小山田 晃浩(株式会社 ピクセルグリッド) WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま

    初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>
  • HTML5、CSS3だけじゃない!ブラウザで実装できるスゴい技術14選 【WebGL】 | らふらく^^ ~ブログで飯を食う~

    2 CSSだけでかわいいボタン最近のトレンドともいえる画像を使わずにCSSだけでリッチな素材をつくった作品。 スマホサイトでは、読み込みを速くするためにこうした技術が必要になってくるので、ぜひ覚えたい所です。 ハートの部分は難しそうだなー。 かわいいふきだし 3 CSSだけでゲームCSSだけでシューティングゲームがつくれてしまうという驚きを与えてくれる作品。 :hover, :cehecked をうまく使っています。 CSS3 OF THE DEAD 4 CSSでワニワニパニックCSSだけでワニワニパニックがつくれてしまうんですね!驚きです。 ゲームセンターにいる感覚を味わせてくれます。 CSS PANIC 5 実写と見間違う桜桜が舞う美しすぎるアニメーションです。 動画と見分けがつかないくらいにキレイ! WebGLを使っているようです。 Amazing Sakura 6 「デザインあ」

    HTML5、CSS3だけじゃない!ブラウザで実装できるスゴい技術14選 【WebGL】 | らふらく^^ ~ブログで飯を食う~
  • 1