デジタル・フロンティア-Digital Frontier | DF TALK
多彩な表現力の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はこれまで解説し
HTML5で色分解した写真をWebGLで3D表示するAway3Dデモ - ICS MEDIA
先日開催したAway3D勉強会の発表のフォローアップ記事となります。 写真をRGB3原色に分解して3次元で表示するHTML5 + WebGLのデモを作ってみました。ステージをドラッグすると写真が赤・青・緑の3原色に分解されて表示されます。ライブラリはJSライブラリの「Away3D TypeScript」を使っています。 デモ ソースコード (TypeScript 1.0) このデモを通して紹介したいのは次の3つです。 色分解のロジック Flashライクで高機能なHTML5版BitmapDataクラスの紹介 Flash Stage3Dにフォールバック可能なAway3D TypeScriptのレンダラー 以下で、それぞれについて詳しく紹介します。 実装方法 このデモでは、img要素で画像を読み込み、それを色分解し、3D空間に表示しています。 1. 色分解のロジック Web上の多くの画像は赤・青
初心者でも絶対わかる、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ファイルを手に入れま
#nav=-5.16,83.42,300,0,0,0,0&sel=p:;h:;s:1019;c:-0.6;o:-0.75&layers=0,0,9460,5676,0,0,10000,0,0,0,0
ZygoteBody™ & 3D data © 2012-2017 Zygote Media Group, Inc. Quick guide Navigation Click+drag with the mouse to rotate, scroll to zoom. Or use the buttons in the upper left. The Home button resets the view. Change from Capsule to Orbit mode in the upper right to enable full 3d rotation and hold Ctrl down to pan the view. (Premium users only) Slider Use the opacity slider on the left to reveal layer
HTML5＋WebGLで医学・解剖学が学べる！3D人体解剖図ウェブアプリ「BIODIGITAL HUMAN」 - Chrome Life
私たち人間の体はとても複雑で神秘的な造りをしています。 医学が進歩しても、いまだに解明できていない病気も多くあります。 そんな不思議のベールにつつまれた人体ですが、最新のWebテクノロジーを使って医学・解剖学の分野で理解を深めるためのツールが登場してきています。 今回ご紹介するのは、HTML5とWebGLのウェブ標準技術を使った人体解剖図のChromeウェブアプリ「BIODIGITAL HUMAN」です。 「BIODIGITAL HUMAN」は、詳細な医療の説明と組み合わせて人間の構造を3Dで学ぶことができる教育ツールです。 Googleからも同じような3Dの人体解剖図ツール「Google Body Browser」がラボで登場しましたが、Google Mapの人体解剖図版といったレベルでしかありませんでした。 BIODIGITAL HUMANは、人体解剖図が見れるだけでなく、臓器１つ１つ
HTML5とあわせてチェックしておきたい、ブラウザだけで3D表現できる「WebGL」体感デモ各種 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
1990年代初頭から記者としてまた起業家として30年以上にわたりIT業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長を経て現在に至る。 [読了時間:4分] 期待高まるHTML5。平行してチェックしておきたいのが2D/3Dグラフィックスをウェブブラウザだけで表現できる「WebGL」というAPI(アプリケーション・プログラミング・インターフェイス)だ。HTML5で制定されるCanvas要素を使用しグラフィックを描画するもので、WebGLを搭載した最新のウェブブラウザであれば、専用
［SIGGRAPH］ついにDirectX 11を凌駕した!? Khronosに聞く「OpenGL 4.2」の正体
［SIGGRAPH］ついにDirectX 11を凌駕した!? Khronosに聞く「OpenGL 4.2」の正体 ライター：西川善司 Khronosに属するメンバー企業を示したスライド Khronosが規格策定に携わっているオープンスタンダードAPI群がこのスライドに示されている Khronos Group（クロノスグループ，以下Khronos）は，組み込み機器向けのオープンスタンダードAPIワーキンググループとして2000年に発足した団体である。活動初期においては，組み込み機器向けのOpenGL ESの規格策定に注力していたが，2006年に本家OpenGLの規格策定を行っていたOpenGL ARB（Architecture Review Board）と統合することになった。その結果，Khronosは，クロスプラットフォーム対応のオープンスタンダードAPIの規格化団体として，最も大きなもの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。