You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
扱ってる内容は以下。 Canvas SVG WebGL 目次はこちら。 Chapter 1. Introducing HTML5 K.Moving beyond Basic HTML Bridging the Divide Getting Things Done with Web Workers and Web Sockets Application Cache Database API Web Storage Geolocation Getting Users’ Attention with Notifications Media Elements HTML5 Drawing APIs Conveying Information with Microdata Summary Chapter 2. Setting Up Your Development Environment Develo
@mike_acton pokes around WebGL and jQuery » #AltDevBlogADay http://altdevblogaday.org/2011/04/18/mike_acton-pokes-around-webgl-and-jquery/ このプラグインを使うとこんな感じで書ける様になるみたいです。 $.glProgram var bump_reflect_program_config = { VertexProgramURL: './shaders/bump_reflect.vs', FragmentProgramURL: './shaders/bump_reflect.fs', }; bump_reflect_program = new $.glProgram( gl, bump_reflect_program_config, ProgramLoa
travisglines.com Buy this domain. 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
Ext JSフレームワークなどで知られるSenchaがWebGL向けのライブラリ「PhiloGL」を作成したみたいです。 PhiloGL http://www.sencha.com/blog/introducing-philogl-a-webgl-javascript-library-from-sencha-labs/ ライセンスはMITライセンス。 プログラムの記述方法はこの様になるみたいです。 //Create application PhiloGL('canvasId', { camera: { position: { x: 0, y: 0, z: -7 } }, scene: { lights: { enable: true, ambient: { r: 0.5, g: 0.5, b: 0.5 }, directional: { color: { r: 0.7, g: 0.7, b
HMDのVR920には加速度センサーがついているので、それを使うと、顔をどこに向けているのか分かります。 その情報を、node.jsのアプリを経由してWebSocketに送ると、顔の向きでWebGL内の視点の方向を動かして、WebGL内を見渡せます。 不完全な部分が多いので試作ですが、別な作業に移るので一旦ポストします。 デモムービー 実現方法とソースコード 1.VR920 --> 2.VR920のSDKのサンプルを改造したアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(scene.js)を使って表示 "2.VR920のサンプルを改造したアプリ" HelloTracker2を改造。適当にフィルターしてTCPで投げる。 改造点のdiff: http://ndruger.lolipop.jp/ha
Kinectを買ったので、最近熱いWebGLの入力として使ってみた。 遊び・デモ用で汎用的には作ってない。 デモムービー ムービーではChrome10のWebGLでKinect入力の棒人間が動いてます。 Firefox4 / Safari5とかでも動きます。 Firefox3でも動かなくはないですが、WebGL非対応なので檄重です。 やってることとそれぞれのソースコード 1.Kinect --> 2.OpenNI(PC用のKinect対応フレームワーク)を使ったアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(three.js)を使って表示 最初はDepthJSを使おうとしたけど、特定のブラウザでしか動かない拡張らしく、OpenCVとかも面倒だと思っていた時に、下記のサイトでOpenNIから簡単
GDC, GTC and 3D city planning lead this week’s WebGL stories. CALL FOR SUBMISSIONS: WebGL artists, the call for submissions to the 3D Web Fest is open. Deadline to submit is April 8th (project doesn’t need to be done till late April). Don’t delay; submit today! Stockholm-based Agency9’s Johan Göransson and team just released support for iOS and Android for a streaming WebGL 3DMaps and City Planner
知らないことが多い分野のメモなので、間違いが多数あるかも。 方式 入力方式 インターリーブ方式 youtube 3dの"Interleaved rows, columns or checkerboard"に相当。縦or横orチェックの1pxごとに入れ替え。 サイドバイサイド方式 youtube 3dの"Side by side"に相当。視点のずれた画像を横に並べる。 アナグリフ方式 youtube 3dの"Colored Glasses"に相当。 フィールドシーケンシャル方式 インターリーブ方式と同じ? フレームシーケンシャル方式 フレームごとに入れ替え。HMDの入力方式では通常使われない。(2011/01/10 [修正]: VR920の機器への入力はこれが使われている)。3DTVの出力としてシャッター方式のメガネと同時に利用される。 HMDの例 Wrap920 PC以外のメディア機器用。
追記:例題の頂点シェーダーで何をしているか説明を追加しました 追記:動作環境の所修正しました、IE9では動作しません。 皆さんはじめまして、荒川智則です。この記事はJavaScript Advent Calendarの21日目です。 この記事では、Google I/OやFirefox Developers Conferenceで華麗なデモがバリバリ出てくるにもかかわらず、実際に使っている人が異常なまでに少ないWebGLについて書きます。対象読者はWebGLに興味があるor手を出してみたけどクソ難しそうだし既に諦めそう、という人です。 WebGLの概要 WebGLはOpenGL ES 2.0のグラフィックAPIをCanvas要素上で使える様にした物です。OpenGL ESはOpenGLの組み込み機器向けのサブセットで、iPhoneやandroid端末にも搭載されています。OpenGL ESな
とりあえず試作として下記で作った奴を3D化してみた。上下移動がないしアクションが地味なのでWebGLのデモに向かないけど。 http://d.hatena.ne.jp/ndruger/20101123/1290493871 デモ http://syspri.org/test/websocket_tile_3d/client/src/websocket_tile_3d.html ゲームして楽しめるようには作ってません キャラクターが接続しているブラウザの数(+[ダミープレイヤーが1人])だけ表示されます 動作は全てのブラウザに反映されます。複数のブラウザ or windowで動かすと分かりやすいです WebSocket + WebGLを使うのでFirefox4.xの一部とChromeの最新版でしか動きません。また、WebGLの利用のためグラフィックボードがプログラマブルシェーダーを持ってない
ChromeのDev版でWebGLがデフォルトでONになったみたいです。 今までみたいに引数付きで起動しなくてもWebGLが有効に成っています。 ※あくまで開発者版なので色々と自己責任で試しましょう。 Dev版を使った後、通常配布版の最新のものを立ち上げるとこんな表示が出る様になりましたorz でもまぁ、これも自己責任。 こちらにこうなった時の対処法を書きました。 ChromeのDev channel版と通常リリース版とを共存させる方法 - 強火で進め http://d.hatena.ne.jp/nakamura001/20101005/1286287073 情報やDL先はこちら。 Google Chrome Releases: Dev Channel Update http://googlechromereleases.blogspot.com/2010/09/dev-channel-u
WebGL has been getting a fair amount of buzz lately - and rightfully so, because it is cool. For those that don't know, WebGL is the 3D extension of the Canvas element, based on OpenGL ES 2.0. Having a standardized low-level graphics API like that available in the browser is pretty exciting stuff if you ask me. 3D canvas graphics has been long underway and not until just recently did it get to an
(10/02/25 追記) WebGLの関数名などの変更によりブラウザのバージョンによっては動作しない可能性があります。 WebGLのサンプルが動作しなくなった - 強火で進め http://d.hatena.ne.jp/nakamura001/20100224/1267028558 WebKitのNightly Builds版にもWebGLの機能が搭載された状態でビルドされたものが提供されているようです。 Surfin’ Safari - Blog Archive » WebGL Now Available in WebKit Nightlies http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/ DLはこちらから ※現在はまだMac版(Leopard か Snow Leopard)のみ対応みたいです。
Yesterday, I was updating my local checkout of WebKit and I noticed a few tests for "WebGL" scroll by (view commit). Apparently, a big WebGL patch has quietly landed. With a name like "WebGL", I couldn't help but investigate. What is WebGL? WebGL is basically an initiative to bring 3D graphics into web browsers natively, without having to download any plugins. This is achieved by adding a few thin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く