コンピュータグラフィクスb

第10章 テクスチャ

[注意] 本章のHTMLファイルは、WWWサーバ経由でアクセスしないと正しく動作しません。 javascriptが実行中に画像ファイルを読み込もうとしますが、 ブラウザのセキュリティ対策のため ローカル・ファイルにはアクセスできないからです。 javascriptからアクセスできるのは HTMLファイルと同じWWWサーバ上のファイルだけ です。

基本的なテクスチャマッピング (テクスチャをロードして、メッシュに適用する)

chapter-10/01-basic-texture.html (p.286) text, run

テクスチャを使うための createMesh() 関数は、01-basic-texture.html の中で以下のように定義されている。

createMesh関数
        function createMesh(geom, imageFile) {
            var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
            var mat = new THREE.MeshPhongMaterial();
            mat.map = texture;

            var mesh = new THREE.Mesh(geom, mat);
            return mesh;
        }

バンプマッピング (凹凸や皺を表現する)

chapter-10/02-bump-map.html (p.290) text, run, diff

テクスチャとバンプマップを使うための createMesh() 関数は、02-bump-map.html の中で以下のように定義されている。

createMesh関数
        function createMesh(geom, imageFile, bump) {
            var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
            geom.computeVertexNormals();
            var mat = new THREE.MeshPhongMaterial();
            mat.map = texture;

            if (bump) {
                var bump = THREE.ImageUtils.loadTexture("../assets/textures/general/" + bump);
                mat.bumpMap = bump;
                mat.bumpScale = 0.2;
                console.log('d');
            }


            // create a multimaterial
            var mesh = new THREE.Mesh(geom, mat);

            return mesh;
        }

法線マップ (バンプマッピング)

ShaderMaterial

chapter-10/03-normal-map.html (p.292) text, run, diff

createMesh関数
        function createMesh(geom, imageFile, normal) {

            if (normal) {
                var t = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
                var m = THREE.ImageUtils.loadTexture("../assets/textures/general/" + normal);
                var mat2 = new THREE.MeshPhongMaterial();
                mat2.map = t;
                mat2.normalMap = m;

                var mesh = new THREE.Mesh(geom, mat2);
                return mesh;
            } else {
                var t = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
                var mat1 = new THREE.MeshPhongMaterial({
                    map: t
                });
                var mesh = new THREE.Mesh(geom, mat1);
                return mesh;
            }

            return mesh;
        }

影を表現する (fake shadows using a light map)

light map は、前もって描画された影(pre-rendered shadow)をマップすることで、リアルタイムに重い計算をすることを避ける。

createMesh関数
        var groundGeom = new THREE.PlaneGeometry(95, 95, 1, 1);
        var lm = THREE.ImageUtils.loadTexture('../assets/textures/lightmap/lm-1.png');
        var wood = THREE.ImageUtils.loadTexture('../assets/textures/general/floor-wood.jpg');
        var groundMaterial = new THREE.MeshBasicMaterial(
                {
                    color: 0x777777,
                    lightMap: lm,
                    map: wood
                });

lm-1.png

chapter-10/04-light-map.html (p.294) text, run, diff

反射を表現する (fake reflections using an environment map)

回りが映り込む反射を計算するのはCPUにとって重い作業で、一般には ray-tracing を使う必要がある。 realtimeに計算するのでははく、前もって Cube に投射したテクスチャを作っておき、それを適用することで fakeだがそれなりにリアルな反射を表現できる。

createMesh関数
        function createCubeMap() {

            var path = "../assets/textures/cubemap/parliament/";
            var format = '.jpg';
            var urls = [
                path + 'posx' + format, path + 'negx' + format,
                path + 'posy' + format, path + 'negy' + format,
                path + 'posz' + format, path + 'negz' + format
            ];

//        var textureCube = THREE.ImageUtils.loadTextureCube( urls );
            var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
            return textureCube;
        }






negx.jpg negy.jpg negz.jpg posx.jpg posy.jpg posz.jpg

chapter-10/05-env-map-static.html (p.296) text, run, diff

createMesh関数
    function createCubeMap() {

        var path = "../assets/textures/cubemap/parliament/";
        var format = '.jpg';
        var urls = [
            path + 'posx' + format, path + 'negx' + format,
            path + 'posy' + format, path + 'negy' + format,
            path + 'posz' + format, path + 'negz' + format
        ];

//        var textureCube = THREE.ImageUtils.loadTextureCube( urls );
        var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
        return textureCube;
    }

