Hackery, Math & Design — Acko.netSub-pixel Distance Transform High quality font rendering for WebGPU
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
Unity WebGL x WebSocket で複数クライアント間の大量のオブジェクトを簡単に同期できる仕組みを作ってみた - 凹みTips
はじめに まだ実験中なのですが、Unity WebGL x WebSocket で大量のクライアント間で大量のオブジェクトを同期できる仕組みを作っています。UNET や Photon によって近いうちに対応されると思うのですが、現状では使えないのと、制限なく扱えたりチューニング次第で速く出来る可能性があるので作ってみようと思いました。 昨日、技術デモを公開しまして、最大で同時に 30 〜 40 人ほどの方に同時に遊んでもらいました。皆様ありがとうございました！200 オブジェクトくらいならフレーム落ちすること無くサクサク動いたと思うので、現状の仕組みや知見などを備忘録も兼ねて共有できればと思います。 開発環境 Mac OS X 10.10.1 Unity 5.0.0b18 デモ いつ止めるかは未定ですが、以下から遊ぶことが出来ます。 hecom.in - このウェブサイトは販売用です！ -
Mozillaのゲームに対する本気度を担当者が語る。WebGLが拓くゲームプラットフォームとしてのWebブラウザの姿
Mozillaのゲームに対する本気度を担当者が語る。WebGLが拓くゲームプラットフォームとしてのWebブラウザの姿 ライター：米田 聡 2014年9月2日から4日までパシフィコ横浜で開催されていた日本最大のゲーム開発者会議「CEDEC 2014」では，米Mozilla Foundation（以下，Mozilla）からブラウザのゲームプラットフォーム化を推進している担当者が来日して「Games on the modern Web」（モダンWebにおけるゲーム事情）と題するセッションを行った。4GamerではGame Developers Conference 2013（以下，GDC2013）の際にMozillaの試みをレポートしているが，今回のCEDEC 2014のセッションはその後の進捗報告という感じの内容で，ブラウザのゲームプラットフォーム化が現実になっていることをMozillaの担当
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高速化のススメ
今日のテーマ WebGL高速化のススメ 今回はあくまでも WebGL 特有の高速化 TIPS です。 WebGL にあまりなじみのない方もいらっしゃると思うので…… そもそも WebGL って？ というところから簡単に解説します。
日本全国の3D地図、国土地理院が公開 ダウンロードして3Dプリントも
国土地理院は3月19日、Webブラウザで閲覧できる日本全国の3D地図「地理院地図3D」を公開した。データをダウンロードすれば3Dプリンタを使って出力できる。防災対策や学校教育などでの活用を見込むという。 日本全国を網羅する「地理院地図」の新たな表現として、高低差を3Dモデルで示し直感的に理解できるようにした。通常の地図データと標高データを利用しており、日本全国の好きな場所を3Dで表示できる。3Dプリンティング用のデータは、WebGL、STL、VRMLの3形式でダウンロード可能。 「地理院地図3D」のトップページでは、東北・裏磐梯、関東・高尾山、中国・秋吉台、沖縄・首里城など各地方の測量部おすすめの場所が20カ所挙げられている。 関連記事 「世界最高精度のデジタル3D地図」JAXAが整備へ 「だいち」撮影の300万枚活用、5メートルの精度で起伏再現 JAXAは、陸域観測技術衛星「だいち」が撮
プラグインなしでブラウザ上でUnityで開発したゲームが動作可能に
WebGLやasm.jsの技術を駆使し、専用プラグインなしでもブラウザ上でUnityで開発したゲームを動かすことが可能になると、MozillaとUnityが発表しました。 Mozilla and Unity Bring Unity Game Engine to WebGL | The Mozilla Blog https://blog.mozilla.org/blog/2014/03/18/mozilla-and-unity-deliver-award-winning-game-engine-to-the-web/ UnityはWindows・Mac OS X・ウェブブラウザ・Flash プレイヤー・iPhone・iPad・Android・Wii・Wii U・PS3・Xbox 360など幅広いプラットフォームのゲーム開発に対応したツールで、2005年にOS Xに対応したゲーム開発ツールとし
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
初心者でも絶対わかる、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ファイルを手に入れま
マウスで簡単に間取り図を作成しWebGLで立体化して中を動き回れる「Wanaplan」
家を購入したり、新しい土地へ引っ越す時に、不動産屋を訪ねて物件を回るのはなかなか骨が折れるもの。そんな時に便利な、クリックしていくだけで簡単に3D間取り図を作成＆立体化させて「この間取りの部屋に住むとどういう感じになるのか？」ということを体験できるのが「Wanaplan」です。WebGLで作られており、平方メートル単位で細かく間取りを設定することもでき、家具や扉などの小物を配置して自分の理想のおうちを仮想体験することもでるようなので、実際に使用してみました。 Wanaplan - WebGL application to create 2D/3D plans http://www.wanaplan.com/en/plan/ 3D間取り図を作成するには、「Try Wanaplan」をクリック。 すると2Dの間取り図が開きます。 壁のラインをドラッグして移動させると間取りの拡大・縮小が可能。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Making WebGL Dance
二次元イラストがぬるぬる動く！ Live2DでWebGLアドベンチャーゲームを作ろう
御嶽山 噴火の証言｜NHKオンライン
Angry Birds Walkthrough Videos, Golden Eggs, and more | AngryBirdsNest
Engadget | Technology News & Reviews
Engadget | Technology News & Reviews
http://clockmaker.jp/blog/2014/01/away3d-typescript-fire/
http://clockmaker.jp/blog/2014/01/html5-webgl-away3d-typescript-samples/
