[WebGL] WebGLを使ってみる
今回から実際にWebGLを使って何らかのオブジェクトを描画してみたいと思います。 まずは、サンプルを記します。 <!DOCTYPE html> <head> <title>Hello WebGL</title> </head> <body onload="main()"> <canvas id="sample" width="640" height="480">キャンバスがサポートされていないよ！</canvas> <script src="./webgl-utils.js"></script> <script> alert("ようこそWebGLへ") function main() { // canvas要素取得 var canvas = document.getElementById("sample"); // WebGL描画コンテキスト取得 var gl = WebGLUtils.s
![[WebGL] WebGLを使ってみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/f499c91fae35c2ad5b49d6e3df44614bdc798bf3/height=288;version=1;width=512/https%3A%2F%2Fftvoid.com%2Fblog%2Fwp-content%2Fthemes%2Fdp-colors%2Fimg%2Fpost_thumbnail%2Fnoimage.png)
WebGLによる 「流れ」と「波」のシミュレーション
■ 本書サポート情報 （更新2017年05月02日） ■サンプルプログラムのダウンロード（更新2015年01月07日） 本書のサンプルプログラムは、以下からダウンロードできます。 ・WebGLnagaresampleNew.zip ■サンプルプログラムについて(更新2015年1月7日） ダウンロードしたプログラムは「GoogleChromeブラウザ」で実行できます。 既定のブラウザを「GoogleChrome」に設定してあれば、「.htmlファイル」をダブルクリック、または「右クリック」→[プログラムから開く]で実行できます。 ただし、テクスチャを用いたプログラム（第5章のMovingObstacle3DG2.htmlとMovingObstacle3DG3.html)に対しては、あらかじめ以下のように設定してください。 ① 「GoogleChrome」のアイコンを右クリック。 ② [プロパ
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
仮想物理実験室構築のためのOpenGL, WebGL, GLSL入門／natural science Laboratory
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ 本稿は コンピュータ内に仮想物理実験室を構築する上で必要不可欠なコンピュータ・グラフィックの定番である OpenGL（GUUT, GLSL）を学習することが目的です。とはいえ、OpenGL（GUUT, GLSL）に関してはこれまでに多くの有用な情報が存在するため（下記の参考リストを参照）、ここでは OpenGL そのものについての解説は行わず、 物理シミュレーション結果の可視化に焦点を当てた構成にできればと考えています。 また最新の技術である HTML5 の canvas 要素を使用した OpenGL のウェブ版である
WebGL: ウェブの 2D および 3D グラフィック - Web API | MDN
WebGL (Web Graphics Library) は、互換性があるウェブブラウザーにおいて、プラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API です。HTML の <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。 WebGL への対応は、現代のすべてのブラウザーにあります（後述の互換性一覧表を参照してください）。ただし、ユーザーの端末にこれらの機能に対応したハードウェアが搭載されている必要があります。 WebGL 2 API は OpenGL ES 3.0 の機能セットの大部分に対応しています。このインターフ
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
Google マップのシステム要件とブラウザ要件を確認する - パソコン - マップ ヘルプ
Google マップに対応しているオペレーティング システムとブラウザの一覧は、以下をご覧ください。 注: Google マップのご利用に料金はかかりません。ただし、Google マップ アプリのご利用には、スマートフォンまたはタブレットによるデータ接続が必要であるため、データの使用に対してモバイル サービス プロバイダから料金を請求される場合があります。 ブラウザとオペレーティング システム Google マップの最新バージョンは、次のオペレーティング システムとブラウザで動作します。 システムとブラウザの要件を確認する Google マップの完全版（3D 画像や Earth に対応）を使うには、次のいずれかのブラウザの最新バージョンをご利用いただく必要があります。 Google Chrome Firefox Safari Microsoft Edge ヒント: Google Chrom
WebGLの（実質的に）仕様上の脆弱性について(日本語訳) - ものがたり(旧)
WebGLの（実質的に）仕様上の脆弱性が見つかったとされて、話題になっています。元はContext Information Security社のブログの記事なのですが、 http://www.contextis.co.uk/resources/blog/webgl/ 日本語でもかいつまんで紹介されています。 http://japan.cnet.com/news/service/35002505/ とはいえ、これじゃ何だか意味が分かりませんし、原文はなかなか簡単には読めないと思うので、ちょっくら日本語訳してみました。全体的にやっつけながら、後半は特に寝ぼけながら訳しているので、何かおかしいところがありましたらコメント等で教えて下さいませ。翻訳許諾は明日辺りお願いしてみようと思います。（ダメって言われたら消す）→もらいました。調査の次のラウンドが終わったらまた結果を教えてくれるみたい。 追記:
[ヅ] Google Chrome で WebGL が動作しないので --ignore-gpu-blacklist で回避する方法 (2011-04-06)
ウチの Windows XP + Google Chrome 10 だと WebGL のコードが実行されない。。。 正確にはChrome 10、Windows XP、Nvidia 7300 GTの組み合わせでGoogle Bodyが動作しない事が発端としてDev版をWindows XPにインストールした場合、デフォルトでWebGLがdisableになった様です。 Chrome 10からWindows XPでのWebGLサポートを停止 - 強火で進め Σ（゜д゜lll）ガーン！ ウチのは Chrome version 10.0.648.204 (Official Build 79063) ※以下の方法はあまりお勧め出来る事では有りません。自己責任にてどうしても試したい方のみ試してみて下さい。 引数に --ignore-gpu-blacklist を付けてChromeを起動するとこのブラックリ
[ヅ] Learning WebGL Lesson 1 をフラットな形にしてHello, world的に学習してみたい (2011-04-06)
WebGL Lesson 1 – A triangle and a square | Learning WebGL のコードをできるだけシンプルに(したつもりで)書き直してみた。 なんというか、Hello, world 的にシンプルにしたかった。 とりあえず、関数に分離されたのをひとつにまとめたり、できるだけWebGLの元の機能だけに絞って、不要なプロパティを削ったりしてある。 あと、ちょっといじって色を変えてあったり、アニメーションするようにしてあったり。 修正したものは Google Chrome で見れる (Windows版 バージョン 10.0.648.204 で動作確認)。それ以外のブラウザでは不可。 三角形が小さくなりながら移動していくアニメーション。 ⇒ flatten learning WebGL lesson 1 ソースコードは以下。 <!DOCTYPE html> <h
Android(Nexus One)のFirefox for MobileでWebGLが動く件に関して - 最高のコンピューティング環境とは？
Firefox 4 for Mobile: Demos! ✩ Mozilla Hacks – the Web developer blog http://hacks.mozilla.org/2011/03/webowonder-mobile/ 上記のページを見て、WebGLはどうだろうと思ってFirefox for Mobile4.0b1で試したら動いた。・・・ただし、なぜか逆さま。 まずはLearning WebGLのLesson2(http://learningwebgl.com/lessons/lesson02/index.html)。 次にScene.jsのティーポット(http://scenejs.org/dist/curr/extr/examples/hello-teapot/index.html)。 最後に自作のWebGLサンプルゲーム(http://www.syspri.o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Surfin' Safari - Blog Archive » WebGL Now Available in WebKit Nightlies
Google Code Archive - Long-term storage for Google Code Project Hosting.
https://github.com/WebGLSamples/WebGLSamples.github.io/blob/master/book/extension/webgl-utils.js
WebGL Samples
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
Shader Effects: Glow and Bloom | Devmaster
Cesium: The Platform for 3D Geospatial
Three.js – JavaScript 3D Library
Samurai zlash! - flatten Learning WebGL Lesson 1 (2011-04-07)