サンプルで理解するWebGL 2.0 - WebGL 2.0の利点とは - ICS MEDIA
ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0が主要なブラウザで正式対応し始めました。2017年1月にリリースされたChrome 56とFirefox 51や、2021年9月のSafari 15から標準で利用でき、ウェブ表現のさらなる進化への期待が高まります。 本連載では3回に分けてWebGL 2.0の新機能をデモを交えて紹介します。 WebGL 2.0の機能を使ったデモ まずはWebGL 2.0ではどんなことができるのか、機能ごとにデモを作成したので紹介します。それぞれ、マウスドラッグやマウスホイール/上下矢印キーで視点を変更できるので動かしてみてください。 ※各デモはWebGL 2.0で作成しています。WebGL 2.0に対応したブラウザでご覧ください。 Geometry Instancing Geo
deck.gl
deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.
HexGL, the HTML5 futuristic racing game.
What is this? HexGL is a futuristic, fast-paced racing game built by Thibaut Despoulain using HTML5, Javascript and WebGL and a tribute to the original Wipeout and F-Zero series. Credits. HexGL was built with love using three.js, a 3D library built on top of WebGL and maintained by Mr.doob and AlteredQualia. I'd also like to thank Nobiax for the great metalic road texture, Charnel for the HexMKI b
生WebGL入門:初音ミクの美麗3Dモデルを表示する(前編)
Special Thanks to @hagat and @teehah for reviewing my articles! 近年、WebGLに流行の兆しが出てきました。WebGLとは、ブラウザに何らプラグインをインストールすることなく、JavaScriptよりGPUを使用した3Dの表示を可能とする技術です。プラグインのインストールが必要ないとはいえ今までは対応ブラウザが少なくあまり実用的ではありませんでしたが、先日のiOS8で正式に対応されたことでモバイルブラウザにおいて対応率が跳ね上がり、スマートフォンにおいてブラウザベースで3Dのゲーム等を作れる可能性が急激に高まりました。 今回WebGL Advent Calendarの一環として、生WebGLで3Dのオブジェクトを表示するところまで挑戦してみます。WebGLにはthree.jsを始めとして有用なライブラリがたくさんあり、大抵の場
jQuery WebGL Ripples
Background images are often boring. Use this effect to make your static CSS background images more interactive! It's as easy as: $('body').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); You can add drops programmatically by doing $('body').ripples("drop", x, y, radius, strength) And you can change its state: $('body').ripples("pause") $('body').ripples("play") Download or fork t
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた - ICS MEDIA
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた 2014年9月にリリースされたiOS 8においてWebGLが動作するようになったことで、スマートフォン環境での3D表現に可能性を感じ、興味を持った方も多いと思います。そこで今回、写真を読み込んで3D空間上に配置し、パーティクルに分解して次の画像に切り替わるスライドーショーのデモをJSライブラリ（Three.jsなど）を使わずにイチからHTML5とWebGLで作ってみました。WebGLが動作する端末ならモバイルでもなめらかに動作するので、是非試してみてください。マウスやタッチの操作でビューを回転させることができます。 デモを再生する（別ウインドウが開きます） ソースコード (JavaScript) 制作環境について 今回のデモを作成するにあたり、WebGLのAPIを直接呼び出す形
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
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
WebGLを活用した3D Web ゲーム『翠星のガルガンティア～キミと届けるメッセージ～』
WebGLを活用した3D Web ゲーム『翠星のガルガンティア～キミと届けるメッセージ～』 春日井 良隆（日本マイクロソフト株式会社 プロダクトマ...） Production I.Gと日本マイクロソフトのコラボレーションによる3D Webゲーム『翠星のガルガンティア ～キミと届けるメッセージ～』が、Internet Explorerのデモサイト「Rethink」シリーズの日本発コンテンツとして、6月18日に公開されました。 このゲームはアニメ『翠星のガルガンティア』から生まれたスカイアクションゲームで、この作品のためにシナリオを書き下ろし、アニメ本編の声優はフルボイスで出演、そして世界中のファンが楽しめるように、日本語と英語のキャプションを用意するなど、ゲームそのものに気合いが入っているだけでなく、開発者向けにはソースコードの一部と3Dモデルを公開し、WebGLの裾野を広げることも目的に
WebGLことはじめ
Web担当者Forum秋のイベント 11月7日（月）14:05 KA1-4 セッションのスライドです。 「ウチの事業部の商品をWebサイトとアプリのトップに載せて！」 「新機能をとにかく目立たせろ！ 利用数をとにかく増やして！」 Webサイトやアプリを運用していると、社内のあちこちから、さまざまな圧力や依頼が舞い込むものです。えらい人からの現場を知らない指示であったり、発言力の強い部署からの高圧的な依頼であったり、決裁者からの思いつきの要望であったり……。その多くは「その人の視点から見た世界」の個別最適であり、全体最適でのユーザー目線に欠けていたり、Webサイトやアプリの使いやすさを毀損する内容であったりします。Web担当者やプロダクトマネージャーは社内の不要な衝突を避けながら、決裁者からは予算を引き出し、ユーザーに価値を届けられるプロダクトのかたちを守り続けなければなりません。本セッショ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
