軽量three.jsを作成した話 - Qiita
この記事は、WebGL Advent Calendar 2018 17日目の記事です。 WebGL採用されない問題 気づけばthree.jsもr99までバージョンが上がっており、歴史も長く認知度も非常に高いライブラリとなりました。しかし、実際に多くのサイトで使用されているかと言うとそうでもありません。そもそもWebGLを使用したサイトと出会うことも少ないです。なぜなのでしょうか？ ① WebGLは難しい 皆さんご存知の通りWebGLを扱うには多くの知識が必要です。そもそも3DCGと関わりのないエンジニアにとってはハードルが高すぎます。筆者も元から詳しい方ではなかったので今もまだ勉強中です。。。しかしthree.jsの登場により、WebGLを簡単に扱えるようになりました。しかしWebGLを採用するサイトが爆増したわけではありません。 ② three.jsはファイルサイズが大きすぎる thre
WebGLを使ってブラウザ上で3Dモデルを描画した話 - DMM.comラボエンジニアブログ
皆様、はじめまして！DMM.com Labo システム本部 事業サービス開発部の久野です。この度、社内の勉強会のLTで話した内容をまとめてみました！ 内容はWebGLというJavaScriptのAPIを使って、ブラウザ上で3Dモデルをアニメーション付きで描画するために何を行ったのか、です。 ▼実際に動作するデモです。 テクスチャを大量に読み込まなければならないので表示まで時間がかかるかもしれません。 ▲ブラウザによっては動作しない可能性がありますがデモプログラムなので悪しからず。 WebGLとはなんぞや？ WebGLとはKronos Groupが管理するOpenGL ES 2.0をブラウザ上のJavaScriptから扱えるようにしたAPIです。GPU(グラフィックカードまたはグラフィックボード)の機能を駆使して高度な3D描画を高速に行うことが出来、昨今のPC、スマートフォン等の主要なブラウ
WebGLとCanvas2Dを併用してみる - Qiita
WebGLとCanvas2Dを併用できないかな〜とぼんやり考えてたら、以下のAPIを見つけました。 ・Canvasリファレンス なんと第1引数のimageにimg要素、canvas要素、video要素が指定できるとっ！ これで描画して更新すれば、canvas2DにWebGL描画できそうなのでやってみました。 WebGL描画をCanvas2Dに描画 ソースはこんな感じです。 ここには書いてないですが、別途WebGLのcanvasをgetElementByIdし、変数canvasを渡しておきdrawImageの第1引数に指定します // WebGLのcanvasとは別に、2D用のcanvasタグをHTML側に作って参照する var can_2d = document.getElementById("2dcanvas"); var ctx_2d = can_2d.getContext("2d")
Live2DのWebGL版は今週公開 - Qiita
WebGL Advent Calendar 2014の15日目の記事になります。 Live2Dとは？ 1枚の2Dイラストからぬるぬる動かす技術です。 2Dと3Dの間にある技術のため、2.5Dとも言われています。 WebGL-β版は今週公開予定です 遅くなってすいませんが、今週中には公開されます。 以下の内容は、公開に先行した内容となっていますのでご注意下さい。 Live2DのソフトとSDKは無料で使う事ができます。 実際に触ってみたい方は以下のページにアクセスしてみて下さい。 WebGL対応でiPhoneのブラウザでもLive2Dアプリ！ WebGLでLive2Dモデルを表示 １）まずはLive2DのSDKをダウンロード Live2Dのサイトにいき、CubismSDK(WebGL)をダウンロードしてきます。 ２）Webサーバを準備する 今回は簡単にWebサーバが起動できる無料エディタ Br
Mozilla の開発した asm.js と WebGL が 1 つの到達点へ達しました：ゲームエンジンである Unity が WebGL によるゲームの完全サポートを開始しました | Mozilla Japan ブログ
[この記事は、米国 Mozilla の Future Releases Blog に掲載された "Mozilla-pioneered asm.js and WebGL achieve milestone as the Unity game engine provides full support for WebGL titles" の抄訳です] とても良いニュースがあります。長年のパートナーである Unity が WebGL への出力を Unity 5.3 から正式にサポートする、と本日アナウンスしました。この技術を利用したゲーム開発を完全にサポートするために、Unity とブラウザベンダーは半年以上にわたって質とパフォーマンスに関する問題の解決に努めてきました。この記事では、Web におけるゲームを実現するために行った、Mozilla のさまざまな活動についてご紹介します。それを一言でい
WebGLを使った3Dモデリングツールを作りました - ずっと君のターン
というのはウソで。 いやウソではないかもしれないけど、そんなガチな感じではなくて「こどもが適当に描いた落描きがなんとなく立体になったら面白い」くらいの空気感で作ってみた。実際、我が家の3才児でもそれなりに楽しそうに使えてたり。 要するにTeddyなんだけど、JS使ってブラウザ上でできたらおもしろそうだとたぶん5-6年くらい前から思ってて、やっと実装できたので今は新しいパンツをはいたばかりの正月元旦の朝のようにすっきり。（最近はブラウザで動く3Dスカルプトソフト既にいくつかあるみたいだけど・・・） https://github.com/technohippy/teddyjs 結構動作が重たいとはいえスマホでもそれなりに動くし、マウスを使うよりも指を使ったほうがずいぶん楽しい感じになるので、できればぜひスマホで試していただきたく。 https://technohippy.github.io/t
生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を始めとして有用なライブラリがたくさんあり、大抵の場
WebGL に対応する C++ なフレームワーク - Qiita
Unity や UE4 といったゲームエンジンを使うには重すぎるけど、3D 描画処理を直接書きたくないという中間解な（シーングラフ）フレームワークをのせます。いずれも emscripten 経由で WebGL に対応。これ以外に何かあればコメントください。 minko もともと Stage3D を搭載する Flash Player 向けの 3D フレームワークだったが、3.0 から C++11 を使って書き直され、OpenGL の汎用的な 3D フレームワークとなった。 Windows/OSX/Linux/iOS/Android に対応 WebGL 対応はプラグインとして提供されている minko/plugin/webgl/README.md で言及している emscripten のインストール方法のリンクが 404 になってしまうが正しいリンクは http://doc.v3.minko.
Creating a 3D game with Three.js and WebGL - Build New Games
Prerequisites A browser with WebGL - this game has been tested on Chrome and Firefox. IE still doesn’t support WebGL, unless you’re using Windows 8.1 with IE11. Three.js library available for download from the Three.js website The Keyboard.js helper library I used for this project, created by Arthur Schreiber at No Karma. Download it from my GitHub repository A basic understanding of what Three.js
[TypeScript][WebGL][Three.js] 3D で遊ぼう ～C#er も TypeScript で楽々 WebGL～ ― 準備編 (プログラミング C# - 翔ソフトウェア (Sho's))
※ Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices より引用。 Windows RT タブレットでは動作する。 WebGL プログラミング WebGL のプログラミングには、シェーディング言語である GLSL (OpenGL 2.0) と JavaScript を用いる。 次の図のような感じだ。左側が GLSL、右側が JavaScript による部分だ。 GLSL と JavaScript による WebGL プログラミング 慣れていない人には、結構大変だ。 three.js そこで、ここでは three.js という JavaScript のライブラリを用いることによる。 three.js は、WebGL のラッパー
![[TypeScript][WebGL][Three.js] 3D で遊ぼう ～C#er も TypeScript で楽々 WebGL～ ― 準備編 (プログラミング C# - 翔ソフトウェア (Sho's))](https://cdn-ak-scissors.b.st-hatena.com/image/square/d612acdaee724f5c287c94b9f685c0291a03b36e/height=288;version=1;width=512/http%3A%2F%2Fblog.shos.info%2Farchives%2F2014%2F02%2Fimages%2Fwebglprogramming.png)
[TypeScript][WebGL] Hokuriku.NET Vol.13 in 富山「3D で遊ぼう ～C#er も TypeScript で楽々 WebGL～」の資料公開 (プログラミング C# - 翔ソフトウェア (Sho's))
« [Event] Developers Summit 2014 参加レポート | メイン | [TypeScript] TypeScript の特長 » [TypeScript][WebGL] Hokuriku.NET Vol.13 in 富山「3D で遊ぼう ～C#er も TypeScript で楽々 WebGL～」の資料公開
WebGL Support in EaselJS - CreateJS Blog
Please note that SpriteStage & SpriteContainer classes are now deprecated and have been replaced by the much faster and easier to use StageGL! As WebGL becomes more widely supported in browsers, we’re proud to announce that after working in collaboration with Mozilla, a shiny new WebGL renderer for EaselJS is now in early beta! Following research, internal discussions, and optimizations, we’ve man
最新バージョンのChrome 31とOpera 18、asm.jsとWebGLで高速実行を実現。Unreal Engine 3対応に
最新バージョンのChrome 31とOpera 18、asm.jsとWebGLで高速実行を実現。Unreal Engine 3対応に Mozillaが開発したasm.jsは、JavaScriptを事前最適化コンパイラで徹底的に最適化するとともに、実行時チェックやガベージコレクションなどの実行速度の足を引っ張る処理を止めてしまうなどの手法で、JavaScriptを高速で実行できるようにする仕組みです。 asm.js:コンパイラのための低レベルかつ高度に最適化可能なJavaScriptのサブセット MozillaはFirefoxでasm.jsに対応していますが、GoogleもJavaScriptエンジンの最適化の一環としてasm.jsも高速に実行できるようにすると、5月に行われたイベント「Google I/O」で表明していました。 MozillaのGame Platform Strategis
ブラウザで3Dグラフィックを扱うWebGL、最新版 2.0のドラフト版が公開
ブラウザで3Dグラフィックを扱うWebGL、最新版 2.0のドラフト版が公開 増井 雄一郎（FrogApps, Inc.） 2013/9/16、WebGL Working Groupはブラウザで3Dグラフィックを扱うWebGLの最新版 WebGL 2.0のドラフト版が公開しました。 WebGL 2 Specification WebGL 2の最大の特徴は、2012年10月に標準化された組み込み向け3DグラフィックAPIのOpenGL ES 3.0の機能をベースにしているところです。 OpenGL ESは3DグラフィックをサポートするためのAPIで、WebGLではこの機能をブラウザ内で使えるようにすることで、ゲーム機の3Dグラフィックのような高度な3D表現をJavascriptから操作することが可能になります。 既に多くのブラウザではWebGL 1をサポートしており、すでにゲームを中心に使わ
traceGL
See your code! Get it now >> With traceGL you can see all JavaScript codeflow, in a high performance webGL visualiser. Its like an oscilloscope, for code. See everything Wondering what your code looks like when you can see everything? traceGL records all codeflow so you can wander around and see all logic move. Almost like Tron, watching information flow Debug node.js Finally you can see everythin
なぜ WebGL がいいの? | Yomotsu net
この記事は 「Why you should use WebGL」の著者 Florian 氏に転載許可をいただき、CC-by-sa license のもと公開します。まだ翻訳途中です ( still translating… ) There is (among graphics enthusiasts) a lot of debate what API/version of something to use with a bunch of hotly contested alternatives. I would like to convince you to give WebGL a try, and this blog post explains why. It will also quickly summarize a few things people usually ask abo
IE11 で WebGL をやっぱり載せることにします? | スラド IT
先日流出した Windows Blue を解析したところ、Internet Explorer 11 に WebGL が実装されているとのこと (強火で進めの記事、CNET News の記事より) 。 また、Within Windows の記事によるとレジストリ HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl の設定を変更することでβ版の IE 11 で実際に WebGL が使えたという報告があるようだ。 セキュリティが確保できないという理由で、IE は主要ブラウザで唯一 WebGL を実装していない。MS 独自の改造を施さないことを祈るばかりだ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypescriptでWebGLひとまずここまでやってみる - 新 masafumi's Diary
http://clockmaker.jp/blog/2014/01/away3d-typescript-fire/
‘Epic Citadel’ Demo Shows the Power of the Web as a Platform for Gaming – Future Releases