トップ差分一覧ソース検索ヘルプログイン

WebGL（ウェブジーエル）は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。

ネタ

glTFモデル用ビューワー『Khronos glTF Viewer』、iOS向けに無料でリリース。ソースコードはオープンソースで公開され、商用利用可能｜ゲームメーカーズ
https://gamemakers.jp/article/2023_12_13_57359/

WebGL のブラウザー間での互換性 - Unity マニュアル
https://docs.unity3d.com/ja/current/Manual/webgl-browsercompatibility.html

最新WebGL通信～いまキャッチアップしたいWebGL2・WebGPU・WebXRとは～ - ICS MEDIA
https://ics.media/entry/19657/

Babylon.js、PlayCanvasといったWebGLフレームワークではすでにWebGL 2.0をサポートしています。その機能を積極的に使っていきましょう。
※ Three.jsではr100現在、WebGL 2.0の一部機能のみがサポートされており、上記で紹介しているような規模の大きな新機能については対応中のようです

WebGL2をオブジェクト指向っぽく触れるライブラリXenoGLを公開しました
https://sbfl.net/blog/2018/02/12/webgl2-xenogl/

S.F. Blog:WebGL 2.0で作り直し始める。そのためにthree.jsの利用をやめ、twglを使うことにする。
https://www.sfpgmr.net/blog/entry/2017/12/d7a27f66d20c8ee0408fe6c53e6c4ad3.html
TWGL.js, a tiny WebGL helper library
http://twgljs.org/

Basis

Basisとは
　Basis Universal Texture Format のこと、拡張子は.basis
　3Dモデルのテクスチャ用中間フォーマット
　GPU向きの圧縮形式で、VRAM使用量が少ない

JPG や PNG との違い
　JPGやPNGはネットワーク上での転送に適したフォーマット（転送時は軽い）
　WebGL使用時には、生のRGB(A)に解凍するため、（Basisに比べ10倍以上の）VRAMを使用してしまう
　VRAMを使用しすぎるとクラッシュしやすくなる

参考サイト
Khronos Blog - The Khronos Group Inc
https://www.khronos.org/blog/google-and-binomial-contribute-basis-universal-texture-format-to-khronos-gltf-3d-transmission-open-standard
Googleがテクスチャの圧縮技術を開発しているBinormialとオープンソースのユニバーサルテクスチャフォーマットで協力 Shader.jp
https://www.shader.jp/?p=2523
GoogleとBinomialがBasisのソースコードをリリースしました| Linuxから
https://blog.desdelinux.net/ja/google-y-binomial-liberaron-el-codigo-fuente-de-basis/
PlayCanvasでBasisテクスチャ圧縮が利用可能に！ PlayCanvas
https://support.playcanvas.jp/hc/ja/articles/1500001523822
WebGLでのテクスチャ圧縮を容易化 PlayCanvas
https://support.playcanvas.jp/hc/ja/articles/115004272387
Now in REALITY Tech #24 REALITYアバターの軽量化｜REALITY｜note
https://note.com/reality_eng/n/n24d637603725
【WebGL / three.js】DRACO＆Basis圧縮でWebに最適なレベルまで3Dモデルを圧縮する
https://zenn.dev/tanabee8/articles/fc40a20deebcbd
ABC 2013 Autumn 『知っておきたい、画像データ圧縮の仕組みと特長～ETC とPVRTC～』発表資料
https://www.webtech.co.jp/blog/wp-content/uploads/2013/10/ABC2013a_WebTech.pdf

Three.js

Three.js - Wikipedia
https://ja.wikipedia.org/wiki/Three.js

three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、
クロスブラウザ対応の軽量なJavaScriptライブラリ及びアプリケーションプログラミングインタフェースである。

Browser support three.js docs
https://threejs.org/docs/#manual/en/introduction/Browser-support

GLTFExporter
https://threejs.org/docs/#examples/en/exporters/GLTFExporter

Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=webgl

Three.js入門サイト - ICS MEDIA
https://ics.media/tutorial-three/

基本・選択視点変更時の操作 - webgl - three.js
http://webgl.akjava.com/blender/basic

サンプル

three.js - Javascript 3D library
https://threejs.org/

WebVR Showroom by Little Workshop
https://showroom.littleworkshop.fr/
リビングの色替え

FF 91 VR
http://vr.ff.com/us/
車の走行

Infinitown | A WebGL Experiment by Little Workshop
https://demos.littleworkshop.fr/infinitown
街のアニメーション

Renault Espace Visualization
https://renaultespace.littleworkshop.fr/
車の内外観、照明オンオフ、走行

Plus360 - Car Visualizer - Three.js
http://carvisualizer.plus360degrees.com/threejs/

Three.jsで作るWebVRの操作面について考える【注視点カーソル】 | CardboardClub - スマホで楽しむwebVR！
https://cardboardclub.jp/lab/ctrl-cursor/

外壁塗装3Dカラーシミュレーション｜外壁塗装を一生懸命やる会社いえふく
https://penkio.com/color_simulation/

Customize a Bike | Indian Motorcycle
https://www.indianmotorcycle.com/en-us/build-model/

Web編集のPlayCanvasの検証
https://playcanv.as/p/75PZR9RV/
https://playcanv.as/p/vXJFCg5x/

《Web_sample》WebGL

解説

ネタ

Basis

Three.js

サンプル

PlayCanvas

公式

情報

サンプル・参考

BabylonJS

公式

情報

メニュー

更新状況

関連リンク

検索

Google