🌿
🌿 MidoriPhotoArt.
HTMLコンテンツを3D空間に表示。CSS&HTMLタグのWEBGL空間内での表示。外部のファイル（別なフォルダにある）の画像表示のHTMLコンテンツ。今までは、HTMLの表示、動画の再生。動画の再生は、別なプロセスとして処理をしてWEBGLでひょうじしていがので、今回は、画像の表示を行う。HTMLに近い感じの処理で、画像をBASE６４形式で読み込み表示をおこなう。SVG形式の処理は重いために、なるべく軽量化して行うように、画像をある程度縮小して表示を行う。

html_Display.js ソースコード仕様書

この仕様書は、export class html_Display の設計思想と各処理の詳細を解説するためのドキュメントです。クラスはHTMLコンテンツを3Dシーン上に描画するための機能を提供し、画像の最適化、SVG生成、Canvas描画、Three.jsによるテクスチャ更新、及びユーザーインタラクションなど多くの工程を統合しています。

1. 概要

html_Display クラスは、指定された幅・高さのキャンバス上にHTMLコンテンツを描画し、その内容をThree.jsのテクスチャとして利用します。画像は事前にBASE64形式へ変換され、必要に応じて縮小処理が施された後、SVGテンプレートとして描画されます。また、ユーザー入力に応じたインタラクティブな機能も備えています。

2. クラス図

以下は、html_Display クラスの主要なプロパティとメソッドを示す概略図です。 

┌────────────────────────────────────────────────────┐
│                    html_Display                    │
├────────────────────────────────────────────────────┤
│ - width: Number                                    │
│ - height: Number                                   │
│ - fps: Number                                      │
│ - displayOptions: Object                           │
│ - canvas: OffscreenCanvas / HTMLCanvasElement      │
│ - context: CanvasRenderingContext2D                │
│ - photos: Array                            │
│ - effects: Object                                  │
│ - interactiveConfig: Array                 │
│ - mesh: THREE.Mesh                                 │
│ - isRunning: Boolean                               │
│ - lastUpdate: Number                               │
│ - _lastRawSvg: String                              │
│ - _boundUpdate: Function                           │
│ - _isRegistered: Boolean                           │
│ - _clickHandler: Function                          │
│ - camera: THREE.Camera                             │
│ - domElement: HTMLElement                          │
├────────────────────────────────────────────────────┤
│ + constructor(width, height, displayOptions)       │
│ + start(camera, domElement): Promise               │
│ + stop(): void                                     │
│ + update(): Promise                                │
│ + _updateClass(): Promise                          │
│ + _createMesh(): void                              │
│ + getMesh(): THREE.Mesh                            │
│ + attachInteraction(camera, domElement): void      │
│ + updateInteractiveElements(): void                │
│ + setMeshScale(x, y, z): void                        │
│ + convertImageToBase64(url, maxWidth): Promise       │
│ + _generateRawSVG(): String                        │
│ + static InteractiveElement                        │
└────────────────────────────────────────────────────┘
            

            
3. 主なメソッドと機能

            
constructor(width, height, displayOptions)

            
    
                
  • 
                    概要:
                    クラス初期化時に各プロパティ（キャンバス、描画コンテキスト、画像パス、エフェクト設定、インタラクション設定など）を構築します。OffscreenCanvasが利用可能ならそちらを採用し、不可能な場合はHTMLCanvasElementを生成します。
                
    • 
            


            
_generateRawSVG()

            
    
                
  • 
                    概要: 現在の内部状態からSVG文字列を生成します。生成されたSVGはCanvasへの描画に利用されます。
                
    • 
            


            
_updateClass()

            
    
                
  • 
                    概要: 最新のSVG文字列を取得し、前回の状態と比較。変化がある場合のみ、Canvasに再描画およびThree.jsメッシュテクスチャの更新を実施します。
                
    • 
            


            
start(camera, domElement)

            
    
                
  • 
                    概要: モジュールの実行を開始します。画像のBASE64変換、メッシュの生成、Canvasの初期更新、そしてユーザーインタラクションの設定を行います。
                
    • 
                
  • 
                    詳細:
                    
      
                        
    1. 画像URLリストに対して非同期処理を実行し、BASE64形式の画像データに変換します。
      2. 
                        
    2. 変換完了後、Canvasの内容をThree.jsテクスチャ化し、メッシュとして生成。
      3. 
                        
    3. オプションでcameraとdomElementを設定し、クリックなどのユーザーイベントを紐付けます。
      4. 
                    
    
                
    • 
            


            
