Hatena Blog Tags
はてなブログ トップ
WebGL
このタグでブログを書く

WebGL

(コンピュータ)
【うぇぶじーえる】

ウェブページ上で3Dグラフィックスを表示する規格。canvasタグの拡張。OpenGL ES 2.0のラッパー。Firefox 3.7以降、Firefox for Mobile 1.0、Google Chrome 4 開発版、Safari開発版で実装されている。

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
D日記•3ヶ月前

【Unity.windows】WebGLビルドを同Wi-Fiネットワーク上のiPhoneで確認する方法

「iPhoneで動かしたい！」→ でもXcodeがない…？ 必要なもの 手順：iPhoneでUnityを即チェック！ ① WebGL形式でビルドする ② ツールにD&D（ bat ファイル） ③ WindowsのIPアドレスを確認する ④ iPhoneのSafariでアクセス！ 詰まりポイント＆補足Tips まとめ 「iPhoneで動かしたい！」→ でもXcodeがない…？ UnityでUIデザインをしていると、「このUI、iPhoneでどう見えるかな…」という悩み、あるあるですよね。 でも、iPhoneは基本的にXcode + Macがないとビルドできないので、Windowsユーザーはそこで…

#Unity#WebGL#モバイル

ネットで話題

もっと見る
402ブックマーク「TensorFlow.js」公開、Webブラウザ上で機械学習の開発、学習、実行が可能に。WebGL経由でGPUも活用www.publickey1.jp
354ブックマークHTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説www.slideshare.net
350ブックマークマウスで簡単に間取り図を作成しWebGLで立体化して中を動き回れる「Wanaplan」gigazine.net
343ブックマークHTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な...www.natural-science.or.jp
337ブックマーク初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞html5experts.jp
317ブックマークブラウザーの3D表現もここまで来た！WebGLを使った驚きのWebサイトw3q.jp
300ブックマークOpenGLなにそれうまいの?? という人のためのWebGLの始め方 - hagino3000's bloghagino3000.hatenablog.com
271ブックマークWebGL WaterMade by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move i...madebyevan.com
247ブックマークWebGL and Three.jswww.slideshare.net

関連ブログ

bati11 の 日記•1年前

WebGLのアルファブレンディングやってみる

前々回はドットで線を描画、前回はドットで矩形の描画とアルファブレンディングをやってみました。 どちらもループ処理で1ドットずつ打っていきました。例えばフルHDだとピクセル数は1920×1080=2073600になりますが、これだけの数を順番に1ピクセルずつ色をつけているのでしょうか？たぶん実際はGPUを使って並列にピクセルに色をつけるのではないかなと思います。今回は、WebGLでシェーダーを使ってGPUでドットを打ちます。 JavaScriptでCPUを使った処理だと下図の左のように1ピクセルずつ順番にループ処理で色付け、WebGLでGPUを使った処理だと下図の右のようにvertexシェーダー…

#WebGL#アルファブレンディング
Unity 2Dゲーム作成 備忘録•1年前

【webGL】スマホかタブレットかを判別する（JavaScriptからunityにデータ送信する）【htmlテンプレート】

概要 ダウンロード 使い方 1. Default_DTRフォルダ 2. DeviceTypeReceiver.cs カスタマイズする 補足：JavaScriptからunityにデータ送信するには？ 概要 unityのwebGL用htmlテンプレートの頒布です。「Default」のテンプレートを改造しています。webGLを再生している端末が、スマホ/タブレット/PCのいずれかを判別して、unityに送信してくれます。※webGLではScreen.dpiが使えないため、JavaScriptで端末の判別をしています。※端末の判別は、画面のインチ数を算出して振り分けています。 ダウンロード ※unit…

#WebGL#unityと連携#JavaScriptと連携#HTMLテンプレート
機械学習基礎理論独習•1年前

glTF2.0の仕様をもう少し細かく見ていく

はじめに 本記事は、glTF2.0の仕様を私が必要な箇所だけ説明するという内容です。 こちら の記事の gltfOverview2.0-Japanese.png を引用します。 gltfOverview2.0-Japanese.png に一言付けたした内容になっております。 glTF2.0を読み込むプログラムを書くことを意識したものとなっております。 無視する内容、考えない内容 camera,animation,モーフは無視します。 モデルは1つであるとします。 頂点のUV座標は1種類であるとします。 まあ要は、3Dモデルの定義ファイルとして glTF2.0 を活用しよう、理解を深めようってこ…