chapter-10/05-env-map-dynamic.html (p.296) text, run, diff

Specular Map

略

chapter-10/06-specular-map.html (p.300) text, run, diff

Repeat Wrapping

chapter-10/08-repeat-wrapping.html (p.308) text, run, diff

コンピュータ・グラフィックスb 課題10

作成したプログラムが正しく動作することを確認したら、それぞれの 提出先に提出しなさい。 提出した後は、正しく提出されていることを http://ynitta.com/class/cg2/local/handin/ で必ず確認しておいて下さい。 提出〆切は次回の講義の開始時刻です。

課題10a: テクスチャとバンプマップを使ったシーンを作る

提出ファイルkadai10a.html, テクスチャ用png, バンプマップ用png
コメント欄:どのようなシーンであるか説明を書きなさい。
提出先: 「宿題提出Web:コンピュータ・グラフィックスb：課題10a」 http://ynitta.com/class/cg2/local/handin/up.php?id=kadai10a

オリジナルなテクスチャと、それに対応したバンプマップを、自分で新しく作成しなさい。 そのテクスチャとバンプマップを用いた効果的なシーンを作りなさい。

提出条件

[注意] 今回作成する HTML ファイルは、 WWW サーバ経由でアクセスしないとエラーを起こすことに注意して下さい。 ブラウザでローカルファイルとしてHTMLファイルを開いていると、 javascriptが画像ファイルにアクセスするところでセキュリティ違反を起こします。

参考例

02-bump-map.html を変更して kadai10a.html を作成する。
*** chapter-10/02-bump-map.html	Wed Jun 12 16:58:39 2024
--- nitta-10/kadai10a.html	Wed Jun 12 14:19:12 2024
***************
*** 46,48 ****
  
!         var sphere1 = createMesh(new THREE.BoxGeometry(15, 15, 2), "stone.jpg");
          sphere1.rotation.y = -0.5;
--- 46,48 ----
  
!         var sphere1 = createMesh2(new THREE.BoxGeometry(15, 15, 2), "tsuda_univ.png");
          sphere1.rotation.y = -0.5;
***************
*** 51,53 ****
  
!         var sphere2 = createMesh(new THREE.BoxGeometry(15, 15, 2), "stone.jpg", "stone-bump.jpg");
          sphere2.rotation.y = 0.5;
--- 51,53 ----
  
!         var sphere2 = createMesh2(new THREE.BoxGeometry(15, 15, 2), "tsuda_univ.png", "tsuda_color_bump.png");
          sphere2.rotation.y = 0.5;
***************
*** 69,71 ****
          camera.position.y = 12;
!         camera.position.z = 28;
          camera.lookAt(new THREE.Vector3(0, 0, 0));
--- 69,71 ----
          camera.position.y = 12;
!         camera.position.z = 38;
          camera.lookAt(new THREE.Vector3(0, 0, 0));
***************
*** 138,139 ****
--- 138,160 ----
  
+         function createMesh2(geom, imageFile, bump) {
+             var texture = THREE.ImageUtils.loadTexture("./" + imageFile);
+             geom.computeVertexNormals();
+             var mat = new THREE.MeshPhongMaterial();
+             mat.map = texture;
+ 
+             if (bump) {
+                 var bump = THREE.ImageUtils.loadTexture("./" + bump);
+                 mat.bumpMap = bump;
+                 mat.bumpScale = 0.2;
+                 console.log('d');
+             }
+ 
+ 
+             // create a multimaterial
+             var mesh = new THREE.Mesh(geom, mat);
+ 
+             return mesh;
+         }
+ 
+ 
          function render() {
tsuda_univ.pngtsuda_bump.png
実行例

参考例2

kadai10a.html を変更して kadai10b.html を作成する。
*** kadai10a.html	Wed Jun 12 14:19:12 2024
--- kadai10b.html	Wed Apr 26 11:33:13 2023
***************
*** 51,53 ****
  
!         var sphere2 = createMesh2(new THREE.BoxGeometry(15, 15, 2), "tsuda_univ.png", "tsuda_color_bump.png");
          sphere2.rotation.y = 0.5;
--- 51,53 ----
  
!         var sphere2 = createMesh2(new THREE.BoxGeometry(15, 15, 2), "tsuda_univ.png", "tsuda_color_bump2.png");
          sphere2.rotation.y = 0.5;
tsuda_color_bump2.png実行例 (部分)