stop()

            
    
                
  • 
                    概要: 実行中のプロセスを停止し、グローバルコールバックやイベントリスナーから本オブジェクトの更新関数を解除します。
                
    • 
            


            
update()

            
    
                
  • 
                    概要: 指定のFPSに基づいてCanvasの再描画を制御し、SVGの更新処理を実行します。
                
    • 
                
  • 
                    詳細: 前回更新時との差分が一定時間以内の場合は処理をスキップし、必要な場合のみ再描画を行います。
                
    • 
            


            
attachInteraction(camera, domElement) & updateInteractiveElements()

            
    
                
  • 
                    概要:
                    ３D空間上のメッシュに対して、ユーザーのクリックなどの入力イベントを紐付けます。SVG内のインタラクティブ領域を抽出し、クリック判定により対応するコールバック関数を実行します。
                
    • 
            


            
setMeshScale(x, y, z)

            
    
                
  • 
                    概要: 3Dメッシュのスケールを動的に変更するためのメソッドです。
                
    • 
            


            
convertImageToBase64(url, maxWidth)

            
    
                
  • 
                    概要: 指定された画像URLから画像を非同期で読み込み、必要であれば縮小処理を行った後、BASE64形式のData URLに変換して返却します。
                
    • 
                
  • 
                    処理の流れ:
                    
      
                        
    1. 画像のロードを開始して、ロード完了を待ちます。
      2. 
                        
    2. 画像サイズがmaxWidthを超える場合、Canvas上で縮小処理を実施。
      3. 
                        
    3. Canvasの描画結果をData URLに変換し、返却します。
      4. 
                    
    
                
    • 
            


            
静的クラス: InteractiveElement

            
    
                
  • 
                    概要:
                    SVG上に定義されたクリック可能な領域を表現するオブジェクトです。各InteractiveElementは、指定の座標・サイズ、およびクリック時のコールバックを持ちます。
                
    • 
                
  • 
                    機能: contains() メソッドにより、与えられた点が対象領域内に存在するかを判定します。
                
    • 
            


            
4. シーケンス図

            

                以下は、startメソッド実行時の主要な処理フローを示すシーケンス図です。画像の変換、メッシュ生成、及びSVG更新の各工程が視覚的に理解できます。
            

            
ユーザー    html_Display.start()    convertImageToBase64()    _createMesh()    _updateClass()
   |               |                         |                   |               |
   |---- start() ->|                         |                   |               |
   |               |--- Promise.all() -----> (各画像変換処理)    |               |
   |               |      (BASE64変換)        |                   |               |
   |               |<---- 変換完了収集 -------|                   |               |
   |               |-- メッシュ生成処理 --->|                   |               |
   |               |                         |-- SVG生成・描画->|               |
   |<-- 3D表示完了-----------------------------------------|               |
            


            
5. 詳細な処理フロー

            
    
                
  1. 
                    画像の読み込みと変換:
                    複数の画像URLに対して、非同期処理を実行。必要に応じて縮小処理を行い、各画像をBASE64形式に変換します。
                
    2. 
                
  2. 
                    SVG生成とCanvas描画:
                    内部状態に基づいてSVG文字列を生成し、前回の状態との差分がある場合のみCanvasへ再描画を実施。更新された内容はThree.jsメッシュのテクスチャとして反映されます。
                
    3. 
                
  3. 
                    3Dシーンへの反映:
                    Canvasの描画結果をテクスチャ化し、Three.jsを利用して3Dシーン内にレンダリングされたメッシュとして表示されます。
                
    4. 
                
  4. 
                    ユーザーインタラクション:
                    登録されたクリックイベントにより、SVG内のインタラクティブ領域が検出され、対応するコールバック関数が実行されます。
                
    5. 
            


            
6. まとめ

            

                html_Display
                クラスは、画像の最適化処理、動的SVG生成、Canvas描画、及びThree.jsによる3Dレンダリングを統合した高度な描画モジュールです。各メソッドは明確な責務を持ち、拡張性・保守性に配慮した設計となっています。