• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

Three.jsの負荷軽減のTips

2022年10月1日

  • このエントリーをはてなブックマークに追加

こんにちは!
XRクリエイターの伊東(@ALAKIWebVRAR1)です。

※TwitterでもWebXRの事を中心に情報発信中です。
よかったらフォローお願いします!
Follow @ALAKIWebVRAR1

今私は、ある実装で、Open Streat Mapから生成した大阪駅付近の3DマップをThree.jsに読み込み、一人称視点で3Dマップの中をうろうろする、という楽しいことをしています。

スクリーンショット 2022-10-01 6.05.06

3Dマップ(objファイル)の容量がなかなか大きく、Three.jsの凝ったコントローラと掛け合わせるとかなり動作がもっさりしてしまいます。

今回は、負荷が大きくなりがちな実装をする際に、どうやって負荷軽減をして安定した動作を実現するかというお話しです。
具体的な実装例をまとめました。今後も新しい知見があればこちらに足していきます。
ご参考になれば幸いです。

この記事の目次

  • 1 アンチエイリアスを無効にする
  • 2 フレームレートを下げる
  • 3 Cameraのfarを下げる
  • 4 PixelRatioを固定する
  • 5 最後に

アンチエイリアスを無効にする

Three.jsのrendererには、オプションでアンチエイリアスの設定をすることができます。
通常、3Dオブジェクトの輪郭がギザギザしてしまうことがありますが、アンチエイリアスをかけてあげると輪郭の見え方が滑らかになります。
優れた機能ですが、その分計算コストも大きく、アンチエイリアスを無効にしてあげると負荷も軽減されます。

ちなみにデフォルト値はアンチエイリアスが無効になっていますが、公式のサンプルからソースコード流用したりしていると、アンチエイリアスが有効になっている場合があります。

その場合は、以下のようにしてあげると無効になります。

1
2
3
renderer = new THREE.WebGLRenderer( {
antialias: false,
} );

見た目の良さをとるか、負荷軽減をとるか、アンチエイリアスの有効/無効を切り替えてみて、ご検討ください。

フレームレートを下げる

フレームレート、いわゆるFPS(Frame Per Second)のことで、1秒間に何フレーム処理するかということです。
※冒頭の一人称視点 = FPS(First Person Shooter)とややこしいですね

理想は60fpsで、負荷の程度とマシンスペック、PCの使用状況によって、FPSは下がって行ったり、また60fpsに近づいたりします。
不安定になると動作が不快なので、あえてFPSを下げた状態で安定させるテクニックをご紹介します。

1
2
3
4
5
6
7
8
9
10
11
12
13
let frame;
 
function animate() {
requestAnimationFrame( animate );
 
   /* フレーム数をカウント */
   frame++;
 
   /* 偶数フレームをスキップ */
if (frame % 2 == 0) {
return;
}
}

※こちらを参考にさせていただきました!
https://ics.media/entry/12930/

上記の例だと、通常が60fpsであれば、30fpsで動作させるということになります。
私が実装しているケースでは、動作の荒さはそこまで目立たず、ストレスなく動かすことができました。

Cameraのfarを下げる

Three.jsのCameraの値には、nearとfarというプロパティが存在しています。
文字通り、CameraがSceneを写すとき、near = どこまで近くのものまで写せるか、far = どこまで遠くのものまで写せるか、ということになります。

farの値を大きくすれば、それだけたくさんのオブジェクトを描画する必要があるため、負荷も大きくなります。
farを適切に調整することで、負荷を軽減することをお勧めします。

以下のコードの「100」という最後の引数が、farにあたります。

1
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );

PixelRatioを固定する

PixelRatioとは、Sceneを描画する時のCanvasの「解像度」のことです。
どのデバイスでも最大の解像度で描画したい場合、window.devicePixelRatioという値をRendererに設定して、デバイスごとに解像度を最適化してたりします。

解像度が高ければ描画コストも高くなりますので、どのデバイスでも一律描画領域に対して1倍の解像度を設定することで、負荷を軽減する方法をご紹介します。

1
renderer.setPixelRatio(1);

最後に

ALAKIでは、一緒に面白いことにチャレンジする仲間を募集しています!
価値あるものを創って、それをきちんと使ってもらうところまで必死に考えて、成果を出す、ということにひたむきに挑戦できる環境です。
気になる方は、是非、弊社のリクルートサイトを見てください!

ALAKIリクルートサイトはこちら

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • スクリーンショット 2022-10-30 6.55.50

    Unity Netcode for GameObjects (NGO) (旧MLAPI)× Relayでマルチプレイを実装する

    30 10月, 2022

  • 2b56af4cae58a76b18979a678f6a8a4b_m

    レスポンシブ対応時にクリックイベントが、うまく動作しない時の対処法

    23 2月, 2018

  • スクリーンショット 2018-03-16 0.37.47

    WebVRはじめてみませんか?〜第2回 three.jsを使って3Dに触れる〜

    1 4月, 2018

デザイナー募集
  • Next story FirebaseをUnity(iOS)に導入するまで
  • Previous story 第一回Web3.0勉強会を開催しました!

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.