3DコンテンツをWebブラウザで表示できるWebGL/HTML5ゲームエンジンです。 自動車コンフィギュレーターや建築パース、メタバース、インタラクティブ広告など非ゲーム系案件での採用が拡大しています。 開発もブラウザで完結し、使用言語は学習ハードルの低いJavaScript。複数人での同時編集が可能なためチームでの効率的な開発に最適です。
3DコンテンツをWebブラウザで表示できるWebGL/HTML5ゲームエンジンです。 自動車コンフィギュレーターや建築パース、メタバース、インタラクティブ広告など非ゲーム系案件での採用が拡大しています。 開発もブラウザで完結し、使用言語は学習ハードルの低いJavaScript。複数人での同時編集が可能なためチームでの効率的な開発に最適です。
GPU の力を引き出すのだ! 前回は VBO を逐次更新しながら処理することで、CPU 側で頂点の座標を計算してパーティクルを動かす、というテクニックを解説しました。 このやり方の場合、頂点の計算が CPU の性能に依存する形になるので、WebGL 特有の GPU パワーを引き出すことができるというメリットはそれほど活かされない一方、javascript 側ですべて計算しているのでそれほど WebGL や GLSL の記述に精通していなくても、処理を記述しやすいというメリットがあったのでしたね。 そんな中で今回は、これを GPU 側に持っていきます。いわゆる GPGPU と呼ばれる類の技術です。 前回は、あくまでも頂点の座標計算について javascript で行いましたが、今回はこれを GPU 側、つまりシェーダにやってもらいます。つまり、頂点の座標計算から描画までの一連の処理が、基本的
Live2D WebGLの活用事例 Live2D SDKのワークフロー Live2D WebGL SDKの解説(ハンズオン) Live2Dモデル差し替え パラメーター操作 プログラム処理の流れ Live2Dモデルの位置・サイズ指定 モーション再生 Live2D APIについて マウスドラッグ操作
BMWがラインナップする次世代スポーツカー「i8」は、エンジンとモーターの力でパワフルな走りと低燃費性能を実現するという文字どおり次の世代を示すスポーツカー。そんな先進的なスポーツカーをHTML5とWebGLを使ってブラウザ上に再現しているのがゲームエンジン「PlayCanvas」のデモサイトです。サイトではi8がフル3DCGで表示され、車体色や内装色を変更できるほか、特徴的な跳ね上げ式のドアをあけて車内に滑り込めるなどとにかく驚愕のデモを体験することができます。 BMW i8 - PLAYCANVAS http://playcanv.as/p/RqJJ9oU9 サイトを訪れ、ページのロードが完了すると3Dで表現されたi8が表示されました。実際に車輪が回転し、緩やかに前進している様子が再現されています。 車体はマウスを使って360度全ての角度に回転させることが可能。リヤのルーフからテールラ
ウェブコンテンツで3Dを扱える技術としてWebGLがあります。WebGLを利用すればブラウザ上で華やかな表現を実現できます。しかし、コンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。 解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事「最新版TypeScript+We
今月の 22 日に GTUG Girls のイベントで WebGL (Three.js) のハンズオンをやります。内容は初心者向けで、簡単な物体を表示してみたりして Three.js の基礎を学ぼうというものです。女性限定ですが、興味のある方はぜひご参加ください。 【告知】第10回GTUG Girls Meetup 「キラリとひかるモノ作り!WebGL(Three.js)入門編」 募集開始! で、本日は宣伝も兼ねて WebGL を使ったデモやアプリケーションのまとめエントリを書いてみました。いずれも Web ブラウザで動くとは思えないほどインパクトのあるものばかり。 WebGL 対応のブラウザで(Chrome か Firefox の最新版が無難です)、おもいっきり堪能しちゃってください! 長編デモ 音楽に合わせてインパクトのある映像を展開していく、ちょっとしたストーリー性のあるデモなどを集
点や線の大きさ GL_POINTS によって作られた頂点は、それぞれが点として描画されます しかし、デフォルトの点では限りなく小さいため、ほとんど見えないことでしょう デフォルトでは 1.0 が線の太さとして設定されています これは、点を 1 × 1 ピクセルの正方形として描画することを表しています 点の太さは glPointSize() 関数を使って設定することができます また、太さを取得したいのであれば glGet() に GL_POINT_SIZE を要求するとよいでしょう void glPointSize(GLfloat size); size には点の直径を指定します #include <windows.h> #include <stdio.h> #include <GL/gl.h> #include <GL/glut.h> int pointSize = 1; void dis
[この記事は、米国 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 のさまざまな活動についてご紹介します。それを一言でい
Dennis is a music video with music from popcorn_10 produced by Always & Forever. It’s a generative 3D experience whose every movement responds to the song’s finest details. Each frame is created in real time with code—nothing is pre-rendered. An interactive camera allows you to explore the scenes, which are created procedurally every time you press play. You’ll never see the same video twice. Ever
【CEDEC 2015】ブラウザゲーム新時代の幕開けか? ”WebGL”が可能にしたブラウザと3DCGの新たな道 新時代を切り開く武器となるか2015年8月26日から8月28日までの3日間、パシフィコ横浜で開催されるコンピュータエンターテインメント開発者向けカンファレンス“CEDEC 2015”。ファミ通Appではスマホ関連のセッションを中心にリポート! ここでは初日にあたる8月26日午前11時20分から実施された、“WebGLとモバイルウェブの「これまで」と「これから」 そして来るべきWebGL 2.0へ向けて”の講演の模様をお届けする。 本講演では、WebGL開発支援サイト”wgld.org“の運営やWebGLスクールの主催などもされている、まさにWebGLのスペシャリストである杉本雅広氏が登壇。WebGLの現状とその将来性について語られた。
こんにちは! 最近バランスボールで仕事してます。エンジニアののびすけです。 最近はHTML5が何かと話題になっていますね。今までWebブラウザの標準機能で実現できなかったことができるようになるということで注目されています。でも大抵の場合、HTML5とは広義で、JavaScriptやCSSも含めた意味合いのことが多いです。 今日は、そんなHTML5のAPIの1つであるWebGLを使ったサイトやデモを紹介したいと思います。WebGLはWebブラウザ上でプラグインなどのインストールなしで3D表現を行える技術です。 ※WebGLはPCブラウザではIE10以前のバージョンに未対応、そしてスマートフォンブラウザでも閲覧できないので、それ以外のブラウザで見てください。 特にこだわりがなければGoogle Chromeでの閲覧が好ましいです。また、WebGLの描画はPCに掛かる負荷が大きいので高いマシンス
はじめに 本エントリは Unity Advent Calendar 2014 8日目の記事になります。 Unity 5 からは Build ターゲットに WebGL が追加されます。Unity 5 プリオーダ向けベータ版で現在試すことが出来ます。 Unity 2020.2b - Unity 今年の 3/18 に行われた GDC2014 で Unity 5 が発表されたタイミングで WebGL 対応が発表されました。日本でも 4/7、8 で行われた Unite 2014 においても WebGL についての講演があり、その動画や講演資料を公式サイトから閲覧することが出来ます。 http://japan.unity3d.com/blog/press/unity5 http://japan.unity3d.com/unite/unite2014/schedule Unity と Web デプロイメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く