浏览代码

fix: 加上4d 的highCube

xzw 2 年之前
父节点
当前提交
c79d16f852
共有 3 个文件被更改,包括 231 次插入36 次删除
  1. 1 1
      js/Hot.js
  2. 228 33
      js/main_2020_show.js
  3. 2 2
      js/manage.js

+ 1 - 1
js/Hot.js

@@ -30,7 +30,7 @@ window.initHot = function(model){
     var defaultTex1 = Texture.load(g_HotImage.point);
     var defaultTex2 = Texture.load(g_HotImage.point2)    
     dealMap(defaultTex1,{ignoreResize:true}  );
-    dealMap(defaultTex2,{ignoreResize:true}  ); //这张图改为linear有黑边
+    dealMap(defaultTex2,{ignoreResize:true}  ); //这张图改为linear有黑边。  但即使不改,chrome调试手机版也有黑边和锯齿
     
     
     /* var _boxMat = new THREE.MeshBasicMaterial({ 

+ 228 - 33
js/main_2020_show.js

@@ -6,7 +6,7 @@
 
 
 
-
+let highMapAddColor// =  true
 
 !function() {
     "use strict";
@@ -17592,6 +17592,7 @@ window.Modernizr = function(n, e, t) {
               , R = e("../exception/BasicException")
               , P = (e("../constants")
             ,e("events").EventEmitter)
+            ,GLCubeFaces =  e("../enum/GLCubeFaces") 
 			//,Hot = e("hot")
               , O = new g(i);
             n.prototype = Object.create(o.Object3D.prototype),
@@ -18325,6 +18326,137 @@ window.Modernizr = function(n, e, t) {
                 return this.supportedModes[c.DOLLHOUSE] && this.supportedModes[c.FLOORPLAN]
             }
             ,
+            
+            n.prototype.addHighMapCube = function() {
+                //创建8*8的tile  cube 
+                if (player.qualityManager.getMaxZoomClass() == '4k' && player.qualityManager.maxRenderTargetSize == 2048) {
+                 
+                    var geo = new THREE.PlaneGeometry(1, 1, 1, 1)
+                    var cube = new THREE.Object3D()
+                    for (var cubeIndex = 0; cubeIndex < 6; cubeIndex++) {
+                        var face = new THREE.Object3D()
+                        for (var i = 0; i < 8; i++) {
+                            for (var j = 0; j < 8; j++) {
+                                var tile = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ side: 2 }))
+                                tile.position.set(i - 3.5, j - 3.5, -4)
+
+                                if (highMapAddColor) {
+                                    tile.material.opacity = 0.4
+                                    tile.material.transparent = true
+                                    var colorHue = Math.random()
+                                    tile.material.color = new THREE.Color().setHSL(colorHue, 0.6, 0.9)
+                                }
+
+                                tile.visible = false
+                                face.add(tile)
+                            }
+                        }
+                        switch (cubeIndex) {
+                            case GLCubeFaces.GL_TEXTURE_CUBE_MAP_POSITIVE_X:
+                                face.rotation.set(0, Math.PI / 2, 0)
+                                break
+                            case GLCubeFaces.GL_TEXTURE_CUBE_MAP_NEGATIVE_X:
+                                face.rotation.set(0, -Math.PI / 2, 0)
+                                break
+                            case GLCubeFaces.GL_TEXTURE_CUBE_MAP_POSITIVE_Y:
+                                var rot1 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI)
+                                var rot2 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 2)
+
+                                face.quaternion.copy(rot1).multiply(rot2)
+                                //face.rotation.set(Math.PI/2,0,0);
+                                break
+                            case GLCubeFaces.GL_TEXTURE_CUBE_MAP_NEGATIVE_Y:
+                                //face.rotation.set(-Math.PI/2,0,0);
+                                var rot1 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI)
+                                var rot2 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -Math.PI / 2)
+
+                                face.quaternion.copy(rot1).multiply(rot2)
+                                break
+                            case GLCubeFaces.GL_TEXTURE_CUBE_MAP_POSITIVE_Z:
+                                face.rotation.set(0, Math.PI, 0)
+                                break
+                            case GLCubeFaces.GL_TEXTURE_CUBE_MAP_NEGATIVE_Z:
+                                face.rotation.set(0, 0, 0)
+                        }
+                        face.scale.set(1, -1, 1)
+                        cube.add(face)
+                    }
+                    cube.name = 'highMapCube'
+                    this.highMapCube = cube
+                    this.add(cube)
+                    cube.scale.set(0.21, 0.21, 0.21) //camera.near is 0.1
+                    this.highMapCube.visible = false
+                }
+            }
+            /* 
+                highMapCube会遮住场景中所有物体, 如果一定要显示的话,只能类似potree中的那样渲染一个深度贴图出来(model无需贴图),然后其他所有物体的shader中都加入一段代码。(貌似本身已经支持了?)
+             */
+            n.prototype.isHighMapLoaded = function(cubeFace, tileX, tileY){
+                var tile = this.highMapCube.children[cubeFace].children[tileX * 8 + tileY]
+                return !!tile.material.map
+            }
+            n.prototype.updateHighMap = function(tex, cubeFace, tileX, tileY) {
+                //console.log('updateHighMap')
+                var tile = this.highMapCube.children[cubeFace].children[tileX * 8 + tileY]
+                tile.material.map = tex
+                if (highMapAddColor) {
+                    tile.material.opacity = 1
+                    tile.material.transparent = false
+                }
+                tile.visible = true
+                tile.material.needsUpdate = true //发现每次开始放大但还未放大到4k时也会把之前加载过的4k加载
+            }
+            n.prototype.resetHighMap = function() {
+                //console.log('resetHighMap')
+                if (!this.highMapCube) return
+                this.highMapCube.children.forEach(e =>
+                    e.children.forEach(tile => {
+                        if (tile.material.map) {
+                            tile.material.map.dispose()
+                            tile.material.map.loaded = !1
+                            tile.material.map.version = 0
+
+                            var h = player.sceneRenderer.renderer.properties.get(tile.material.map)
+                            player.sceneRenderer.renderer.getContext().deleteTexture(h.__webglTexture)
+                             
+                            tile.material.map = null
+
+                            if (highMapAddColor) {
+                                tile.material.opacity = 0.4
+                                tile.material.transparent = true
+                            }
+
+                            tile.material.needsUpdate = true
+                            tile.visible = false
+                        }
+                    })
+                )
+                this.highMapCube.visible = false
+            }
+            n.prototype.setHighMap = function(pano) {
+                if (!this.highMapCube) return
+                this.highMapCube.position.copy(pano.position)
+                this.highMapCube.quaternion.copy(pano.quaternion)
+            }
+            n.prototype.showHighMap  = function() {
+                if (!this.highMapCube) return
+                this.highMapCube.visible = true
+            }
+            n.prototype.hideHighMap  = function() {
+                if (!this.highMapCube) return
+                this.highMapCube.visible = false
+            }
+            //缩小后继续显示cube呢还是不显示?  不显示的话,就要把cube上的复制到renderTarget上……会不会又崩溃,or没加载的显示???
+
+                    
+                
+                
+                
+                
+                
+            
+            
+            
             t.exports = n
         }
         ).call(this, "/js/model/Model.js")
