Three-小地图-解决帧率过低问题

问题： 我们使用的是 在一个场景内使用两个 视像头，一个正交摄像头，一个透视摄像头

  • 透视相机：渲染人眼正常看到场景面
  • 正交相机：从模型上边渲染的视角：当作小地图
  • 缺点：场景内模型过多，渲染两遍，帧率过低

解决方法

	a. 一个渲染器：负责渲染
	b. 主 scene ：有两个相机，透视&&正交
			1) 透视：负责正常渲染
			2) 正交渲染只渲染一次，用 把 RenderTarget 作为贴图使用
			3) 给mapScene 作为背景使用
			
	c. MapScene：透视相机（一个），代表相机物体（一个）
			1) 使用主场景，的正交相机给的贴图作为背景
     ::这样就可以避免，渲染过多造成帧率过低

实现代码

	// this.renderer ：就是render 对象
	/*
	 this.rendererSize  { w h} //渲染器的宽高
	 this.insetsize { w h}  // 小地图的宽高
	*/
	      
	    
	          this.renderer.setRenderTarget(null);
	          this.renderer.clear();
	          this.renderer.setViewport(
	            0,
	            0,
	            this.rendererSize.w,
	            this.rendererSize.h
	          );
	          // // this.renderer.setClearColor(0x000000,0)
	          // this.renderer.setClearAlpha(0)
	          this.renderer.render(this.scene, this.camera);
	          if (this.assistCamera) {
	            this.renderer.setScissorTest(true);
	            this.renderer.setScissor(
	              this.rendererSize.w - 300,
	              this.rendererSize.h - this.insetsize.h - 20,
	              this.insetsize.w,
	              this.insetsize.h
	            );
	            this.renderer.setViewport(
	              this.rendererSize.w - 300,
	              this.rendererSize.h - this.insetsize.h - 20,
	              this.insetsize.w,
	              this.insetsize.h
	            );
	            if (!this.map) {
	               // this.rtTexture  WebGLRenderTarget 保存主场景的渲染 图
	              //  this.renderer.setRenderTarget( rtTexture );
	              this.renderer.setRenderTarget(this.rtTexture);
	              this.renderer.clear();
	              this.renderer.setClearAlpha(0); 
	              this.renderer.render(this.scene, this.assistCamera);  // assistCamera 副相机
	              this.mapscene.background = this.rtTexture.texture;		// 设置 mapscene 背景
	              this.map = true;
	            }
	                   //清除深度缓存。
	            this.renderer.clearDepth();
	           
	            this.renderer.setRenderTarget(null);     // 清空  WebGLRenderTarget  的指向 ，让下面的渲染可以正常显示
	            if (this.map) {
	              // this.assistCamera = null;
	              this.renderer.setScissorTest(false);
	              this.renderer.setScissor(
	                this.rendererSize.w - 300,
	                this.rendererSize.h - this.insetsize.h - 20,
	                this.insetsize.w,
	                this.insetsize.h
	              );
	              this.renderer.setViewport(
	                this.rendererSize.w - 300,
	                this.rendererSize.h - this.insetsize.h - 20,
	                this.insetsize.w,
	                this.insetsize.h
	              );
	              this.renderer.render(
	                this.mapscene,
	                this.assistCamera
	              );
	            }
							// 启用或禁用剪裁检测. 若启用，则只有在所定义的裁剪区域内的像素才会受之后的渲染器影响。
	            this.renderer.setScissorTest(false);
	          }
	          this.renderer.clearDepth();
  • 注意： 在 this.curObj.setRenderTarget(null);之后 渲染小地图
    如果您有两个场景,并且想要创建画中画效果,则可以使用以下模式.首先设置autoClear：
    renderer.autoClear = false; // important! 不要自动清空否则画布 不显示

参考文档

posted @ 2023-02-02 11:01  过好每一天2022  阅读(222)  评论(0)    收藏  举报