Sandbox

学習記録や試作したものを掲載しています

All（23）

2025-12-07

Blender

ガラス風の質感を表現する

2025-12-06

Blender

金属風の質感と環境テクスチャ

2025-12-03

Blender

ライトベイクしてブラウザで質感を再現する

2025-11-29

Blender

3D モデルのデータを圧縮する

glTF は、多くの頂点データやテクスチャ画像を含むため、得てしてファイル容量が大きくなりやすい。

ここでは、以下の2つの圧縮を行い、その圧縮効果を評価する。

メッシュや点群データを圧縮する「Draco 圧縮」
テクスチャ画像の圧縮 or 軽量化（WebP 変換）

評価内容

上記圧縮について、以下の4パターンで比較する。

Blender から glb 形式でエクスポートしたファイル
Blender から glb 形式でエクスポートし、Draco 圧縮を行ったファイル
Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換したファイル
Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換、Draco 圧縮を行ったファイル

	テクスチャ画像軽量化	Draco 圧縮
1	×	×
2	×	○
3	○	×
4	○	○

3D モデルは、書籍『10日で Blender 練習帳』で作成したものを使用する。

評価結果

	ファイル容量 / MB	読み込み時間 / ms
1	50.6	153
2	10.2	50
3	44.3	127
4	3.9	23

※ 但し、上記結果は次の条件に基づく。

Draco 圧縮におけるデコード処理時間は測定対象外
ローカル開発サーバー上での測定結果

-- -- --

Blender から glb 形式でエクスポートしたファイル

Blender から glb 形式でエクスポートし、Draco 圧縮を行ったファイル

Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換したファイル

Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換、Draco 圧縮を行ったファイル

結論

テクスチャの軽量化を行ったのち、Draco 圧縮を行うことで、ファイル容量を 46.7 MB 削減（50.6 MB -> 3.9 MB）することができた。
両圧縮を行うことで、ファイル容量の大幅な削減が期待できる。

但し、下記を留意する。

Draco 圧縮では、頂点の定義が最も効率よく圧縮されるため、頂点の数自体が少ない場合には圧縮効率は低い（WebGL School より）。
Draco 圧縮をした場合、圧縮したファイルをブラウザ上でデコードする必要がある。そのデコーダのファイル容量が 1 MB ~ 2 MB 程度あるため、（圧縮後の 3D モデルのデータ容量）+（デコーダの容量）>（圧縮前の 3D モデルのデータ容量）とならないよう注意する。
テクスチャ画像の圧縮・軽量化は、3D モデルの品質を損なわない程度に行う。

Demo

「4. Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換、Draco 圧縮を行ったファイル」を使用。

https://koji014-blender10days.vercel.app

参考

2025-11-27

Blender

『10日で Blender 練習帳』

2025-10-11

Three.js

Blender で作成した 3D モデルをブラウザ上で動かす

2025-10-05

Blender

Blender に入門する

2025-05-31

SVG

ブラウザ間の SVG keySplines の挙動差異

2025-05-27

JavaScript

非同期遷移を行うためのクラスを自作する

2025-05-09

WebGL

WebGL オブジェクトと DOM 要素の位置同期ずれを防ぐ

2025-04-21

WebGL

非同期遷移を介した DOM と板ポリゴンの再同期

2025-04-16

WebGL

DOM と板ポリゴンを同期する

2025-03-05

JavaScript

スクロール量に応じた操作をするためのクラスを自作する

JavaScript

GSAP の ScrollTrigger の仕組みを理解するため、同じような挙動をする ScrollTrigger クラスを作成した。

Demo: https://koji014-scroll-trigger.vercel.app

使用例

const box = document.querySelector('.box');

const trigger = new ScrollTrigger({
    trigger: '#trigger',
    start: '10% 10%',
    end: '70% 70%',
    markers: true,
    onEnter: () => console.log('🍎onEnter'),
    onLeave: () => console.log('🍐onLeave'),
    onEnterBack: () => console.log('🍎onEnterBack'),
    onLeaveBack: () => console.log('🍐onLeaveBack'),
    onToggle: () => console.log('🍇onToggle'),
    onUpdate: (self) => {
        const breakPoints = [0, 0.4, 0.8, 1];
        const lastIndex = breakPoints.length - 1;

        const normalizedProgress = breakPoints.map((bp, i, arr) => {
            if (i === 0) return 1.0;
            const prev = arr[i - 1];
            return Math.min(Math.max(0, (self.progress - prev) / (bp - prev)), 1);
        });

        const transform = {
            translateX: 200,
            translateY: 800,
            rotate: 360,
        };

        if (self.progress < breakPoints[1]) {
            box.style.transform = `
                translateY(${transform.translateY * normalizedProgress[1]}px)
                rotate(${transform.rotate * normalizedProgress[1]}deg)
            `;
        } else if (self.progress < breakPoints[2]) {
            box.style.transform = `
                translateX(${transform.translateX * normalizedProgress[2]}px)
                translateY(${transform.translateY}px)
                rotate(${transform.rotate}deg)
            `;
        } else {
            box.style.transform = `
                translateX(${transform.translateX}px)
                translateY(${transform.translateY}px)
                rotate(${transform.rotate}deg)
            `;
            box.style.backgroundColor = `rgb(
                ${Math.round(255 * (1 - normalizedProgress[lastIndex]))} 0 255 / 0.5
            )`;
        }
    },
});

2025-03-02

JavaScript

モーションのタイミング制御と補間を行うクラスを自作する

2025-02-17

JavaScript

カルーセルを自作する

Demo

https://koji014-carousel.vercel.app

const targetSelector = '.my-carousel';

new Carousel(targetSelector, {
    isLoop: true,
    autoInterval: 4000,
    autoPlay: true,
    showIndicators: true,
    label: '秋冬の景色',
    enableLiveRegion: true,
 });

// 共通設定（初期設定）
.carousel {
     --_slidesPerView: 1; // 1ビューあたりのスライド数
     --_slidesPerGroup: 1;  // 1度のスワイプで何枚分移動させるか
     --_spaceBetween: 0rem;  // スライド間の距離（単位:rem）
     --_speed: 0.4s; // スライドの遷移時間（単位: s）
     --_inner: 3.6rem; // スライド両脇の余白
}

// 個別設定 
.my-carousel {
     --_slidesPerView: 1;
     --_slidesPerGroup: 1;
     --_spaceBetween: 1rem;      

     @include gl.mq('md') {    
          --_slidesPerView: 2.5;
          --_slidesPerGroup: 2;
          --_spaceBetween: 2rem;
     } 
}