CreateJSとは - ICS MEDIA
CreateJSは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイート（特定用途のソフトウェアを詰め合わせたパッケージ）です。Flashデベロッパーとして著名なGrant Skinner氏が代表を務めるgskinner社が開発を行っており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 CreateJS を構成する4つの JavaScript ライブラリ CreateJSには、リッチコンテンツを制作するための複数のJavaScriptライブラリが含まれています。CreateJSはグラフィックの表現機能を中心に、リッチコンテンツを作るための統合的なソリューションが提供されているというのがポイントです。 EaselJS : HTML5 Canvasでの制作を扱うためのJSライブラリ。キャンバス(画布)に対するイーゼル(画架)を意図した名前に
SVGをcanvasで使う - Qiita
この記事はACCESS Advent Calendar 1日目の記事です。 こんにちは ACCESS開発本部IoT開発部の渡辺 (@sassy_watson) です。 今回は私がSVGをcanvasで使う方法についての記事を書こうと思います。 SVGとCanvas SVGはただのベクターグラフィックスというだけでなく、 マスクやクリップだったらグラデーションやフィルターだったり いろいろ高機能なのが魅力です。 ただ、XMLなのでJavaScriptでなにかしようするときのDOM操作が面倒くさいです。 一方、CanvasはAPIが簡単なのでJavaScriptで扱いやすいというメリットがあります。 SVGをCanvasで使う そこで、SVGで使いたい機能をSVGで書いて、canvasに貼り付けるというアプローチが考えられます。 素材はillustratorでつくって、Canvasでペタペタ貼
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も マイクロソフトは、JavaScriptで2Dや3Dモデルを高速に扱えるライブラリ「Babylon.js」の最新版「Babylon.js 5.0」正式版をリリースしました。 We'd like to formally introduce the next version of the Babylon Platform - #BabylonJS5 Blog: https://t.co/aMgjIIeIin Video: https://t.co/OMssjZZPPz#gamedev #gamedevelopment #indiedev #indiedeveloper #webdev #3D @WebGPU #w
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
Googleが指輪物語の世界をWebGL・Web Audio APIなどを駆使して再現した「中つ国の旅」
「ロード・オブ・ザ・リング」や、2014年2月に公開予定の「ホビット 竜に奪われた王国」の舞台である中つ国の世界を、パソコン・スマートフォン・タブレットで体感できる「ホビット 竜に奪われた王国 - 中つ国の旅」というウェブサイトがオープンしました。作品中で登場する「トロールの森」のような土地を旅しながらミニゲームも体験できます。 ホビット 竜に奪われた王国 - 中つ国の旅 http://middle-earth.thehobbit.com/ サイトのイメージは以下のムービーを見るとつかめます。 Journey through Middle-earth, a Chrome Experiment - YouTube サイトのトップページはこんな感じ。 画面中央の「始める」をクリックすると…… 中つ国の地図が表示されます。 画面左上のアイコンをクリックすると…… 画面左端にメニュー画面が登場。
jeelizAR - ニューラルネットワークを用いた物体認識を使ったWebAR MOONGIFT
かつてのARといえば、QRコードに似たマーカーを認識して情報を表示するものでしたが、今では画像認識、位置情報、さらにマーカーレスなんてものも出てきています。スマートフォンの活用によって、ARは大きく進化しています。 そんな新しいARをWebブラウザでも体験できるのがjeelizARです。WebGLを使い、高速な描画が可能です。 jeelizARの使い方 一例です。コーヒーカップはリアルのもの、上にあるポットはARで描画しています。任意のコーヒーカップを認識し、そこにコーヒーを注ぐデモです。 時々外れたりします。 jeelizARは任意の物体を認識し、そこにARオブジェクトを表示します。これまでのように特定の物体だけを認識する訳ではありません。認識にはニューラルネットワークが用いられています。認識速度と精度については改善がいるかも知れませんが、とても面白い技術です。 jeelizARはJav
3D初心者の俺がThree.jsの基本をオススメ本とともにザーッとおさらいする記事 - Qiita
WebGL Advent Calendar 2014の13日目の記事です。 3Dのスキルなんてものは1mmもないわたくしが、お勉強したログをまとめてみます。 Three.jsのバージョンは68時点のものです。 参考にしたもの three.jsのドキュメント three.jsのサンプル three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界 ドキュメントとサンプルがしっかりしてるので、それだけでも事足りそうだけど、本を読んだほうが早い。記事中で上巻と書いているのはこの本のことです。ただし、2013年9月に出版されたものなので、ちょっと古いところもあります。 Three.jsの超基本 こんなノリだと動く！ renderer作成 scene作成 camera作成 lightをsceneに置く meshをsceneに置く meshは素材のma
wgld.org | WebGL: シェーダの記述と基礎 |
GLSL について知る WebGL では固定機能パイプラインが利用できません。これについては以前のテキスト(レンダリングのための下準備)でも少し触れましたね。 その代わりに、いわゆるプログラマブルシェーダの一種であるシェーダ言語が実装されています。それが GLSL ( OpenGL Shading Language )です。 GLSL は OpenGL との親和性を持つシェーダ記述言語で、C 言語ライクな独自の文法によって記述します。WebGL の難点の一つがこの GLSL であり、GLSL を理解しなければそもそもレンダリング自体を行なうことができません。WebGL の基本プログラムの知識に加えて、GLSL の知識も必要になるのでちょっと大変ですね。 ただし、基本的なことをやるだけであればそれほど難しくはありません。それに、慣れてしまうとシェーダを自分で記述できることの利点のほうが大きく
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の中で
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c6b612bbe897c30bb1fb761bba9a593a8115da9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTkxJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wZDY4ZGYzNWRmMWRjMmZhYWViNTZlMTMyNWZiOWFhYQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkb3hhcyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGZmYmRmOWY2NWFmYmViZGRmNzVmNTE4MTU0YmE1MDA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3d3dfbf98e256dad2d0be8f5a23778c1)
第二回 WebGLスクール 「WebGLの手続きと手順」 - Qiita
wgld.orgの管理人であるdoxasさん主催のWebGLスクールの第二回目です。 今回はWebGLを使って描画されるまでの流れを、実際にコードを見ながら解説してもらいました。 描画するまでに実にたくさんの処理が行われている。正直ほとんど理解できていないかもしれない・・・ 前回のまとめ 第一回 WebGLスクール 「WebGLの概念」 初期化から描画までのおおまかな流れ WebGLで画面に描画するまでの流れは以下の様になります。 ※順番は多少前後しても問題ないそう。 1,シェーダーの生成とリンク 2,頂点データの準備 3,行列の生成とリンク 4,シェーダへのデータ転送 5,全体設定とドローコール シェーダーの生成とリンク まずは、WebGLの2種類のシェーダ 頂点シェーダ と フラグメントシェーダ のソースコードを記述する シェーダはJavaScriptで文字列データとして扱う scri
three.jsの組み込みuniform/attributeの紹介 - Qiita
この記事は、Three.js Advent Calendar 2016 8日目の記事です。 はじめに みなさんはthree.jsのカスタムシェーダを使った経験はありますか？ three.jsでは、THREE.ShaderMaterialからカスタムシェーダを利用できます。具体的にはTHREE.ShaderMaterialのコンストラクタで頂点シェーダとフラグメントシェーダを指定してMaterialを生成できます。 THREE.ShaderMaterialと似たようなクラスにTHREE.RawShaderMaterialがあります。 THREE.ShaderMaterialではビルドインのuniform/attributeの定義がシェーダの先頭に挿入されますが、THREE.RawShaderMaterialでは挿入されないという違いがあります。 three.jsでカスタムシェーダをバリバリ使
threejsでGLSLをいじるための基礎知識 - Qiita
バーテックスシェーダーでは全部使える。 フラグメントシェーダーでは,viewMatrixとcameraPositionのみ使える。 フラグメントシェーダー側で使うときはバーテックスシェーダ内でvarying変数に一旦いれたりする。vUv=vu; みたいな感じで。 threejsからuniform/attributeを渡すとき指定する文字列(type) よくつかいそうなのは i (整数) f (float) v2 (THREE.Vector2) v3 (THREE.Vector3) v4 (THREE.Vector4) c (THREE.Color) m4 (THREE.Matrix4) t (THREE.Texture) var uniformsExample = { "uInt" : { type: "i", value: 1 }, // single integer "uFloat"
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
WebGL - これがGPUの力！Three.jsによる“リアルタイム”なレイトレーシング - Qiita
これはWebGL Advent Calendar 15日目の記事です。 【2016/01/29 追記】続編である「これがGPUの力！three.jsによる“リアルタイム”なレイトレーシング 〜宝石編〜」を公開しました。 はじめに Three.jsからGPUをつかって、リアルタイムなレイトレーシングを実装できたので紹介します。 iPhone6などの携帯端末でも動作するくらい軽量です。次のリンクから動作の様子をご覧になってください！ Reflect カラフルな球体に周囲の球体や床を鏡面反射させました。 マウス移動によって、上からの視点にもできます。 無数の球体がずら〜っと並ぶ様子は、ちょっと壮観ですね！？ 一般的にレイトレーシングを行うためには、膨大な計算が必要です。 ソフトウェアで実装した場合、数個の球体を配置しただけでもリアルタイムに処理するのは困難です。 2010年の記事によると、For
WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！
WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、東京理科大学4年の石井翔さんです。 石井さんのセッション「WebGLの今とこれから ~今のWeb開発で使うからこそ知っておきたい周辺技術~」に関するスライド資料は、こちらで公開されています。 スライド資料 （注: 重いのとモバイルから見えないのはご容赦ください by 石井翔さん） 白石: 本日は取材をお受けいた
クルマをスマホでカスタマイズ！ ｢GRコンフィギュレーター｣の舞台裏を直撃
クルマをスマホでカスタマイズ！ ｢GRコンフィギュレーター｣の舞台裏を直撃2017.09.25 17:00Sponsored 三浦一紀 リアルなスポーツカーのカスタマイズを楽しもう。 クルマが欲しい。そう思い立ったら、みなさんどうしますか？ まずはカタログなどを見るでしょう。そして気になるクルマが見つかったら、販売店に足を運ぶのではないでしょうか。 しかし、目当てのカラーリングが置いてあるとは限りませんし、自分の希望通りのオプションを装着した状態で見られないことも多いですよね。 Image: GRコンフィギュレーターそんな不満点を解消するのが、先日TOYOTAのサイトで公開された｢GRコンフィギュレーター（シミュレーター）｣。トヨタの人気車種をベースに、スポーツタイプにチューニングした新スポーツカーブランド｢GR｣。VitzやMARK X、NOAH、VOXYなどをスポーツ仕様にしたシミュレ
Web Blocks - Webブラウザで遊べるMinecraftクローン
Minecraftはブロックを積み重ねて世界を創っていくという、レゴ好きにはたまらないゲームです。日々多くの人たちが一生懸命建設に励んでいます。また、開発者にとっては別な見方もできます。 コンセプトがシンプルなだけに同じようなものを自分で作ってみたいと思えるのです。今回はWebGLを使ったWeb Blocksを紹介します。 Web Blocksの使い方 ゲーム画面です。矢印キーとASWDキーで移動や視点の変更を行います。 空中に浮かぶWelcomeの文字。 高台に登ってみました。 ブロックは幾つかの種類があります。 ジャンプを繰り返すと空中を飛べます。 Web Blocksは一人きり、かつ保存する機能はないので頑張って作っても再読み込みするとなくなってしまいます。Web Blocksをベースにデータの保存やリアルタイムのコラボレーション機能などを実装すると面白そうです。 Web Block
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Netflix/vizceral: WebGL visualization for displaying animated traffic graphs
Software Development Services, 3D Engineering Application/Services
Prandtl