Hatena Blog Tags
はてなブログ トップ
WebGL
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

WebGL

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

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

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

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

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

#WebGL#アルファブレンディング

ネットで話題

もっと見る
403ブックマーク「TensorFlow.js」公開、Webブラウザ上で機械学習の開発、学習、実行が可能に。WebGL経由でGPUも活用www.publickey1.jp
352ブックマークHTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説www.slideshare.net
348ブックマークマウスで簡単に間取り図を作成し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
335ブックマーク初心者でも絶対わかる、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

関連ブログ

Unity 2Dゲーム作成 備忘録•4ヶ月前

【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テンプレート
機械学習基礎理論独習•6ヶ月前

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

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

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

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

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

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

【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 ドコモ開発者ブログ•1年前

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

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

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

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
株式会社シベスピ　従業員ブログ•1年前

【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
KAYAC Engineers' Blog•2年前

【WebGL】【MSDF】 イブにお父さんがサンタに変身する話

この記事はTech KAYAC Advent Calendar 2022の24日目の記事です。 こんにちは。 意匠部アートディレクターのおばらです。 普段は受託案件の アートディレクション テクニカルディレクション デザイン 3Dモデリング フロントエンド実装 などをしています。 また、社内フロントエンジニア向けに 生 WebGL オンライン勉強会を週5で1年間、開催したりしていました。 今は優秀な後輩に引き継いでいます。 techblog.kayac.com そんなわけで今日は WebGL のお話です。 はじめに さて、今日はクリスマス・イブ。 そんなイブに私は WebGL の記事が書きたい…

#Group_AdventCalendar2022#WebGL#SDF#MSDF#モーフィング
KENTEM TechBlog•2日前

ReactThreeFiberとCodepenで遊ぼう

この記事は、 KENTEM TechBlog アドベントカレンダー2024 20日目、12月20日の記事です。 こんにちは。KENTEMフロントエンドエンジニアのM.Sです。 3Dというのは人間を惹きつけるものがありますよね。 ゲームや映画から、ソフトウェアやWebサイトまで。 Webサイトで商品などをぐるぐる見渡せるエリアがあると、ついぐるぐるしてしまいます。 そこで今回は、普段Reactばかり触っている私でも3Dを扱うことができる、ReactThreeFiberについてご紹介していきたいと思います。 ReactThreeFiberとは？ インストール オブジェクトを表示してみる Orbit…

ABEJA Tech Blog•2日前

SpaceXのロケット技術を、自作シミュレーターで解説する

これはABEJAアドベントカレンダー2024年の記事である。普段プロダクトマネージャーを務める筆者が、2024年10月のSpaceXの衝撃的な垂直着陸成功を見てこの記事を書くに至った。 筆者の過去記事一覧 🏃 小型かつ安価なセンサーを使って人の行動推定を行ってみる 🛩 ドローンに使用される姿勢推定システムの作り方 🧹 掃除ロボットをかゆいところまで手の届く仕様に改造する 🎇 会社のVRワールドを1ヶ月で開発して忘年会を開催する方法 本日はSpaceXのロケットについて語るために、自作のシミュレーターを開発した。 ロケット開発やその制御技術は言葉だけで表現するには限界がある。 実際にブラウザで動…

kasu.log•3日前

WebXRでWeb小説サイトのVR対応に夢をみた

これは はてなエンジニア - Qiita Advent Calendar 2024 - Qiita の18日目の記事です。 昨日はid:r4wxiiさんによる AGP 8.4以降でアプリがクラッシュするようになった話 でした。 背景 課題 VR 端末 WebXR 方針 A-Frame in-VR navigation A-Frame まとめ Babylon.js HtmlMesh？ Babylon.js まとめ 結論 A: 遷移しないページング機能を組み込んだ WebXR アプリを作る B: Unity や Unreal Engine でペライチの WebView を表示する VR アプリを作…

