1. 概述
2. 方案
- 2.1. 開啟反走樣
- 2.2. 開啟HiDPI設定
3. 結果
4. 參考

1. 概述

在three.js場景中，有時會遇到場景模糊，紋理失真的現象，似乎three.js并沒有用到紋理圖片應有的解析度，可以通過相關設定來解決這個問題，

2. 方案

2.1. 開啟反走樣

three.js創建的WebGLRenderer物件有抗鋸齒選項的支持：

var renderer = new THREE.WebGLRenderer({
    antialias: true,     //抗鋸齒
});

這個選項默認是關閉的，所以需要顯式開啟一下，

2.2. 開啟HiDPI設定

如果開啟抗鋸齒后仍然顯示比較模糊，那么可能就是使用的是HiDPI (High Dots Per Inch) 設備顯示造成的，HiDPI設備能在較小尺寸下顯示出較高解析度，也就是每一個螢屏上的物理像素其實是由多個像素顯示出來的，所以需要設定一下設備像素比率：

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

其實關于HiDPI的討論還是挺多的，比如說有個縮放與布局設定：
imglink1

這個設定會更改window.devicePixelRatio的值，如果程式不做相關的設定，那么程式的UI顯示出來就會是模糊的，現代程式組件一般都會自動做出相關的調整，在WebGL中則需要顯式設定一下，

3. 結果

測驗代碼：

'use strict';

function init() {
    //console.log("Using Three.js version: " + THREE.REVISION);   

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer({
        antialias: true,     //抗鋸齒
    });
    renderer.setClearColor(new THREE.Color(0x000000));    
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    // add the output of the renderer to the html element
    document.getElementById("webgl-output").appendChild(renderer.domElement);


    var loader = new THREE.TextureLoader();
    loader.setCrossOrigin('Anonymous');
    var basePath = "1.jpg";
    loader.load(basePath, function (texture) {
        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(2, 2);
        // var planeMaterial = new THREE.MeshBasicMaterial({
        //     color: 0xAAAAAA
        // });
        var planeMaterial = new THREE.MeshBasicMaterial({
            map: texture
        });

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // add the plane to the scene
        scene.add(plane);

        renderer.render(scene, camera);
    });
}

關閉反走樣以及HiDPI：
imglink2

開啟反走樣以及HiDPI之后顯示效果有所改善：
imglink3

4. 參考

關于ThreeJS場景失真的問題
關于three.js 抗鋸齒
HiDPI (簡體中文)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/5197.html

標籤：其他

上一篇：javaCV開發詳解之GIF動態圖片錄制補充篇：windows桌面螢屏畫面錄制成gif動態圖片，支持桌面螢屏任意區域生成gif，可擴展支持MacOS/安卓/linux等平臺，可擴展支持apng動態圖片