ホーム » WebGL
「WebGL」カテゴリーアーカイブ
https://dev.mish.work/wordpress/category/webgl/
WebGL での 3D データ表示
さらに，以前作成した Web サーバ を利用して WebGL での表示に．
bool test (void)
{
Vd2A pts ;
{
pts.push_back(Vd2( 0, 0)) ;
pts.push_back(Vd2( 70, 0)) ;
pts.push_back(Vd2( 90, 50)) ;
pts.push_back(Vd2(100,100)) ;
pts.push_back(Vd2( 50,100)) ;
pts.push_back(Vd2( 30, 70)) ;
pts.push_back(Vd2( 40, 30)) ;
pts.push_back(Vd2( 0, 0)) ;
}
vv_PLF vvplf ;
{
Vd3A v3a = ::ToVd3A(pts) ;
Vd4A v4a = ::ToVd4A(v3a) ;
PLF plf_l(PLF::line,v4a) ;
PLF plf_f(PLF::face,v4a) ;
v_PLF v_plf ;
v_plf.push_back(plf_l) ;
v_plf.push_back(plf_f) ;
vvplf.push_back(v_plf) ;
}
{
tstring tmp_path = ::Get_i_Tools_tmp_date() ;
tstring out_name = ::Path_AddLastSP(tmp_path) + ::Now_Format(_T("%H%M%S")) + _T("__.htm") ;
tstring outtname = ::Path_AddLastSP(tmp_path) + ::Now_Format(_T("%H%M%S")) + _T("_t.htm") ;
tstring outnname = ::Path_AddLastSP(tmp_path) + ::Now_Format(_T("%H%M%S")) + _T("_n.htm") ;
{
GonsA gnsa = ::PLF_ToGonsA(vvplf) ;
::GonsA_ToWGL(gnsa,out_name.c_str()) ;
gnsa = ::GonsA_Triangulation(gnsa) ;
::GonsA_ToWGL(gnsa,outtname.c_str()) ;
gnsa = ::GonsA_CalcNormal (gnsa) ;
::GonsA_ToWGL(gnsa,outnname.c_str()) ;
}
{
::start_web_server(tmp_path) ;
}
}
tstring g3_d_exe = ::get_g3_d_exe() ;
if (!g3_d_exe.empty()) {
tstring tmp_path = ::Get_i_Tools_tmp_date() ;
tstring ipl_name = ::Path_AddLastSP(tmp_path) + ::Now_Format(_T("%H%M%S")) + _T(".ipl") ;
::To_ipl (vvplf,ipl_name.c_str()) ;
::start_g3_d(ipl_name.c_str()) ;
}
return true ;
}
WebGL Three.js r144
久しぶりに Three.js を更新しようかと…
いつものデータを r144 に書き換えて…
r131 と比べると，オブジェクトが暗い．
サンプルのデータを見ると mtl が変更されている．
ライブラリの変更履歴 を見ると 136 → 137 で変更されている．
r136 までにして，この辺りが更新された時に見直すこととするか？
Edge で WebGL が表示できない？
Edge で three.js を利用したデータが表示できなかった．
WebGL で表示可能な形式に変換
https://itl.mish.work/i_Tools/to_wgl/
デバッガで追いかけると，WebGL を利用できない様なエラー．
Edge を再起動すると，うまく表示できるようになった．
何だったのだろう？
2023/01/17
Win8.1 環境の Edge で「使用可能な場合はハードウェア …」を OFF にする必要があった．
2024/07/18
仮想マシンの Win11 Edge で表示できなくなっていたので，その設定．
Edge の「設定」－「システムとパフォーマンス」で
「使用可能な場合はグラフィック アクセラレータを使用する」を「OFF」にして「再起動」．
2024/07/24
環境や 3D データなどによると思いますが，
「…グラフィック アクセラレータを…」を「OFF」にすると表示が遅くなったり，表示されなくなることもあります．
JavaScript module Three.js
前回 Three.js の バージョンを更新 した時に気づいていたがそのままになっていたので少し調べてみた．
きっかけは，今まで r109 だったものを r131 にしようかと …
three.module.js は r83 ぐらい？ example が module 対応になったのは r105 の頃か？
r105 と r106 の ./example/js/loaders/OBJLoader.js の内容は同じ．
./webgl_loader_obj_mtl.html は import 部分と THREE が異なる．JavaScript のコードとしては同じ？
次の所を参考に，いろいろと…
JavaScript モジュール
そこにある basic-modules を，import でない方法で書き直し．
main.js を html 内の body に取り込み．
最初，間違って head 内に書いたら create でエラー（document.body が null）．
また，canvas.js 内に export が存在するとうまくいかず，js をコピーして，その行をコメントに．
それを import を使用した方法に．
main.js を直接 body 内に記述したもの．
*.js をどちらの場合も同じものとしたいが，方法は？
2021/06/06
Three.js で，同じ OBJLoader.js を使っているのかと思ったが，違った．
example/js/OBJLoader.js と example/jsm/OBJLoader.js が存在している．
ある程度 module を使うための変更内容がわかったので，既存のデータを変更してみた．
データはいつもの．http://mish.work/i_Tools/Doc/blog/3D_Data/Cube_2021_07.htm
r109 を利用している．それを r131 に変更．
c_3js_10.js の先頭に次のもの追加．
import * as THREE from '/_lib/js/webgl/threejs/r131/build/three.module.js';
import { OrbitControls } from '/_lib/js/webgl/threejs/r131/examples/jsm/controls/OrbitControls.js';
import { MTLLoader } from '/_lib/js/webgl/threejs/r131/examples/jsm/loaders/MTLLoader.js';
import { OBJLoader } from '/_lib/js/webgl/threejs/r131/examples/jsm/loaders/OBJLoader.js';最後に以下を追加．
export { ThreeStart10 } ;
export { ThreeStartF } ;html を type="module" と import …/c_3js_10.js に．
<script type="module">
import { ThreeStart10 } from "./c_3js_10.js" ;
実行すると幾つかのエラー．
Uncaught TypeError: THREE.OrbitControls is not a constructor
Set_orbit http://mish.work/i_Tools/Doc/blog/3D_Data/c_3js_10.js:137
ThreeStart10 http://mish.work/i_Tools/Doc/blog/3D_Data/c_3js_10.js:47
<anonymous> http://mish.work/i_Tools/Doc/blog/3D_Data/Cube_2021_08.htm:42
OrbitControls などクラスの利用部分が違う．THREE. の部分を削除．
表示されている QR コードは，以前 WebGL が動作しない環境の時の区別のためのもの．
これはうまく使えないみたいなので，その部分は削除．他に “use strict”; なども削除．
html の script の部分で type="module" が指定されていないと，
Uncaught SyntaxError: import declarations may only appear at top level of a module Cube_2021_08_E2.htm:19:3
WebGL three.js OBJLoader ‘l’
以前 OBJ 内の線の情報を使えないかと思い調べたが，その時はわからないでいた．
Wiki Wavefront .obj file を参考に OBJ ファイルを編集して three.js で読み込んだがうまく読めなかった．
ちょっと別件で詰まってしまったので気分転換に調べていたら…
次の様な指定だとうまくいきそうとわかった．
l 1/ 2/
l 1/ 2/ 2/ 3/ 3/ 4/ 4/ 1/
WebGL three.js r91 – r109
WebGL three.js の r91 以降の変更による影響のメモ
OBJ と MTL を使用しているので webgl_loader_obj_mtl.html の変更内容．
r91 → r96
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'models/obj/male02/' );
mtlLoader.load( 'male02_dds.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'models/obj/male02/' );
objLoader.load( 'male02.obj', function ( object ) {
object.position.y = - 95;
scene.add( object );
}, onProgress, onError );
});
new THREE.MTLLoader()
.setPath( 'models/obj/male02/' )
.load( 'male02_dds.mtl', function ( materials ) {
materials.preload();
new THREE.OBJLoader()
.setMaterials( materials )
.setPath( 'models/obj/male02/' )
.load( 'male02.obj', function ( object ) {
object.position.y = - 95;
scene.add( object );
}, onProgress, onError );
} );
→ r97
js/Detector.js がなくなった．
→ r99
r97 var onError = function ( xhr ) { };
r99 var onError = function () { };
→ r101
jsm が追加されている．
→ r105
style が main.css に．
→ r106
module を使用する様に変更されている．
→ r109
setTexturePath が使えなくなったのでコメントに．
// mtlLdr.setTexturePath (imoPath) ; mtlLdr.setPath (imoPath) ;
https 対応
サーバが対応していれば，http を https と書換えれば良さそう．
<script src="http://iwaomics.web.fc2.com/_lib/.../three.min.js"> </script>
https://iwaomics.web.fc2.com/_lib/.../three.min.js
https: などを付けないと言う考え方もあるが，js を利用したローカルファイルでうまく動作しなくなる．
fc2 は「設定」－「基本設定」の「SSL暗号化通信（HTTPS）の設定」で「SSLの設定」を「有効にする」．
Synology NAS DS116 の「SSL 証明書」の取得は，次の所を参考にさせてもらいました．
ホームネットワーク研究所 Let’s Encryptの無償のSSL証明書の取得方法
2018/07/30
1ヶ月位経って，検索から https へのアクセスが半分程度の比率になった？
google
yahoo
bing
DuckDuckGo
Cardboard と WebGL
Cardboard で撮った画像を，WebGL の背景として利用してみた．
もう少しうまく貼れればと思うが，方法がわからない．
球に貼っているため縦方向に引き伸ばされてしまう．
以下，画像は 横:縦 = 2:1 に編集している．
このすぐ下は，SceneJS を使用したもの．
2018/04/27 画像をアップロードできるページ
360度パノラマ画像の表示
iframe を右下に
左上を指定して下や右をフィットさせるのが意外と面倒だったので…
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title >iframe</title>
<style>
body {
margin : auto auto auto auto ;
overflow : hidden ;
}
</style>
</head>
<body>
Text<br/>
<iframe
src='/3D_Data/three_js/ThreeIMO.htm'
name='ifrm'
style='
position : absolute ;
width : 99% ;
height : 90% ;
bottom : 2pt ;
margin-left : 2pt ;
margin-right : 2pt ;
'
>
</iframe>
</body>
</html>//itl.mish.work/~Iwao/…/test6/
2017/07/10 さらに変更したもの
itl.mish.work/…/to_wgl/
moto g5
MR03LN も 2 年になったのと，107SH の調子が…
内蔵メモリが足りなくて，AP の更新ができなかったり，SMS が受信できないなど．
それと丁度のタイミングで，3GB でもシェア SIM が利用できる様になったので，Moto G5 追加．
107SH だったこともあるが，やはり大きい．
今は当たり前なのかもしれないが，指紋認証センサの使い勝手が良い．
WebGL（three.js）のデータの表示が，思ったより遅い．
私の使い方では，バッテリーは 24 時間持つ．
threejs requestAnimationFrame
使い方が間違ってた？
function three_start() {
init() ;
loop() ;
}
function loop() {
controls.update();
renderer.clear();
renderer.render( scene, camera );
requestAnimationFrame( loop );
}
正しくは loader / babylon
function init() {
// …
animate() ;
// …
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
controls.update();
renderer.render( scene, camera );
}
この方法でも，環境により CPU リソースが食われる．
一先ずここまで．
本当は，完全にロードが終わったタイミングが取れれば良いのだが…
threejs OrbitControls
以前（r58）調べた時，動作が変だったが…
var controls = new THREE.OrbitControls( Camera, Renderer.domElement );
controls.addEventListener( ‘change’, ThreeRender );
controls.target.set(w/2,d/2,h/4) ;
controls.update();
r84 では意図した動作になっている．
他にも幾つか動作を見直し中．
three.js OBJMTLLoader
以前調べた時と OBJMTLLoader の扱いが異なっているので，
サンプルの該当部分を抽出．
r58
var loader = new THREE.OBJMTLLoader();
loader.addEventListener( ‘load’, function ( event ) {
var object = event.content;
object.position.y = – 80;
scene.add( object );
});
loader.load( ‘obj/male02/male02.obj’, ‘obj/male02/male02_dds.mtl’ );
r66
var loader = new THREE.OBJMTLLoader();
loader.load( ‘obj/male02/male02.obj’, ‘obj/male02/male02_dds.mtl’, function ( object ) {
object.position.y = – 80;
scene.add( object );
} );
r84
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + ‘% downloaded’ );
}
};
var onError = function ( xhr ) { };
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( ‘obj/male02/’ );
mtlLoader.load( ‘male02_dds.mtl’, function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( ‘obj/male02/’ );
objLoader.load( ‘male02.obj’, function ( object ) {
object.position.y = – 95;
scene.add( object );
}, onProgress, onError );
});
r74 から変更されていて，OBJMTLLoader が削除されたらしい．
https://github.com/mrdoob/three.js/releases?after=r75
Improved OBJLoader and MTLLoader and made OBJMTLLoader obsolete.
それで参考にさせてもらったのがここ．
http://stackoverflow.com/questions/35380403/how-to-use-objloader-and-mtlloader-in-three-js-r74-and-later
他にも，OBJLoader のデータのチェックが厳しくなったみたいで，
r84 OBJLoader.js 632 行目で
throw new Error( "Unexpected line: '" + line + "'" );
クラスによっては前からみたいだが，position が readonly ．
position のメンバに対して代入すれば OK ．
2023/08
https://dev.mish.work/wordpress/category/webgl/
https://itl.mish.work/_lib/js/i_lib/threejs/r131/c_3js_10.js
SceneJS
Cube.imo (0,0,0)-(1000,1000,1000) のデータに対して，
translate X:-500 , y:-500 , z:500
spinYaw で，回転．spinPitch は上下方向．
yaw , pitch で最初の位置（角度で単位は度？）．
zoom が中心までの相対位置？
zoomSensitivity は拡大率．
yaw : 30 ,
pitch : -10 ,
zoom : 2500,
zoomSensitivity : 100 ,
spinYaw : 0.3 ,
cube_imo.html
yaw : 90 で右から．180 で後ろから．
pitch : -20 としているので，
translate の y は中心でなく高さの 30% の位置にしている．
どうも材質の指定（obj の mtl など）は，効いてないみたい．
script 内の type:”texture” , src: … で指定する？
Win7 x86 に IIS
今回は Win7 環境で 3D データをダウンロード可能とするための設定．
「コントロールパネル」－「プログラムと機能」から
「Windows の機能の有効化または無効化」．
「インターネットインフォメーションサービス」にチェック．
localhost にアクセスすると，
ローカルから http://win7-mg-/ も可能．
他の PC から接続すると，
接続がタイムアウトしました
win7-mg- のサーバーからの応答が一定時間以内に返ってきませんでした。
このサイトが一時的に利用できなくなっていたり、サーバーの負荷が高すぎて接続できなくなっている可能性があります。しばらくしてから再度試してください。
他のサイトも表示できない場合、コンピューターのネットワーク接続を確認してください。
ファイアーウォールやプロキシでネットワークが保護されている場合、Firefox によるウェブアクセスが許可されているか確認してください。
他の PC からも可能にする場合は，ファイアウォールの設定が必要．
「IIS マネージャー」の「サイト」－「右クリック」で「Web サイトの追加…」．
サイト名や物理パスを指定して「OK」．
—————————
Web サイトの追加
—————————
バインド ‘*:80:’ は別のサイトに割り当てられています。このサイトに同じバインドを割り当てると、いずれか一方のサイトしか開始できなくなります。重複するバインドを追加しますか?
—————————
はい(Y) いいえ(N)
—————————
「バインド ‘*:80:’ は…」と出るがそのまま「はい」．
「Default Web Site」－「右クリック」－「バインドの編集…」．
「ポート」を「80」でない，「8000」などに．
状態が停止しているので「開始」を「クリック」．
まだファイルなどが存在しないので，localhost にアクセスすると，
他の PC からは，「403 – 許可されていません: アクセスが…」
最終的には「無効」にするが，「ディレクトリの参照」を「有効」に．
3D データを web に展開．
localhost/3D_Data/ を開くと，
localhost/3D_Data/three_js/ThreeIMO.htm を開くと，
動作はしているが，データが表示されない．
localhost/3D_Data/three_js/Cube.imo を開くと，
MIME マップの追加が必要で，
「MIME の種類」をどう指定するべきかは不明だが，
「application/IMO」として追加．
これらの幾つかの情報は TechNet にもある．
TechNet IIS での静的な Web サイトの構築
three.js obj
three.js の OBJMTLLoader で，imo を使用できそう．
var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function (event) {
var object = event.content;
object.rotation.set(90 * Math.PI / 180, 0, 0);
Scene.add(object);
});
loader.load('Cube.imo');imo は，OBJとMTL を拡張した個人的な形式です．
i3DV で表示可能です．
three.js
three.js の動作環境の作成のメモ
three.js の左の github から．
Usage の Download the minified library and …. の minified library を右クリックするなどしてダウンロード．
C:\Users\Public\Documents\WebGL\Three_js\three.min.js として保存．
This code creates a scene, …… in the document.body element. の下のスクリプトを Test3js.htm などとして保存．
その html の前の方と後ろの方を編集．
<!DOCTYPE html>
<html lang=”ja”>
<head><meta charset=”UTF-8″></head>
<body>
<script src=”three.min.js”> </script>
<script>
var camera, scene, renderer;
…
function init() {
…
renderer.render( scene, camera );
}
</script>
</body>
</html>
107SH で，192.168.x.x/Test/…/Test3js.htm にアクセスすると，