KAYAC Engineers' Blog•4日前

【WebGPU】Compute Shader で Curl Noise を計算してパーティクルを動かす

🎄この記事は【カヤック】面白法人グループ Advent Calendar 2024の18日目の記事です 🎄 こんにちは！ハイパーカジュアルゲームチーム・エンジニアの深澤です。 WebGPU の Compute Shader で Curl Noise を計算し、パーティクルの位置を更新してみました。 スクショは、MacBookPro M1で100万個のパーティクルを動かしたものです。 画像をクリックするとデモに飛びます。 WebGPU で実装しているため、Chromeのみの動作となります。 デモURL: https://takumifukasawa.github.io/webgpu-partic…

KAYAC Engineers' Blog•4日前

おもしろ社内勉強会・ワークショップ総まとめ！

本記事は面白法人グループアドベントカレンダー2024の17日目の記事です。 こんにちは！意匠部のおばらです。 普段の業務では、受託案件のアートディレクション＆フロントエンドのテクニカルディレクションなどを担当しています。 さて、カヤックでは日々様々な社内向け勉強会やワークショップが自主的に開催されています。 本記事ではこれまでに開催されてきたエンジニア・デザイナー向けのおもしろ勉強会＆ワークショップを一挙にご紹介します！ エンジニアリング WebGL 勉強会 JavaScript コードゴルフ勉強会 デザイナー向けJavaScript 勉強会 デザイン デザイナー向け Photoshop ＆ …

vrc_yue•5日前

SESSIONS2024 Marble Race In Truchet CityのWrite-up

こんにちは、ゆえです。 これはSESSIONS Advent Calendar 2024の記事です。 adventar.org SESSIONS 2024 2024/11/16~2024/11/17にSESSIONSというイベントが日本科学未来館で行われました。 sessions-party.com 提出した「Marble Race in Truchet City」がCode Graphics部門で2位になりました。大変光栄です！ Shadertoyにアップしています。 www.shadertoy.com 「Marble Race in Truchet City」はトルシェタイルで街と道路を作…

AIでBCGを作るブログ•7日前

必要な物を聞いたら…

ゲーム構築にあたって必要なものを聞いてみた！ マジ何言ってるかわかりませんでしたw chatGPTから出力されたのがコレ 以下は、Windows 11 上で、Rust・Bevy・ink! を用いて Astar Network 上にブロックチェーンゲームを開発する際に必要と考えられるソフトウェア、ライブラリ、ツール類の一覧です。開発者環境構築を想定し、極力細かく示します。 開発環境・ツールチェーン 1. Rustツールチェーン • Rustup：Rustツールチェーンのインストーラー。 • Rust本体：stable版とnightly版（Substrate/ink!開発ではnightlyが求めら…

bati11 の 日記•15日前

AndroidでOpenGL ES

前回、WebGLでアルファブレンディングをやってみました。WebGLはcanvasタグを書いておけばそこにシェーダーで描画できました。 WebGLはとても簡単に動かすことができました。以前にAndroidのOpenGL ESの入門者向けの本を読んでとても勉強になったのですが、本が古いこともあって動かすのが大変でした。。その時のことのメモです。 いつも以上に自分向けの日記になってます・・・！ マルチプラットフォ-ムのためのOpenGL ES入門: Android/iOS対応グラフィックスプログラミング (基礎編)作者:山下 武志カットシステムAmazon マルチプラットフォ-ムのためのOpenG…

toggle Engineer Blog•16日前

PLATEAUの3D建物データを用途別に色分けして地図表示する

PLATEAUの3D建物をMapboxで手軽に可視化する mapチームのエンジニアの火原です。 今回は、国土交通省が提供する3D都市モデルデータ「PLATEAU」を使って、Web上で3D地図を作成する方法をご紹介します。 ポイントは、従来のUnityやUnreal Engineではなく、Mapboxを使用したアプローチです。これにより、より手軽で低コストな実装が可能になります。 なぜMapboxなのか？ 従来のPLATEAU可視化では、以下のような課題がありました： Unityの場合、WebGLビルドの容量が大きい Unreal Engineの場合、サーバーリソースが必要 どちらも開発コストと…

