WebGLで綺麗な線香花火を作る
夏が完全に終わってしまいましたね。今年は花火をできなかった人も多かったことと思います。 そんなこともあってWebGL(three.js)を使って線香花火を作ってみました。 WebGL線香花火デモページ ソースコード(github) はじめに 写真や、スローモーションで撮影された動画などが参考になるのでまずは見てみましょう。 画像検索:線香花火の写真 参考にした動画 玉から飛び出した火花が分裂している、そして火花の動きが速すぎて人の目には点ではなく線に見えるのがわかると思います。 また、写真ではボケが遠近感を出していて美しいので再現したいですね。 この記事では、WebGLによる線香花火の描画について、個人的に線香花火の大事だと思う3つの要素 滑らかな軌跡 綺麗な枝分かれ 美しいボケ それぞれについて解説します 滑らかな軌跡: 火花の軌跡の方程式 シンプルな自由落下ではなく、空気抵抗も入れた式
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を起動すると以下のようなウィンドウが表示されます。 表示させたままで次のステップへ進みま
クリエイティブ開発者のブルーノ・シモンズさんが、3DCGモデリングソフトの「Blender」を使って自身の部屋の3Dモデルを作成し、WebGLとThree.jsを使ってウェブブラウザ上で表現した「My Room in 3D」を公開しています。 My Room in 3D https://my-room-in-3d.vercel.app/ これが「My Room in 3D」。画面右上には部屋の見た目を変更することができる各種パラメーターが用意されています。 「baked」では部屋全体の見た目を変更するオプションが並んでおり、「uNightMix」は部屋の明るさ、「uNaturalMix」は部屋の色味(白基調か木目調か)、「uLightTvStrength」は部屋に配置されているテレビの後ろのライトの強度、「uLightDeskStrength」はデスク周りのライトの強度、「uLightPc
【WebGL】【MSDF】 イブにお父さんがサンタに変身する話 - KAYAC engineers' blog
この記事はTech KAYAC Advent Calendar 2022の24日目の記事です。 こんにちは。 意匠部アートディレクターのおばらです。 普段は受託案件の アートディレクション テクニカルディレクション デザイン 3Dモデリング フロントエンド実装 などをしています。 また、社内フロントエンジニア向けに 生 WebGL オンライン勉強会を週5で1年間、開催したりしていました。 今は優秀な後輩に引き継いでいます。 techblog.kayac.com そんなわけで今日は WebGL のお話です。 はじめに さて、今日はクリスマス・イブ。 そんなイブに私は WebGL の記事が書きたい。 どうしても書きたい。 イブと WebGL をどうにかしてこじつけられないか。 悩みました。 そうだ、イブといえば世の中のお父さん※ がこっそりサンタに変身する日。 というわけで WebGL で「お
はじめに この記事はHIKKYアドベントカレンダー2023の10日目の記事です。 こんにちは、 @emadurandal と申します。HIKKYのエンジン開発部でメタバースエンジンの開発に従事しています。 今回は、WebGLからWebGPUへのステップアップについての記事を書いてみようと思います。 なぜWebGPUが登場したのか WebGLはOpenGL ESのAPI体系をブラウザに移植したものです。 そのOpenGLですが、歴史的経緯により、GPUやCPUの性能を完全に引き出しきれないレガシーな部分を引きずっていました。 詳しくはこちらの記事をご覧ください。 そのため、WebGL2の次はWebGL3というわけにはいかなかったようです。 よりGPUの性能を引き出せる、よりモダンなAPI体系が必要でした。ネイティブにはVulkan APIがありますが、それをそのままブラウザに持ってくるには、
キム・ジョンミン氏がコードで作成した幾何学的なサンセリフ体のフォント「Leon Sans」は、HTML5のCanvas要素やWebGLを用いてカスタムアニメーションが楽しめるというものです。 Leon Sans https://leon-kim.com/ Leon Sansはコードで作成されたフォントで、各文字の描画ポイントの座標値を持っているため、フォントの線の太さを変更したり、アニメーションを作成したりすることもできるというフォントになっています。Leon Sansで表現可能なアニメーションは以下の通り。 線が引かれていく様子をアニメーションで表現する「Drawing animation」。 各文字の線の太さを変更する「Weight change」。 フォントの線を波のように揺らす「Wave」 「Drawing animation」＋「Weight change」のような「Metaba
たいそうなタイトルから始まりましたが。。 自分のGLSL力を向上させるために本企画始動しました。 （一回で終わらないようにしないとな） 「これいいな〜」と思った表現を、 コピペではなくソースコードを見ながら理解していきたい！という趣旨の、 超個人的学習記録です。 みなさま、お手柔らかにお願いします。。 ちなみに5月くらいからシェーダーを少しずつ勉強してまして、 下記が学習の記録です。 合わせてご覧いただけると嬉しいです。 【WebGL / GLSL】デザイナーにモテるためのWebGL入門（概念編） 【WebGL / GLSL】ド文系だけど、行列とかラスタライズとか頑張って理解する 【WebGL / GLSL】「The Book of Shaders」のサンプルを、WebGL APIいじるところから頑張って再現する 【WebGL / GLSL】GLSLはconsole.log()なんてできな
メダル１００万枚から女将を呼び出せるようになりました。お寿司をぶつけましょう。 （ぺこやま） youtube ON OFF
初めてのWebGL 2 第2版
WebGL 2プログラミングの入門書。WebGL APIによりプラグインなしで3Dコンピューターグラフィックスをブラウザに表示できます。本書では、自動車の3Dモデルビューアーを例に、インタラクティブな3DCGを使用するウェブアプリケーションの開発方法について解説します。対象読者は初中級のウェブプログラマー。JavaScriptの基礎知識は必須ですが、3D数学の詳しい知識は不要です。ベクトル演算や行列演算にはライブラリを使用するので、具体的な計算処理を意識することなくWebGL 2プログラミングに集中できます。読者はWebGL 2で本当に必要な部分を本書一冊でマスターできます。 序文 訳者まえがき まえがき 1章 イントロダクション 1.1 システム要件 1.2 WebGLレンダリング 1.2.1 ソフトウェアベースレンダリングとハードウェアベースレンダリング 1.2.2 サーバーベースレン
three.jsやpixi.js等のライブラリを一切使わずにwebGL実行環境をJavaScriptスクラッチする(したい)
青い長方形が表示されているだけですが、テクスチャ画像に表示を切り替えたり頂点の数を変えたり(四角を三角にしたり)する場所にコメントを入れてコネコネできるようにしています(リサイズ対応済み...のはず) 埋め込みcodepenの下に連ねている引用元の素晴らしい入門サイトから、バラバラとコードを繋ぎ合わせているため、コードの整合性や効率に言及できていません。「動いた〜〜やった〜〜」程度の実験場です。「ちょっとこのfragmentShaderの挙動試したいな〜」という時にすぐ動かせる場所がほしくて書いています。 webGL入門サイト webglfundamentals wgld.org ICSメディア オススメwebGL学習教材(動画) codemafiaさん shin-codeさん
WebGL（Three.js）参考サイト10選【日本・海外に分けて紹介】 公開日 : 2022.01.24 最終更新日 : 2022.10.05 コーディング webGLの参考サイトを「日本サイト」「海外サイト」に分けご紹介させて頂きます！ 少しでもwebGLサイトを作る上で助けになってもらえると嬉しいです。 【日本サイト】HOMUNCULUS web業界では知らない人はいないであろう有名な制作会社のホモンクルス。 webGLを使用した美しい流線型のデザインが実装されています。 紹介されている制作実績もwebGLを使用したものが多いので合わせてチェックしてみるのもいいかも。 https://homunculus.jp/ KIRIFUDA こちらも有名企業の切札。 細部までこだわった動き、スクロール時の気持ち良さ。どれを取ってもピカイチです。 こちらの会社さんの制作実績もwebGL満載ですの
Unity WebGLとThree.jsに連動して踊っていただく - KAYAC engineers' blog
Unity WebGLとThree.jsに連動して踊っていただく ごぶさたしてます。@fnobiです。こちらは面白法人グループ Advent Calendar 2022の20日目の記事になります。 確認してみたら前に記事を書いたのは2019年のようですねー。3年の間にディレクター転向したり子会社に転籍したりなんかいろんなことが起きてました。げんきです。現在はカヤックアキバスタジオにてファンコミュニティ事業というチームを率いて頑張っています。 akiba.kayac.studio さてそんなわけで、今回はせっかくなので、今年のプロジェクトでよく使ったUnity WebGL書き出しの話題です。 まずはこちらのサンプルをご覧ください。 youtu.be デモ github レンガ的ななにかが、右と左でおんなじ動きをしてますね。つまんねえなと思ったあなたもうちょっと待ってね。こちら実は、どちらもW
3Dコンテンツの制作において「三角関数は必須」とよく聞きます。ウェブサイト制作で三角関数を使う場面はほとんどありませんが、WebGLの勉強をすすめると3Dでは三角関数を使う場面が多いことに気づきます。本記事では3Dコンテンツ制作で使用頻度が多い基本的な数式と概念をまとめました。 今回解説する内容は地味ですが、ゲームやデータビジュアライゼーションを作る上でこの数式が基本となってきます。高校数学で学んだことをベースに、3つのサンプルを通して学習できるようまとめましたので、ぜひ最後までお付き合いください。WebGLの人気ライブラリの1つ「Three.js」を使って解説しています。 三角関数を使ったデモの紹介 まずは、本題に入る前に三角関数を使ったデモを作成したので紹介します。次のリンクをクリックしてご覧ください。 デモを別ウインドウで再生する ソースコードを確認する 地球をモチーフにしたサンプル
【連載】#1 twigl.app で始める GLSL クリエイティブコーディング！ まずは GLSL の基本を理解しよう - WebGL 総本山
top 2020 年 05 月 【連載】#1 twigl.app で始める GLSL クリエイティブコーディング！ まずは GLSL の基本を理解しよう まずは気軽に始めてみよう 今回から、いつもとは少し趣向を変えて GLSL のチュートリアル記事を連載形式で書いていこうかなと思います。 きっかけは、最近にわかに（ごく限られた界隈で）話題になっていた #つぶやきGLSL というハッシュタグつきの一連のツイートです。 このハッシュタグが付けられたツイートは、GLSL のソースコードを１つのツイートに収まる長さで記述して、そのキャプチャ画像（主に GIF アニメーション）と一緒にツイートするというもので、日本国内だけでなく、海外の GLSL を嗜む人々によってたくさんの GLSL 作品が投稿されました。 一部の界隈ですごく話題になったということもあり、これら一連のツイートで初めて GLSL の
ゆうしゃたちはぜんめつした！ ―レ●ナ＆マ●ム 恥辱の宴― WebGL版 Ver.1.0.1
説明 進行ゲージ（青いバー）を二人共MAXにする事で次の段階へ進めます。二段階目の進行ゲージをMAXにすると脱出チャレンジが始まります。 カーソルをタイミングよく止めて逃亡ゲージを上昇させ、制限時間内にMAXにできれば成功です。エンディングは２つあります。脱出チャレンジの成否で分岐します。イベントシーンは右クリック長押しでスキップ可能、 キャラクターを注視している状態でマウスホイールを回転（キーボード１～４も可）させると注視する場所を変更できます。挿入アクションは挿入しきるまでこすり状態を続けて下さい。途中でこすりを止めてしまうと膣圧により徐々に押し戻されてしまいます。 PC版はじめました フルスクリーン未対応など、まだ不備な点もありますが試しにPC版も作ってみました。 内容自体は無料で遊べるWebGL版とほぼ同じですが、オフラインでも遊べる他にも、差分テクスチャの追加、テクスチャ自体の高
Adobe FlashをHTML 5で代替するPixi.jsがWebGLを新たにサポート、クロスプラットフォームとインタラクティブアプリに対応
「FinOps、アプリケーション単位の経済性、クラウドコストの最適化について、ロワ・ラヴホン氏語る」 このエピソードでは、Finoutの共同設立者兼CEOであるRoi Ravhon氏が、InfoQポッドキャストの共同ホストであるDaniel Bryant氏と対談し、FinOpsの出現と業界の採用について議論した。この対談では、FinOpsを採用するメリット、クラウド・コストについてもっと知りたいと考えている組織の典型的な道のり、実装を成功させるために必要な様々な文化やツールといったトピックが取り上...
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
WebGL Aquarium
tdl.js - aquarium fps: canvas width: canvas height: Number of Fish Change View Advanced Options...
GitHub - lesnitsky/webgl-month: 🎓 Daily WebGL tutorials
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
はじめに 通常、Unity で動的にサウンドを生成したいときは、AudioClip の Create で PCMReaderCallback を渡すか、MonoBehaviour の OnAudioFilterRead 中でバッファをセットすることで可能です。 docs.unity3d.com docs.unity3d.com かなり古い記事ですが、以前解説も書きました（一部有料機能と述べているところは現状はすべて無料です） tips.hecomi.com AudioClip に SetData して再生することも出来ますが、初期化時ではなく毎フレームデータを与えたい場合はこれは利用できません。正確にはセットして再生はできるのですが、サウンドの読み取り・再生自体はサウンドのスレッドで行われているため、Update などのメインスレッドから与えるとうまく再生されない（途切れたりする）からです
Recreating Real-World Terrain With React, Three.js & WebGL Shaders
Recreating Real-World Terrain With React, Three.js & WebGL Shaders Flight Simulator, Heard Of It? You might know about Microsoft's Flight Simulator release in August last year and like me, if you're interested in flight simulators or photorealistic recreations of real life places, you might have spent a lot of time staring in awe at the amazing detail crammed into the latest iteration of the serie
次世代仕様のWebGPUとは？ 次期macOSでのOpenGL非推奨化は WebGLに影響をもたらすのか ウェブの3Dグラフィックスを扱う新しい仕様として、WebGPUが提案されています。広く普及したWebGLがある中で、WebGPUとはどういった目的で生まれようとしているのでしょうか？ 本記事ではWebGLとWebGPUの違いと、近況を紹介します。 業界を震撼させたAppleのOpenGL非推奨化 今月6月上旬に開催されたWWDC 18で発表されたmacOS 10.14 MojaveとiOS 12のウェブページでは、OpenGL/OpenCLおよびOpenGL ESを非推奨化する旨が記載されています。macOS 10.14とiOS 12でOpenGL等は引き続き動作するものの、Metalへの置き換えを呼びかけています。 ▲What’s New in macOSにはOpenGLとOpenC
はじめに Webに3Dモデルを表示したい場合、やはり少しでも容量を軽くしたいですよね。 手元の3Dモデルの形式が何であるかによりますが、 基本的には.glb形式がWebで使う一般的なデータ形式となります。 例えばもし.objでモデルを持っているならobj2gltf、.fbxならFBX2glTFあたりで変換すると便利です。 gltfをglbに変換する場合はmakeglbを使うといいと思います。 実はglb（gltf）に変換するだけで結構容量が圧縮されます。 でも問題はここからです。 ここまで変換してもまだ重い、もしくはBlenderから直接glb出力したけどめっちゃ重い！！ ということも結構ありますよね〜 そういう場合の対処法が、 DRACO圧縮とBasis圧縮です。 本記事では、上記の圧縮を行い、three.jsを使用してWebに表示するまでを解説します。 ちなみに今回使用する圧縮なのです
朝の時間を使って週に3回WebGL勉強会を半年開いてみた結果www - KAYAC engineers' blog
こちらはTech KAYAC Advent Calendar 2022 12/4 の記事です。 ご覧いただきましてありがとうございます、カヤックでWEBフロントエンジニアをしています新卒3年目のbobと言います。 www.kayac.com 昨日は同期のフロントエンドエンジニアのmiyabinの記事でした。Svelteという新しいフレームワークを仕事に投入したという内容になっていますので、もしよろしければぜひこちらもご一読を！ techblog.kayac.com 今回の記事では、タイトルの通り半年間朝の時間を使って勉強会を開いてきて得られた知見や感想を書いていきます。 何か新しい知識を得たい・会社に普及させたい、会社で勉強会を開きたいといった方にとって少しでも参考になりましたら嬉しいです。 WebGLとは何ぞ？？ 勉強会の話題に行く前に、まずWebGLという単語について説明します。 あま
できらぁっ！ この記事は Tech KAYAC Advent Calendar 2020 の22日目の記事です。 こんにちは、原です。 普段はクライアントワークチームでunityを使って色々インタラクティブなものを作ってる、2児の父です。 unityroom、いいよね 普段の仕事ではVRとかARとか、未来志向なものに近いことをやっているのですが 2児の父にもなりますと、もっと身近に体験できるジャンルのものづくりにも興味が湧いてきますね。 ということで、身近に体験できると言えばunityroom。 unityroom.com ご存知の方も多いと思いますが、UnityからWebGL書き出しをしたファイルをアップロードすることで、即自分の作ったゲームを公開できる素晴らしいWebサービスです。 これを使えば、簡単に子供と一緒に自作ゲームで遊べる！ やれんのか！UnityWebGL でも、unity
GitHub - jnmaloney/WebGui: An example demo of IMGUI (Immediate Mode GUI) on the web. Using only WebGL, GLFW and ImGui. Suitable for being compiled to web assembly (WASM).
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
将皇(WebGL版) ブラウザで遊べる将棋
2022/2/10 ver0.5を公開しました。正しく動作しないなどあれば、ブログの方にコメントをお願いします。 ブログ 【画面が真っ暗で動かない時は？】 旧バージョンのファイルがキャッシュされているとアプリが正常に動作しません。 その場合、キャッシュを使わないスーパーリロードを行うことで正常動作する可能性があるためお試しください。 <参考URL> 各ブラウザでの強制リロード(スーパーリロード)まとめ
【WebGL】three.js : soft particle - KAYAC engineers' blog
~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは！クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善点 霧の表現 最後に ソフトパーティクルについて ソフトパーティクルとは おおまかに一言でまとめると「深度値の比較をして透過率
Apple Silicon搭載のMacでもOpenGLなどのグラフィックスAPIがサポートされ、数週間以内にはSafari Technology PreviewでWebGL 2がデフォルトで有効に。
Apple Silicon搭載のMacでもOpenGLなどのグラフィックスAPIがサポートされ、数週間以内にはSafari Technology PreviewでWebGL 2がデフォルトで有効になるそうです。詳細は以下から。 Appleは2018年に開催したWWDC 2018で開発者に対し、今後macOS MojaveおよびiOS 12、tvOS 12からグラフィクスAPI「OpenGL (OpenGL ES)」および「OpenCL」の利用を非推奨とすると発表し、オーバーヘッドの少ないAppleのグラフィクスAPI「Metal」への移行を勧めたため、 Webエンジニアの方々からはOpenGL ESベースのWebGLがSafariで利用できなくなるのではないかという心配の声もありましたが、その後、Apple WebKitチームのDean Jacksonさんは「OpenGLが非推奨となっても
Unityのモバイル向けWebGL〜理想のチンアナゴを求めて〜 - KAYAC engineers' blog
僕は、普段は鎌倉でゲームエンジンの「Unity」を使って仕事をしているんですが、今年もアドベントカレンダーの季節がやってきました。 近頃弊社のUnityエンジニア界隈では、モバイル向けのWebGL書き出し機能がいよいよ使えるようになりそうだぞ、何なら実際に案件に使っているプロジェクトもあるらしいぞと色めきたっています。（公式ではサポートしてないが、性能が充実してきていて実質使える状態になりつつある） ようし、今年のアドベントカレンダーは、Unityのモバイル向けWebGLの話を書こう！ そう思ったのはいいものの、どんな記事を書けばいいのかさっぱり思い浮かびません。 追い詰められた僕はオフィスを飛び出し、近所の江ノ島水族館にいるチンアナゴの田中さんに相談してみました。 www.enosui.com すると、田中さんからこんなアドバイスを頂いたのです。 そうか・・！ チンアナゴであれば、作るの
Unity WebGL Player | IroSphere
IroSphere Web版 解説動画 Youtbe版, ニコニコ版 IroSphere Legacy版GitHubリポジトリ https://github.com/TaliPhoto/IroSphereLegacy ※こちらはWEB版以前のUnityプロジェクトファイルになります ライセンス ・このWEB版についての使用制限は一切ありません。ご自由にお使いください ・GitHubで公開しているプロジェクトファイルもCC0になります。ご自由にお使いください クレジット Tali → Twitter, Youtube, niconico えれのあ → Twitter 更新履歴 2023-04-28 ・OptionのLightnessだけResetが効かなくなっていたバグを修正 2023-04-25 ・OptionにLightness（明度）パラメーター追加 ・OptionのSaturatio
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Edge で three.js を利用したデータが表示できなかった． デバッガで追いかけると，WebGL を利用できない様なエラー． Edge を再起動すると，うまく表示できるようになった． 何だったのだろう？ 2023/01/17 Win8.1 環境の Edge で「使用可能な場合はハードウェア …」を OFF にする必要があった．
Why? Can interact with mouse / touch Customize colors & style to match your brand No pixelation – Canvas runs at full resolution Smaller filesize than background videos and large background images – three.js is ~120kb minified and gzipped Runs fast (60fps) on most laptops/desktops What's the catch? Some WebGL effects are slow on older computers. Don't use more than one or two in a single page! Not
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
概要初めまして。こんにちは。モーショングラフィックデザイナーの平井です。以前下記のようなWebサイトの制作に関わりまして、 ざっくり説明すると3Dのキャラクターがサイト内を駆け回り、ユーザーのアクションにも反応するインタラクティブな演出などが特徴のサイトです。 僕はこちらのキャラクターの動かしとアニメーション素材をWebで使える（WebGL向け）素材に書き出すのを担当していました。そしてその3D素材のデータ形式には「glTF」というデータ形式を採用しました。 3DCGを使って映像を作る（レンダリングして.mp4とか.movにする）のとWebGL向けに3Dの素材を書き出すというのは結構勝手が違うのですが、3DCG側のワークフローがあまり共有されていない（ネットで色々検索したが参考記事などがあまり見当たらず困った）ので知見を共有しておきたいなと思い、今回記事にすることにしました。 glTFとは
![WebGL向け3DCG素材のglTF書き出しについての覚書[WW|UNLOCK YOU]｜shujihirai](https://cdn-ak-scissors.b.st-hatena.com/image/square/b762ce7df09ac6c55271f81b1d17c95731e50f96/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F16507563%2Frectangle_large_type_2_4dbe055349a2e1a5c7551983787c117c.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
WebGL テッセレーション ビューワ 「独自の高次元曲面パッチデータを WebGL 上でリアルタイムにテッセレーションし、ウェブブラウザに表示する 3Dモデルビューワ」を作ってみました。 と、突然言われても意味が分からないと思われるので、下記にデモのリンクを貼りました。（Netlify を使用） リンクをクリックすると、デモの 3Dモデルビューワが開きます。 Beziex_We : (https://beziex.netlify.com/beziex_we/) キャッシュが無い時の起動は遅いかもしれませんが、気長に待っていただけると助かります。ちなみにスクリーンショットは、こんな感じです。（元データは クールなびじゅつかん館長さんのツイート を使わせていただきました。CC0 1.0 です） 左が Windows 上、右が Android 上（縦向きのみ対応）で、どちらも Chrome で
(Unity-chan: © Unity Technologies Japan/UCL) さすがにこの規模のアプリケーションをwasm2cして動作させている例は他に無いんじゃないかという気がする。PhysXとか入ってるし。 何ができたの Node.jsでUnity WebGLのアプリを動くようにした (OpenGL ES2とSDLを使用) 更に、WebAssembly部分を wasm2c でネイティブコードにAOTコンパイルできるようにした 将来的にはNode.jsも動作には不要にできるはずだが、今のところそこには至っていない。 これにより、JavaScriptインタプリタさえ何とかすれば、Cで書かれたSDLプログラムと同等の移植性をUnity WebGL出力にもたせることができた。 動機 個人的に製作中のゲームの開発/オーサリング環境をWebAssemblyに集約する上で、それなりの規模
GitHub - maplibre/maplibre-gl-js: MapLibre GL JS - Interactive vector tile maps in WebGL2
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
introduction みなさまこんばんは。 doxas と申します。 こちらは Three.js Advent Calendar 2019 - Qiita の 12 日目の記事です。 令和元年の年の瀬、いかがお過ごしでしょうか。 私はと言いますと、なかなかに余裕の無い毎日を送っておりまして今年はアドベントカレンダーも書く余裕が無いなと思っていたのですが、technohippy さんが毎日のようにアドベントカレンダーへの投稿を呼びかけているのを見るにつけ、これはせめて少しでもお手伝いしなければと思い立ち筆を執った次第です。（イベントの主催とかもそうですが、こういうの呼びかける側というのはそこそこに精神的疲弊があったりしますよね……） technohippy こと、あんどうやすしさんはオライリーの「初めての Three.js」の訳者さんなのはみなさんご存知かと思いますが、私もこれで thr
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGLデバッグに最強な「RenderDoc」 - Qiita
WebGL×Three.jsの組み合わせでウェブ上で美麗に動く3DCGの部屋を再現した「My Room in 3D」
WebGLからWebGPUにステップアップしよう！ - Qiita
Canvas要素やWebGLでアニメーションが楽しめるコード製フォント「Leon Sans」
【WebGL / GLSL】シェーダー100本ノック 〜 ディストーションエフェクト - Qiita
Unity WebGL Player | 女将に寿司をぶつけるのひどいよね
WebGL（Three.js）参考サイト10選【日本・海外に分けて紹介】 | AndHA Blog
WebGL開発に役立つ重要な三角関数の数式・概念まとめ （Three.js編） - ICS MEDIA
GitHub - oframe/ogl: Minimal WebGL Library
Unity の WebGL で動的にサウンドを生成・再生する方法を調べてみた - 凹みTips
次世代仕様のWebGPUとは？ 次期macOSでのOpenGL非推奨化はWebGLに影響をもたらすのか - ICS MEDIA
【WebGL / three.js】DRACO＆Basis圧縮でWebに最適なレベルまで3Dモデルを圧縮する
え？UnityのWebGL書き出しでもリッチな表現を？ - KAYAC engineers' blog
WebGL による新しいマップ機能の使用
Edge で WebGL が表示できない？ - IwaoDev
Vanta.js - 3D & WebGL Background Animations For Your Website
HTML CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 （前編） - ICS MEDIA
WebGL向け3DCG素材のglTF書き出しについての覚書[WW|UNLOCK YOU]｜shujihirai
WebGL でテッセレーションして、曲面パッチ間が滑らかに繋がった物体を表示（１） - Qiita
Unity WebGLをwasm2cでC言語に変換して動かす
ほぼ実録 three.js 案件とピュア WebGL 案件 2019 年版 - Qiita