Clik here to view.
2014年はHTML5の3D表現を身につけよう！簡単なJSで始めるWebGL対応Away3Dチュートリアル ― 第1回入門編
あけましておめでとうございます。ICS池田です。 Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ(HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。...
View ArticleClik here to view.
2014年はHTML5の3D表現を身につけよう！簡単なJSで始めるWebGL対応Away3Dチュートリアル ― 第2回 マテリアルとライティング
WebGL対応のJavaScriptフレームワークAway3Dのチュートリアル第2回では3Dの見栄えを決定するマテリアルとライティングについて説明していきます。これからAway3Dをはじめようという方はまずは第1回の入門編の記事を参考にして頂ければと思います。 マテリアルとは...
View ArticleClik here to view.
CreateJSがWebGLを公式にサポート！爆速になったHTML5での描画パフォーマンスを検証してみた
こんにちは、ICS池田です。インタラクティブコンテンツ開発のためのHTML5向けのフレームワークCreateJSですが、WebGLサポートが公式ブログで発表されました(参照：WebGL Support in EaselJS)。公式ブログによるとパフォーマンスが従来比の6〜50倍にも達するとのことです。...
View ArticleClik here to view.
2014年はHTML5の3D表現を身につけよう！簡単なJSで始めるWebGL対応Away3Dチュートリアル ― 第3回 基本的な形状
WebGL対応のJavaScriptフレームワークAway3Dのチュートリアル第3回では様々な基本的な形状について説明していきます。これからAway3Dをはじめようという方はまずは第1回の入門編の記事を参考にして頂ければと思います。 Away3Dの基本的な形状を確認する...
View ArticleClik here to view.
HTML5で色分解した写真をWebGLで3D表示するAway3Dデモ
こんにちは、ICS池田です。先日開催したAway3D勉強会の発表のフォローアップ記事となります。 写真をRGB３原色に分解して3次元で表示するHTML5 + WebGLのデモを作ってみました。ステージをドラッグすると写真が赤・青・緑の3原色に分解されて表示されます。ライブラリはJSライブラリの「Away3D TypeScript」を使っています。 デモ ソースコード (TypeScript 1.0)...
View ArticleClik here to view.
HTML5とWebGLで実現するカバーフローの表現 (Three.jsとAway3Dのソースコード付き)
Mac OS XのようなカバーフローのデモをHTML5とWebGLを使って作ってみました。WebGLのJSライブラリとして有名なthree.jsとAway3D TypeScriptの両方のバージョンでデモを用意しています（どちらもコードはTypeScriptで記述して、JavaScriptに変換しています)。 Away3D TypeScript版 デモを再生する (少し読み込みに時間がかかります)...
View ArticleClik here to view.
ついにスマホのブラウザでWebGLがぬるぬる動く時代がきた！iOS8向けに3DのHTML5デモを作ってみた
こんにちは、ICS池田です。 iOS8の新機能としてSafariにWebGLが搭載されました。WebGLはOpenGLをブラウザから利用する標準技術で、GPUを使うため2D/3Dともに描画が高速化され高度なグラフィカル表現が可能になります。弊社ICSでは今までもPCブラウザ向けにWebGLのデモをいくつか作成していたのですが、全てのデモをiOS8でも再生できるように調整しました。...
View ArticleClik here to view.
iOS8ブラウザの新機能WebGLは超爆速だった！ 各種スマートフォンにおけるHTML5・WebGLの描画パフォーマンス徹底検証
こんにちは、ICS池田です。 iOS8の新機能としてSafari/ChromeブラウザにWebGLが搭載されました。WebGLはOpenGLをブラウザから利用する標準技術で、WebGLによってブラウザ内のグラフィカル表現のパフォーマンスが向上します。 今回はWebGLに対応したブラウザを使うことでどのぐらいのパフォーマンスが得られるのか検証してみました。 動作検証ビデオ...
View ArticleClik here to view.
簡単なJSで始めるWebGL対応Away3Dチュートリアル – 第4回 カメラの制御方法
こんにちは、ICS池田です。 WebGL対応のJavaScriptフレームワークAway3Dのチュートリアル第4回では3D空間の視点となるカメラについて説明します。これからAway3Dをはじめようという方はまずは第1回 入門編の記事を参考にして頂ければと思います。 今回のカメラの動かし方は使い回しのできるものですので、コードはストックにしておくとよいかもしれません。 カメラの制御を体験...
View ArticleClik here to view.
Clik here to view.
Clik here to view.
WebGL開発者必見！ Flash Stage3Dとの比較から見えてくるWebGLのあり方について
こんにちは、ICS池田です。 12月といえばアドベントカレンダー。今年はWebGLのアドベントカレンダーに私も表明しましたので、テーマ「Flash Stage3D との比較から見えてくる WebGL のあり方について」をテーマとして記事を書いてみます。長文ですが、WebGLとStage3Dのそれぞれの技術について特徴をまとめていますので最後までお付き合いくださいませ。 WebGLとStage3Dとは...
View ArticleClik here to view.
GLSLを使ってワンランク上の表現を！ three.jsでのぷるぷるシェーダーの作り方
こんにちは。ICS野原です。今回は簡単にWebGLが使用できるthree.jsというライブラリに加えてGLSLを使用してプリンが揺れるデモを作ってみました。 使用技術について GLSLとはOpenGL Shading...
View ArticleClik here to view.
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編)
こんにちは、ICS池田です。 2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回) が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容も出来る限り記載しました。...
View ArticleClik here to view.
WebGLのドローコール最適化手法―CreateJS勉強会/池田発表資料(後編)
こんにちは、ICS池田です。 本記事は2015年2月10日(火)に開催されたCreateJS勉強会 (第5回) の発表資料「CreateJSで制作するスペシャルコンテンツ」の後編となります。前編(CanvasとWebGLの比較)に続けて本記事ではWebGLの最適化手法を紹介します。 WebGLのドローコールの最適化について 前編ではHTML5...
View ArticleClik here to view.
Clik here to view.
iOSにおけるSwift/Unity/PhoneGap/Adobe AIRのパフォーマンス比較検証
こんにちは。ICS野原です。 スマホのアプリ開発を検討する際に、ネイティブ言語と中間プラットフォームのどちらを選択するべきか迷う方は多いのではないでしょうか？ ネイティブ言語であるObjective-C/SwiftやJavaを選択するほうがパフォーマンスが高いと言われていますが、それで開発すると固有のOSだけにしかデプロイできません。中間プラットフォームであるAdobe...
View ArticleClik here to view.
必要なのはスマホと1,000円のGoogle Cardboardだけ！ WebGLではじめるお手軽VR入門
こんにちは、ICS蔵下です。 みなさんは「VR：Virtual Reality」という言葉をご存知ですか？ 日本語では仮想現実と訳され用語自体は最近生まれたものではないのですが、Oculus Rift(オキュラス...
View ArticleClik here to view.
HTML5 CanvasとWebGLでアイコンフォント集Font Awesomeを扱う方法
こんにちは、ICS池田です。 「Font Awesome」(フォント・オーサム)はWebサイトに手軽にアイコンを組み込むことができる無料のフォントセットです。アイコンを画像ではなくテキスト(文字)として表示させることができるため、制作時の手間を軽減させたりページの読み込み時間の短縮に役立ちます。TwitterのCSSフレームワーク「Bootstrap」でも採用されるなど人気のアイコンフォントです。...
View ArticleClik here to view.
意地でもCreateJSでWebGLを使ってみよう―CreateJS勉強会/川勝発表資料
CreateJS勉強会 (第6回)でのライトニングトーク「意地でもCreateJSでWebGLを使ってみよう」(発表者：川勝)の発表内容を記事としてまとめました。CreateJSのWebGL機能は高いパフォーマンスが得られるものの、表現の制約があります。本記事ではCreateJSのWebGL機能を拡張することで、その制約を超えて望みの表現を実現する方法を紹介します。...
View Article