@@ -18368,7 +18500,8 @@ window.Modernizr = function(n, e, t) {
         "./RoomCollection": 141,
         events: 202,
         three: 217,
-		"hot": "hot" 
+		"hot": "hot" ,
+        "../enum/GLCubeFaces":25 ,
     }],
     140: [function(e, t, i) {
         "use strict";
@@ -19064,6 +19197,7 @@ window.Modernizr = function(n, e, t) {
                         newPano: this
                     }),
                     e = this
+                    this.model.setHighMap(this) //add
                 }
             }(),
             n.prototype.exit = function() {
@@ -19278,6 +19412,7 @@ window.Modernizr = function(n, e, t) {
             n.prototype.setZoomed = function(e) {
                 this.zoomed = e,
                 this.updateSkyboxForZoomLevel()
+                e ? this.model.showHighMap() : this.model.hideHighMap() //add
             }
             ,
             n.prototype.ensureSkyboxReadyForRender = function() {
@@ -19290,7 +19425,24 @@ window.Modernizr = function(n, e, t) {
             }
             ,
             n.prototype.getSkyboxTexture = function() {
-                return this.tiled ? this.minimumTiledPanoLoaded ? this.zoomed ? this.panoRenderer.zoomRenderTarget.texture : this.tiledPanoRenderTarget.texture : null : this.solidSkybox
+                //return this.tiled ? this.minimumTiledPanoLoaded ? this.zoomed ? this.panoRenderer.zoomRenderTarget.texture : this.tiledPanoRenderTarget.texture : null : this.solidSkybox
+             
+                if(this.minimumTiledPanoLoaded)
+                {
+                    if(this.zoomed && this.qualityManager.maxRenderTargetSize > this.qualityManager.maxNavPanoSize)//change 如果放大后和不放大都是2k就不用这个
+                    {
+                        return this.panoRenderer.zoomRenderTarget.texture;   
+                    }
+                    else
+                    { 
+                        this.tiledPanoRenderTarget.texture.mapping = THREE.UVMapping//add
+                        return this.tiledPanoRenderTarget.texture;
+                    }
+                }
+                else
+                {
+                    return null;
+                }  
             }
             ,
             n.prototype.onTileRenderFail = function(e, t, i) {
@@ -21496,6 +21648,8 @@ window.Modernizr = function(n, e, t) {
                 
                 
                 
+                
+                
             }
 			 
 			
@@ -21758,6 +21912,8 @@ window.Modernizr = function(n, e, t) {
                     })
                 })
 				/********************************************************************************************************************************************/
+                this.model.addHighMapCube()//add
+                this.on(w.FlyingStarted, this.model.resetHighMap.bind(this.model))
             }
             ,
             n.prototype.updateModelDependentData = function() {
@@ -25533,6 +25689,8 @@ window.Modernizr = function(n, e, t) {
               , c = new r.Euler;
             new r.Vector3;
             return function(h, u, d, p, f, g, m, v, A) {
+                if(f > this.qualityManager.maxRenderTargetSize) return; //add
+                
                 this.renderer;
                 if (!e) {
                     var y = 2;
@@ -27638,25 +27796,45 @@ window.Modernizr = function(n, e, t) {
         }
         ,
         l.prototype.setupZoomRenderTarget = function() {
-            if (this.qualityManager.getMaxZoomPanoSize() >= this.qualityManager.getMaxNavPanoSize()) {
-                if (this.zoomRenderTarget && this.zoomRenderTarget.width === this.qualityManager.getMaxZoomPanoSize())
-                    return;
-                var e = this.zoomRenderTarget;
-                if (this.zoomRenderTarget = this.initTiledPano(this.qualityManager.getMaxZoomPanoSize(), !browser.isMobile()/* !1 */),
-                e) {
-                    var t = e.width
-                      , i = this.zoomRenderTarget.width;
-                    this.sceneRenderer.copyCubeMap(e.texture, this.zoomRenderTarget, t, t, i, i),
-                    e.texture.dispose(),
-                    e.texture.loaded = !1,
-                    e.texture.version = 0,
-                    this.sceneRenderer.deallocateCubeTexture(e.texture),
-                    e.texture = null
-                }
-                this.zoomPanoRenderingDisabled = !1
-            } else
-                this.zoomPanoRenderingDisabled = !0
-        }
+            var targets = {};
+            return function(){
+                if(this.qualityManager.maxRenderTargetSize == '2k' && this.qualityManager.getMaxNavPanoSize()=='2k')return; //不使用zoomTarget 直接用pano的tiledPanoRenderTarget,防崩溃
+            
+                
+                if (this.qualityManager.getMaxZoomPanoSize() >= this.qualityManager.getMaxNavPanoSize()) {
+                    if (this.zoomRenderTarget && this.zoomRenderTarget.width === this.qualityManager.getMaxZoomPanoSize())
+                        return;
+                    var e = this.zoomRenderTarget;
+                    
+                    
+                    var size = this.qualityManager.getMaxZoomPanoSize()
+                    if(size > this.qualityManager.maxRenderTargetSize){ 
+                        return 
+                    } 
+                    
+                    if(targets[size]){
+                        this.zoomRenderTarget = targets[size]
+                    }else{
+                        this.zoomRenderTarget = this.initTiledPano(size, false  )//放大后不使用抗锯齿,否则消耗更多内存
+                        targets[size] = this.zoomRenderTarget
+                    }
+            
+                    
+                    if(e) {//将旧的zoomRenderTarget渲染到新zoomRenderTarget上
+                        var t = e.width
+                          , i = this.zoomRenderTarget.width;
+                        this.sceneRenderer.copyCubeMap(e.texture, this.zoomRenderTarget, t, t, i, i),
+                        e.texture.dispose(),
+                        e.texture.loaded = !1,
+                        e.texture.version = 0,
+                        this.sceneRenderer.deallocateCubeTexture(e.texture),
+                        e.texture = null
+                    }
+                    this.zoomPanoRenderingDisabled = !1
+                } else
+                    this.zoomPanoRenderingDisabled = !0
+            }
+        }()
         ,
         
         
@@ -28021,7 +28199,8 @@ window.Modernizr = function(n, e, t) {
                   , A = v.renderTarget
                   , y = v.size;
                 if (this.isPanoZoomed(r) && (A = this.zoomRenderTarget,
-                y = this.qualityManager.getMaxZoomPanoSize()),
+                y = A.width),    //this.qualityManager.getMaxZoomPanoSize()),
+                
                 this.isRenderTargetDescriptorValid(v) || (p = !1,
                 g = !1),
                 n || (this.anyUploaded(i.node) && (p = !1,
@@ -28043,14 +28222,27 @@ window.Modernizr = function(n, e, t) {
                       , b = C / s * y
                       , w = I / s * y;
                     e[a] || (e[a] = this.sceneRenderer.initSizedTexture2D(a, h.ClampToEdgeWrapping));
-                    var _ = e[a];
-                    if (this.sceneRenderer.uploadTexture2D(o, _, 0, 0, a, a),
-                    1 === t || 2 === t) {
-                        var T = 1 === t ? this.overlayTilesBasic : this.overlayTilesEnhanced;
-                        this.sceneRenderer.renderToCubeMap(_, A, a, a, 0, 0, a, a, b, w, E, E, i.cubeFace),
-                        this.sceneRenderer.renderToCubeMap(T[s], A, a, a, 0, 0, a, a, b, w, E, E, i.cubeFace, h.NormalBlending, !0, .5)
-                    } else
-                        this.sceneRenderer.renderToCubeMap(_, A, a, a, 0, 0, a, a, b, w, E, E, i.cubeFace);
+                    //var _ = e[a];
+                    //-------------
+                    if(s > this.qualityManager.maxRenderTargetSize ){ //4096 改
+                        var _ = this.sceneRenderer.initSizedTexture2D(a, THREE.ClampToEdgeWrapping);
+                        var loaded = player.model.isHighMapLoaded(i.cubeFace, u,d)                 
+                    }else{ 
+                        var _ = e[a]
+                    } 
+                     
+
+                    this.sceneRenderer.uploadTexture2D(o, _, 0, 0, a, a) 
+                    if (s > this.qualityManager.maxRenderTargetSize) {
+                        loaded || player.model.updateHighMap(_, i.cubeFace,  u,d)
+                    }else{ 
+                        if ( 1 === t || 2 === t) {
+                            var T = 1 === t ? this.overlayTilesBasic : this.overlayTilesEnhanced;
+                            this.sceneRenderer.renderToCubeMap(_, A, a, a, 0, 0, a, a, b, w, E, E, i.cubeFace),
+                            this.sceneRenderer.renderToCubeMap(T[s], A, a, a, 0, 0, a, a, b, w, E, E, i.cubeFace, h.NormalBlending, !0, .5)
+                        } else
+                            this.sceneRenderer.renderToCubeMap(_, A, a, a, 0, 0, a, a, b, w, E, E, i.cubeFace);
+                    }
                     m.uploadCount++,
                     this.emit(f.TileRenderSuccess, r, s, l, c),
                     m.uploadCount === c && this.emit(f.PanoRenderComplete, r, s, c),
@@ -28227,8 +28419,9 @@ window.Modernizr = function(n, e, t) {
             if (!this.zoomPanoRenderingDisabled) {
                 var t = this.getActiveRenderTargetDescriptor(e.id);
                 if (t && t.renderTarget) {
-                    var i = this.qualityManager.getMaxZoomPanoSize()
-                      , n = t.renderTarget
+                    var i = Math.min(this.qualityManager.maxRenderTargetSize, this.qualityManager.getMaxZoomPanoSize()),  //this.qualityManager.getMaxZoomPanoSize()
+                    
+                        n = t.renderTarget
                       , r = t.size;
                     this.sceneRenderer.copyCubeMap(n.texture, this.zoomRenderTarget, r, r, i, i),
                     this.copyBaseRenderStatusToZoomed(e.id)
@@ -28269,6 +28462,8 @@ window.Modernizr = function(n, e, t) {
             this.useHighResolutionPanos = !0,
             this.useUltraHighResolutionPanos = !1,
             this.modelHasUltraHighPanos = !1
+            this.maxRenderTargetSize = a.isMobile() ? 2048 : 4096  //add 
+        
         }
         var r = e("../enum/PanoSizeClass")
           , o = e("../settings")

+ 2 - 2
js/manage.js

@@ -97,11 +97,11 @@ var settings = {
         },
         bigMobile:{ //width和height都超过一定值
             nav: '2k',
-            max: '2k',
+            max: '4k',//'2k',
         },
         mobile:{
             nav: '1k',  //不放大时
-            max: '2k',  //放大最大
+            max: '4k',  //放大最大
         }
     }, //可以稍后自行修改
 }