#glTF#WebGL
機械学習基礎理論独習•2年前

WebGLは列優先で行列の右側から列ベクトルを掛ける

はじめに 「WebGL/OpenGLは列優先だから」という説明を見受けますがそれはいったい何なんだってことを説明します。 ちなみに「列優先だから」というだけでは何もわかりません。 行列のメモリレイアウト 行列として4x4を考えます。 そうすると、スカラーが4x4=16個必要なわけです。 メモリの効率を考えて、この16個の数値を1次元配列に持ちます。 この数値が、列を優先して配置されるとき、列優先といい 行を優先して配置されるとき、行優先といいます。 が列優先で、 が行優先です。 列優先、行優先をを変換する場合転置すればよいことが分かります。 行列とベクトルを掛けるとき 普通、ベクトルは列ベクト…

#WebGL#コンピュータグラフィックス
KAYAC Engineers' Blog•2年前

【Meta Quest3】WebXRでできる！フルカラーパススルーMR開発【Unity】

この記事は、Tech KAYAC Advent Calendar 2023 の23日目の記事です。 こんにちは。カヤックボンドでエンジニアをやっております青木です！ この記事では、Meta Quest3を利用したブラウザ上で動くWEB MRコンテンツの開発方法と、簡単な公開方法をご紹介します。 目次 目次 はじめに Quest3で使ったものの公開方法を考える 環境情報 環境構築＋サンプルシーンビルド (折り畳みあり) 1 . Web GLビルドの新規プロジェクトを作成する 2 . PackageManagerのScoped Registriesにレジストリを登録 3 . 必要なパッケージをイン…

#WebGL#Unity#METAQUEST3
ENGINEERING BLOG ドコモ開発者ブログ•2年前

今年ホットなWebGPUのその凄さを体感してみよう！！

はじめに こんにちは！ＮＴＴドコモクロステック開発部の藤枝です！ この記事は、NTTドコモ R&D Advent Calendar 2023 23日目の記事です。 クリスマスの記事ということで、まずは皆様今年もお疲れ様でした！ 今年も残すところ残り僅かというところで、あと少し乗り越えて年末年始を楽しみましょう！！ 私のアドベントカレンダーは2回目ということでよろしければ、過去記事を載せておきますのでご覧ください！ nttdocomo-developers.jp 私の普段の業務は、XR機器における分散処理技術の技術領域を担当しており、上記記事は全くそちらに関係が無いように思われと思いますが、 新…

#XR#WebGL#WebGPU#Direct3D#Vulkan#GPU#NTTドコモ
Gaudiy Tech Blog•2年前

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

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

#Unity#WebGL#REST API#GCP#Firestore
株式会社シベスピ　従業員ブログ•2年前

【Three.js】Webページで3Dモデルを表示してみた

気になるホームページがありました こんにちは。 最近見かけた「CHILL OUT」という飲み物のホームページで、飲み物の缶がふわふわ動いていたので、どうやっているのだろうと気になって基本的な部分だけ実践してみました。 https://butfirstchillout.com/ WebGL (Web Graphics Library) このような技術は「WebGL」と呼ばれます。 Webブラウザで2D/3Dグラフィックスを表示することができるJavaScript APIです。 Three.js WebGLを実現するためのJavaScript ライブラリに「Three.js」というものがあります。…

#JavaScript#WebGL#Three.js
Activ8 Tech Blog•2年前

Babylon.jsとreact-babylonjsで3Dモデルを描画してみた

こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 2023年4月21日にBabylon.jsのバージョン6がリリースされ、界隈では話題になっておりますが、メタバース業界にいるフロントエンドエンジニアとしては、キャッチアップしておきたいと思い、Babylon.jsを触ってみました。 また、Babylon.jsをReactアプリケーション上で使えるreact-babylonjsも合わせて紹介します。 www.youtube.com はじめに 今回のアジェンダは以下の3つとなります。 Babylon.jsとは Babylon.js Playgroundでチュッパチャップス型…

#Babylon.js#Next.js#Three.js#WebGL#WebGL2#frontend