REACT-VFX - WebGL effects for React! #REACTVFXREACT-VFX is a React component library which allows you to add WebGL powered effects to you React aaplication.
安定しないフレームレートに効果的！ WebGLのカクつき対策まとめ（Three.js編） - ICS MEDIA
FlashのStage3Dや、WebGLの登場によってブラウザ上でも高度な3D表現ができるようになり、ウェブコンテンツの表現の幅が広がりました。しかし、高速と言ってもコンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。 解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事
WebGLStudio
3D Development environment for the web. WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser. It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app. Try WebGLStudio.js Example Source on GitHub Documentation Learn or you can use the latest version (more features and more bugs)
スマホでもWebGLは爆速！ スマホブラウザの描画性能を徹底検証 （HTML CanvasとWebGLを利用） - ICS MEDIA
スマホでもWebGLは爆速！ スマホブラウザの描画性能を徹底検証 （HTML CanvasとWebGLを利用） スマートフォン向けのウェブコンテンツでもWebGLを採用すれば高速な描画性能が得られます。たとえば、ゲームやデータビジュアライゼーション、3D表示、広告向けスペシャルコンテンツといった分野でWebGLが役立つでしょう。iOSとAndroidも含め今やほとんどのスマートフォンでWebGLが利用可能といっても差し支えない状況です。この記事ではスマートフォンにおけるWebGLの描画性能を検証し、その結果を紹介します。 動作検証ビデオで見る各種スマートフォンの性能差 多くのパーティクル（粒子）を大量に表示することで描画性能を検証しました。パーティクルの数が多いほど高性能であることを示します。 ビデオ撮影の検証に用いたのは画面左上から順に次の端末となっています。検証時期（記事執筆時）は20
Unity 5 x WebGL について詳しく調べてみた - 凹みTips
はじめに 本エントリは 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 デプロイメ
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 - このウェブサイトは販売用です！ -
Unity 5 の WebGL で WebSocket を利用した通信をする方法について調べてみた - 凹みTips
はじめに Unity の WebGL では現状ではネットワーク機能に制約がありますが、WebSocket は使えるようです。 (English) On the future of Web publishing in Unity – Unity Blog 以前の記事では外側の JavaScript で Socket.IO を通じて通信した内容を用いましたが、これだとビルドしてから色々と確認しなければならず大変でした。 Unity 5 x WebGL について詳しく調べてみた - 凹みTips そこで、WebSocket 機能の利用方法について調べてみました。 WebSockets.unitypackage のダウンロード Unity5 Beta : WebGL + Unity WebSockets plug-in | Unity Community 上記スレッドより、WebSockets.u
WebGLで伝わる立体地図コンテンツ。 御嶽山噴火時の証言を集めた『NHK 御嶽山「噴火の証言」』開発秘話 - WebGL 総本山
御嶽山噴火時、その場にいた人たちの証言を集めたコンテンツ『NHK 御嶽山「噴火の証言」』。 Three.jsの利用やDOMとの連携など、製作者の立場から、WebGLでコンテンツを作る利点や注意すべき点について語ります。 ※本稿は実際にサイト作成に関わった面白法人カヤックのフロントエンドエンジニアのごんさんからご寄稿いただきました！ ありがとうございます！ 50名以上の方が亡くなり、戦後最悪の火山災害となった2014年9月27日の御嶽山噴火。 『NHK 御嶽山「噴火の証言」』は、御嶽山の噴火時、その場にいた人たちの証言を集めたWebサイトです。 3Dモデル上にプロットされた証言をクリックしたり、カメラを自由に動かして、御嶽山を眺めることで、噴火当時の状況を見ることができます。 今回は、開発を担当した面白法人カヤックのフロントエンジニアが、全面WebGLで制作した本サイトの内容について、制作面
glfx.js - An image effects library for JavaScript
Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone. There are two caveats to glfx.js. First, WebGL is a new technology that is only available in the latest browsers and it will be quite a while before the majority of users have it. Second
WebGL and Three.js
Colin Barre-Brisebois - GDC 2011 - Approximating Translucency for a Fast, Che...Colin Barré-Brisebois
3 Dreams of Black by Google Data Arts Team - Experiments with Google
This experiment is no longer active, but you can still learn about it on this page. “3 Dreams of Black” takes you on a journey through three dream worlds constructed through a combination of rich 2D drawings and animations interwoven with interactive 3D sequences. Throughout various points in these dream worlds, you can grab your mouse and guide the protagonist’s point of view through the experien
PhiloGL: A WebGL Framework for Data Visualization, Creative Coding and Game Development
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development. Idiomatic JavaScript PhiloGL is built on JavaScript good practices and idioms, providing an expressive and powerful API Focused on Performance PhiloGL tries to be as close to the gl calls as possible, providing a clear yet tight abstraction to WebGL All the Modules you need PhiloGL modules cover from Program
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GooCreate -
PlayCanvas - The Web-First Game Engine
GitHub - pixijs/pixijs: The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
cmmntr.com
CAAT
Angry Birds Walkthrough Videos, Golden Eggs, and more | AngryBirdsNest
WebGL Globe
Body Browser - Google Labs