タグ

WebGLに関するAkinekoのブックマーク (16)

  • UnityのWebGLアプリ開発における"使えないライブラリ問題"の回避策 - Gaudiy Tech Blog

    ファンと共に時代を進める、Web3スタートアップのGaudiyUnityエンジニアをしているくりやま(@xamel7)です。 Gaudiyでは"Gaudiy Fanlink"というブロックチェーンや生成AIなどの技術を活用したファンプラットフォームで、漫画、アニメ、アイドルといったIP(知的財産コンテンツ)独自のコミュニティの開発・運営をしています。 service.gaudiy.com このFanlinkの一機能として、現在、新たに開発を進めているのがIPのカジュアルゲームです。 「GANMA!コミュニティ」で先日公開されたカジュアルゲーム ▼登録不要で遊べます ganma-community.com WebサービスであるFanlinkとの連携が必要なこともあり、GaudiyUnityチームではWebGLビルドによるアプリケーション開発を行っています。 WebGLビルドは、スタンドア

    UnityのWebGLアプリ開発における"使えないライブラリ問題"の回避策 - Gaudiy Tech Blog
  • 2022年のライブゲームはWebGL@Unityで動いているよ - Mirrativ Tech Blog

    みなさまこんにちは、よこて @n0mimonoです。段々とすごしやすい気温になってきましたがいかがお過ごしでしょうか。今日の話は ミラティブとライブゲーム ライブゲームUnityを利用したWebGLベースで動いているよ バックエンドアーキテクチャの紹介 行ってみます! ミラティブ × ライブゲーム ミラティブは、スマホで簡単にゲーム配信ができるサービス『Mirrativ』を展開していますが、今年(2022年)からゲームとライブ配信を融合させた『ライブゲーミング』に特に注力してます(次は4月次点のプレスリリース)。 prtimes.jp 「ライブゲーミング」とは、配信中のゲームに視聴者が介入できる、ゲームとライブ配信が融合した次世代のゲーム体験となります。 視聴者は従来のライブ配信のようにコメントやギフトアイテムを贈るだけでなく、実際に配信者といっしょにゲームをプレイする「参加型ライブゲー

    2022年のライブゲームはWebGL@Unityで動いているよ - Mirrativ Tech Blog
  • Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

    こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは? Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを

    Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
  • PixiJS v4

    The HTML5 Creation EngineCreate beautiful digital content with the fastest, most flexible 2D WebGL renderer.

    PixiJS v4
  • 組織でナレッジを共有できる新プロダクト「Strap」 その開発技術に「TypeScript」「Firebase」「PixiJS」「React」を選んだ理由

    Goodpatch主催のイベント「のぞき見企画!ICS×Goodpatch Anywhere合同勉強会」で、Goodpatchのエンジニアマネージャーである西山氏が、自社プロダクトStrapの目指すものと開発技術について紹介しました。 Goodpatchのエンジニアマネージャー 西山雄也氏:先日Goodpatchの新しいプロダクトとしてβ版をリリースしたStrapの紹介と、あとはそれにまつわるナレッジの紹介をもう1人の黄から発表します。 僕はGoodpatchのProduct Div.という自社プロダクト開発の部署でエンジニアマネージャーをやっています。プロトタイピングツール『Prott』とクラウドワークスペースツール『Strap』の開発責任者です。フルスタックエンジニアからフロントエンドエンジニアになり、今はGoodpatchに入ってマネージャーをやっているという経歴です。 僕はいわゆる

    組織でナレッジを共有できる新プロダクト「Strap」 その開発技術に「TypeScript」「Firebase」「PixiJS」「React」を選んだ理由
  • プログラミング初心者からthree.jsに慣れるまで|misaki nakano

    こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド+WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法!これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか

    プログラミング初心者からthree.jsに慣れるまで|misaki nakano
  • Webでどこまで遊べるか試してみた - Qiita

    Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓(スマートフォンで開いてください) https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,

    Webでどこまで遊べるか試してみた - Qiita
  • WebGL用のJavaScript行列計算ライブラリMatrixGLを公開しました

    WebGLを扱う際には行列計算というのがどうしても必要になってきます。だいたいは既存のライブラリを使ってなんとかしたりするのですが、現状あまり選択肢は多くありません。そこで新しいライブラリであるMatrixGLを作って公開しました。 経緯 私はたまにWebGLをいじるのですが、やっぱりどうしても行列計算が面倒です。WebGL用の行列計算ライブラリというと、glMatrixという有名なライブラリがあるのですが、昔ながらのC言語的なAPIで、どうしてもJavaScriptでは使いにくく感じていました。OpenGL自体とは相性いいAPIだとは思うんですけどね。 「まあ誰かがそのうちJavaScript的な使いやすいの作ってくれるだろう」とずーーーーっと待っていたのですが、待てど暮らせど全く出てこないという状況でした。みんなglMatrixで満足してるのか、それかThree.jsとか使ってるから特

    WebGL用のJavaScript行列計算ライブラリMatrixGLを公開しました
  • wgld.org | WebGL |

    WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ

  • 初心者でも絶対わかる、WebGLプログラミング<基礎知識編>

    HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって? WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング(アニメーション)など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対

    初心者でも絶対わかる、WebGLプログラミング<基礎知識編>
  • ブラウザーの3D表現もここまで来た!WebGLを使った驚きのWebサイト

    ブラウザーで3次元コンピュータグラフィックスを表... / WebGLを使った3D表現 / SculptGL他...全13件 ブラウザーで3次元コンピュータグラフィックスを表示させるための標準仕様「WebGL」。Microsoftも重い腰を上げ、次期バーションの「IE11」からWebGLを標準サポートすることが決定しています。これからますます目にする機会が増えそうです。 そんな、圧倒的な3D表現が可能なWebGLを使った驚きのWebサイトを集めました。

    ブラウザーの3D表現もここまで来た!WebGLを使った驚きのWebサイト
  • cmmntr.com

    This domain may be for sale!

  • WebGL のシェーダーでグリグリできる CSS Shaders の使い方 - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 こちらの記事を見て「おお、ついに CSS Shaders 実装されたんか!」と喜び勇んで試した後、すべてが終わってから Dev 版 Chrome でも使えることに気づくという情弱ぶりを発揮した今日この頃、みなさんいかがお過ごしでしょうか。いったいいつから使えてたんだろう・・・(´・ω・`) そんなわけで、最新の話題でもないみたいですが、せっかく試したので記事にして

  • WebGL and Three.js

    Colin Barre-Brisebois - GDC 2011 - Approximating Translucency for a Fast, Che...Colin Barré-Brisebois

    WebGL and Three.js
  • JavaScript でリアルタイム 3DCG を実現する WebGL の使い方 - WebOS Goodies

    先日、ちょっとした思いつきで WebKit の Nightly Build をインストールし、 WebGL を試してみました。 WebGL というのは現在策定中の新しい規格で、 JavaScript を使って格的な 3DCG を実現する API です。同じ目的を持つものとして Google の O3D がありますが、 WebGL は OpenGL ES を管理している Khronos グループを中心に Google, Mozilla, Opera, NVIDIA, AMD といった企業が参画しており、標準化という面ではリードしています。 まだ策定中の規格なので今後変化するかもしれませんが(WebGL 1.0 が正式リリースされました)、少なくとも現状の WebKit の実装については使い方がわかったので、日はそれをご紹介します。 WebGL は Web 上の最も重要なグラフィックス A

  • HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(1/3)~

    HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ

  • 1