性能优化:精灵降采样、像素比降低、麂皮法线降分辨率

- 时间轴文字精灵超采样 SS 4→2,显存省 75%
- Three.js 像素比上限 2→1.5,Cesium resolutionScale 1.5→1.0
- 麂皮法线贴图 1024×1280→512×640,启动逐像素计算省 75%
This commit is contained in:
2026-09-19 04:12:43 +08:00
parent 39d4c728b0
commit e05143ad73
4 changed files with 4 additions and 4 deletions
+1 -1
View File
@@ -64,7 +64,7 @@ export class App {
_initRenderer() { _initRenderer() {
const canvas = document.getElementById('scene'); const canvas = document.getElementById('scene');
this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+1 -1
View File
@@ -226,7 +226,7 @@ export class CesiumGlobe {
scene.globe.maximumScreenSpaceError = 2.0; // 默认细分,最省性能 scene.globe.maximumScreenSpaceError = 2.0; // 默认细分,最省性能
scene.globe.tileCacheSize = 600; // 更大的瓦片缓存,减少细节刷新 scene.globe.tileCacheSize = 600; // 更大的瓦片缓存,减少细节刷新
scene.fxaa = false; // 关闭抗锯齿后处理,省一个全屏通道 scene.fxaa = false; // 关闭抗锯齿后处理,省一个全屏通道
viewer.resolutionScale = 1.5; // 1.5 倍超采样,替代 FXAA 提供更锐利的抗锯齿 viewer.resolutionScale = 1.0; // 关闭超采样(DPR 已提供足够分辨率),省填充率
scene.maximumRenderTimeChange = Infinity; // 配合 requestRenderMode:静止时停止重绘,大幅省电省帧 scene.maximumRenderTimeChange = Infinity; // 配合 requestRenderMode:静止时停止重绘,大幅省电省帧
// 卫星影像 // 卫星影像
+1 -1
View File
@@ -234,7 +234,7 @@ function makeLeatherNormalMap() {
// 内侧绒面法线:密集细绒毛(高频噪点) // 内侧绒面法线:密集细绒毛(高频噪点)
function makeSuedeNormalMap() { function makeSuedeNormalMap() {
const w = 1024, h = 1280; const w = 512, h = 640; // 降分辨率省 75% 逐像素计算,视觉几乎无差
const c = document.createElement('canvas'); const c = document.createElement('canvas');
c.width = w; c.height = h; c.width = w; c.height = h;
const ctx = c.getContext('2d', { willReadFrequently: true }); const ctx = c.getContext('2d', { willReadFrequently: true });
+1 -1
View File
@@ -1,7 +1,7 @@
import * as THREE from 'three'; import * as THREE from 'three';
// 超采样倍数:文字以更高分辨率栅格化,拉近/放大后依然清晰 // 超采样倍数:文字以更高分辨率栅格化,拉近/放大后依然清晰
const SS = 4; const SS = 2;
// 折行:尽量均分两行(标题较短),均分不满足时逐字折行 // 折行:尽量均分两行(标题较短),均分不满足时逐字折行
function wrapText(ctx, text, maxW) { function wrapText(ctx, text, maxW) {