Renard's Blog•18日前

SESSIONS2024 WriteUp

これはSESSIONS Advent Calendar 2024の記事です adventar.org SESSIONS2024 WriteUp こんにちは、Renardと申します これは何 2024/11/16~2024/11/17に日本科学未来館で行われたSESSIONSというイベントのWriteUpです sessions-party.com 沢山の提出ありがとうございました。 私は作品の上映とか管理とかを主にやっていました 解説1 (Code Graphics Compo) youtu.be この、『[SESSIONS2024] 【ゆっくり解説】3分で分かる！「Classic GLSL G…

屋根裏工房改•20日前

ノイズを詳しく見てみよう ～ パーリンノイズ・シンプレックスノイズのしくみ

はじめに グラディエントノイズ (Gradient Noise) は、パーリンノイズやシンプレックスノイズが属する、勾配 (gradient, ∇) を利用したノイズ生成アルゴリズムの総称です。 パーリンノイズは聞いたことのある方が多いと思います。シンプレックスノイズはその改良版みたいなものです。 2 次元パーリンノイズ 2 次元シンプレックスノイズ 本稿では、これらのノイズがどのようにして設計されているのかを紹介したいと思います。 なお、特に記載がないコード片は Unity 上で動作する HLSL コードです。 残念ながら HLSL はシンタックスハイライトが効かないので C# と同じハイラ…

心鏡曼荼羅•20日前

ハチラボで開催されたテセレーション展でポワンカレの迷い鏡」を展示しました。

2024年4月23日(火)〜6月30日(日) こども科学センター・ハチラボで開催された「テセレーション展 あそんでたんきゅう！しきつめアート・パズル」に自作のアプリ「ポワンカレの迷い鏡」を展示しました。 www.tessellation.jp 渋谷ハチラボで開催中の テセレーション展おすすめ展示ポワンカレの迷い鏡モニターに映っているのは大小様々な自分。近寄ったり、ポーズを決めると連動して動きます。まるで万華鏡の中に迷い込んだような感覚にとらわれるでしょう。#テセレーション #ハチラボhttps://t.co/leb13DnvUB pic.twitter.com/BaUlUKoEVv— Yosh…

凹みTips•21日前

uMicrophoneWebGL の複数チャンネル対応

はじめに 今年はじめに Unity の WebGL ビルドでマイク入力を使えるようにするライブラリを作りました。 tips.hecomi.com ただ、次の記事にも記載したのですが、どうやら録音時に音声が遅くなってしまう（ピッチが低くなってしまう）という問題があるようです。 tips.hecomi.com 本記事では、こちらの調査と修正を行った結果をまとめたいと思います。 リリース github.com 問題と対応 ピッチが低くなるのはおそらくマルチチャンネル入力のバッファをモノラルの AudioClip のバッファに入れているからかな、と当たりをつけました。ライブラリ内には 2 箇所、モノラ…

土鍋で雑多煮•23日前

【WebGL】WebGL(UnityRoom)でマルチプレイをする【Photon Fusion】

はじめに どうも、土鍋です。 WebGL(UnityRoom)だと、マルチプレイゲームをどのように作るのか気になったのでやってみました。 結論から言うと、Photon FusionがデフォルトでWebGLにも対応しており、注意点を除いてほとんど詰まる所はありませんでした。 (記事としてはあっさりになってしまった…) (Netcode for GameObjectsでやってる記事は少なかったから今度はそっちをやるかも…？) やったこと 今回は特に特殊なことはやっていないので、非常にわかりやすい参考記事の方を参考にしてください。 コンテンツ作成 zenn.dev おおむねこちらのチュートリアルを参…