マイクロソフト、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
GLSL のデータ型とコンストラクタの挙動まとめ
WebGL 2.0 で使える GLSL ES 3.0 における各種データ型やコンストラクタの挙動を自分用にまとめます[1]。 全て precision が highp であるときのビット数を表します。 float: 32ビット浮動小数点数型 int: 32ビット符号付き整数型 uint: 32ビット符号なし整数型 bool: ブール型 vec2, vec3, vec4: float の 2, 3, 4 次元ベクトル版 ivec2, ivec3, ivec4: int の 2, 3, 4 次元ベクトル版 uvec2, uvec3, uvec4: uint の 2, 3, 4 次元ベクトル版 bvec2, bvec3, bvec4: bool の 2, 3, 4 次元ベクトル版 mat2, mat2x2: 2 次正方行列 mat3, mat3x3: 3 次正方行列 mat4, mat4x4:
株式会社切札 | kirifuda inc.
The App to Monitor Heart Rate and Measure Stress Levels at CES STRESS CHECK APP
WebGL初心者がthree.jsでオーディオビジュアライザー作ったので復習するよ！ - やばかわいいエンジニアの脳内整理ブログ
はじめに 🍡Yaba Kawaii Audio Visualizer🍡 This is a yaba kawaii audio visualizer using toon-shaded donuts. I've been learning webgl and glsl since last month, and this is my first portfolio! demohttps://t.co/At8R79HjIX codehttps://t.co/g5Li8tXFyq@threejs_org#webgl #threejs #shaders pic.twitter.com/laZZaft7Da— Ayako Yokoya (@ayakoyokoya) May 21, 2020 4月中旬から本格的にWebGL / GLSLについて学びたいと思いはじめ、独学で勉強を開始しました。 2
WebGLデバッグに最強な「RenderDoc」 - Qiita
set RENDERDOC_HOOK_EGL=0 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-gpu-sandbox --gpu-startup-dialog RENDERDOC_HOOK_EGL=0はChromeのWebGLが、DirectXでOpenGL ESをシミュレートするANGLEで動いているためで、OpenGLESの呼び出しを無視するために設定するようです。 詳細 --disable-gpu-sandboxはGPUのサンドボックス化を無効化します --gpu-startup-dialogはChromeの起動時に、GPUのプロセスIDを表示してくれます。 バッチファイルをクリックしてChromeを起動すると以下のようなウィンドウが表示されます。 表示させたままで次のステップへ進みま
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
Loading
What’s new for Apple developers Learn about the key technologies and exciting capabilities available in the latest SDKs for Apple platforms. Apple Intelligence Apple Intelligence is the personal intelligence system that puts powerful generative models right at the core of your iPhone, iPad, and Mac. It powers incredible new features to help people communicate, work, and express themselves. Writing
curtains.js | Home
What is it ? Shaders are the new front-end web development big thing, with the ability to create very powerful 3D interactions and animations. A lot of very good javascript libraries already handle WebGL but with most of them it's kind of a headache to position your meshes relative to the DOM elements of your web page. curtains.js was created with just that issue in mind. It is a small vanilla Web
WebGL Distortion Hover Effects | Codrops
A little library that can be used for creating WebGL powered distortion hover effects using displacement images. Today we’d like to share a little hover effect library with you. The effect goes as follows: when hovering an image, we’ll use a displacement image to transition to another image. Using different displacement images, we can create a variety of looks. The main idea behind this little lib
Three.jsのパフォーマンスTips | 株式会社カブク
はじめに こんにちは。お弁当盛りつけ係のあんどうです。 📢 Calling all #threejs devs: Let's make a mega thread of performance/efficiency tips & tricks for three.js! Big or small, name something that has helped you boost rendering perf, load times, memory management, etc. Textures, materials, loaders, shaders, geometries, you name it. — Jack Rugile (@jackrugile) 2018年2月21日 先月のことですが、ウェブ／ゲーム開発者のJack RugileさんのTwitterでの「Three.jsに
WebGLでエロゲー風に部分モザイクしてみた - Qiita
ステンシルバッファ（マスク処理）にシェーダー適用して、部分的にモザイクさせてみました。 Live2D WebGL版と合わせるとこんな感じにできます♪ （エロゲー用の素材を持っていないので公式サンプルでテスト） ・Live2Dで部分モザイクデモ 上記デモページでは、モーション切替とモザイク箇所の切替ができます。 モザイクは一部の描画オブジェクトごとにかけられるように実装しています。 そのため、描画オブジェクトが動くとモザイク部分も動きますっ！ WebGLの技術としては、以下のものを使いました。 １）モザイクシェーダー ２）ステンシルバッファ ３）フレームバッファ ４）Live2DのWebGL描画 開発環境 ・Live2D WebGL SDK 2.0.04_1 ・SDKのSimpleプロジェクトをカスタム モザイクシェーダー部分の実装 モザイクシェーダーは以下の記事を参考にさせていただきました
ブラウザーの3D表現もここまで来た！WebGLを使った驚きのWebサイト
ブラウザーで3次元コンピュータグラフィックスを表... / WebGLを使った3D表現 / SculptGL他...全13件 ブラウザーで3次元コンピュータグラフィックスを表示させるための標準仕様「WebGL」。Microsoftも重い腰を上げ、次期バーションの「IE11」からWebGLを標準サポートすることが決定しています。これからますます目にする機会が増えそうです。 そんな、圧倒的な3D表現が可能なWebGLを使った驚きのWebサイトを集めました。
Google I/O の WebGL セッションが素晴らしいのでハイライトを紹介してみる - WebOS Goodies
今週はみんな Google I/O に気を取られているだろうから、ブログの更新はサボろうかな…と思っていたのですが、なんとなく動画を見てみた WebGL セッションの内容があまりに素晴らしかったので、ハイライトをご紹介することにしました。 WebGL を活用するためのテクニックやパフォーマンス Tips などが解説されていて、 WebGL に関わっている方は必見です。また、けっこう見栄えの良いデモがいろいろ出てくるので、「WebGL ってなに？」という方でも楽しく見れると思います。 とはいえ、解説されている内容をきちんと理解するには WebGL の基礎知識が必須です。もしセッションを見て興味を持たれたら、こちらの記事もぜひご参照くださいませ。 前半は処理を GPU へ移行してパフォーマンス改善する例 最初にまず WebGL の基本概念を説明。その後、円や立方体などのオブジェクトをアニメーシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PlayCanvas Developer Resources | Learn PlayCanvas
Montegnies.net
GitHub - PixelsCommander/HTML-GL: Get as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL
GitHub - gre/glsl-transition: DEPRECATED – new project =>
http://clockmaker.jp/blog/2014/01/html5-webgl-away3d-typescript-samples/
xymatic - Sustainable Future Technology for Publishing
Demo: WebGL Photo Album