fix terrain and 3dtiles in webgl

maptalks · Dec 23, 2024 · 42f1fe9 · 42f1fe9
1 parent cf53b91
commit 42f1fe9
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 140 deletions.
diff --git a/debug/terrain.html b/debug/terrain.html
@@ -8,10 +8,10 @@
     /*.container{width:100%;height:100%;background-color: red;}*/
     .container{width:100%;height:100%;background-color: red;}
   </style>
-  <link rel="stylesheet" href="/maptalks/dist/maptalks.css">
-  <script type="text/javascript" src="/maptalks/dist/maptalks.js"></script>
+  <link rel="stylesheet" href="/maptalks/packages/map/dist/maptalks.css">
+  <script type="text/javascript" src="/maptalks/packages/map/dist/maptalks.js"></script>
   <!-- <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script> -->
-  <script type="text/javascript" src="/maptalksgl/dist/maptalksgl.js"></script>
+  <script type="text/javascript" src="/maptalks/packages/gl/dist/maptalksgl.js"></script>
   <script type="text/javascript" src="./chncrs.js"></script>
   <!-- <script type="text/javascript" src="../dist/maptalks.terrain-dev.js"></script> -->
   <body>
@@ -70,10 +70,10 @@
         });
 
         map.setLights({
-            ambient: {
-            resource: {
-              url: './terrain/resources/venice_sunset_2k.hdr',
-            },
+          ambient: {
+            // resource: {
+            //   url: './terrain/resources/venice_sunset_2k.hdr',
+            // },
             exposure: 2,
             orientation: 0
           },
@@ -93,14 +93,14 @@
                 spatialReference: {
                   projection: 'EPSG:3857'
                 },
-                offset: function (z) {
-                    //实时计算wgs84和gcj02瓦片的偏移量
-                    const center = map.getCenter();
-                    const c = maptalks.CRSTransform.transform(center.toArray(), 'GCJ02', 'WGS84');
-                    targetCoord.set(c[0], c[1]);
-                    const offset = map.coordToPoint(center, z, POINT0)._sub(map.coordToPoint(targetCoord, z, POINT1));
-                    return offset._round().toArray();
-                },
+                // offset: function (z) {
+                //     //实时计算wgs84和gcj02瓦片的偏移量
+                //     const center = map.getCenter();
+                //     const c = maptalks.CRSTransform.transform(center.toArray(), 'GCJ02', 'WGS84');
+                //     targetCoord.set(c[0], c[1]);
+                //     const offset = map.coordToPoint(center, z, POINT0)._sub(map.coordToPoint(targetCoord, z, POINT1));
+                //     return offset._round().toArray();
+                // },
                 // urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                 // urlTemplate: 'https://khms{s}.googleapis.com/kh?v=923&hl=en&x={x}&y={y}&z={z}',
                 // subdomains: ['1','2','3'],

diff --git a/packages/gl/src/layer/GroupGLLayerRenderer.js b/packages/gl/src/layer/GroupGLLayerRenderer.js
@@ -104,7 +104,7 @@ class GroupGLLayerRenderer extends maptalks.renderer.CanvasRenderer {
             this._renderInMode('default', null, methodName, args, true);
             return;
         }
-        const fGL = this.glCtx;
+        const fGL = this.gl;
 
         const sceneConfig =  this.layer._getSceneConfig();
         const config = sceneConfig && sceneConfig.postProcess;
@@ -247,7 +247,7 @@ class GroupGLLayerRenderer extends maptalks.renderer.CanvasRenderer {
         }
         const fbo = this._getOutlineFBO();
 
-        const fGl = this.glCtx;
+        const fGl = this.gl;
         fGl.resetDrawCalls();
         this.forEachRenderer((renderer, layer) => {
             if (!layer.isVisible()) {
@@ -473,34 +473,13 @@ class GroupGLLayerRenderer extends maptalks.renderer.CanvasRenderer {
         return true;
     }
 
-    createContext() {
+    initContext() {
+        super.initContext();
         const layer = this.layer;
-        const attributes = layer.options['glOptions'] || {
-            alpha: true,
-            depth: true,
-            stencil: true
-        };
-        attributes.preserveDrawingBuffer = true;
-        attributes.antialias = !!layer.options['antialias'];
-        this.glOptions = attributes;
-        const gl = this.gl = createGLContext(this.canvas, attributes, layer.options['onlyWebGL1']);        // this.gl = gl;
-        this._initGL(gl);
-        gl.wrap = () => {
-            return new GLContext(this.gl);
-        };
-        this.glCtx = gl.wrap();
-        this.canvas.gl = this.gl;
-        this.reglGL = gl.wrap();
-        this.regl = createREGL({
-            gl: this.reglGL,
-            attributes,
-            extensions: layer.options['extensions'],
-            optionalExtensions: layer.options['optionalExtensions']
-        });
-        this.gl.regl = this.regl;
+        const { regl, gl } = this.context;
+        this.regl = regl;
+        this.gl = gl;
         this._jitter = [0, 0];
-
-
         this._groundPainter = new GroundPainter(this.regl, this.layer);
         this._envPainter = new EnvironmentPainter(this.regl, this.layer);
         const weatherConfig = this.layer.getWeatherConfig();
@@ -664,6 +643,8 @@ class GroupGLLayerRenderer extends maptalks.renderer.CanvasRenderer {
         if (this.canvas.pickingFBO && this.canvas.pickingFBO.destroy) {
             this.canvas.pickingFBO.destroy();
         }
+        delete this.gl;
+        delete this.regl;
         this._destroyFramebuffers();
         if (this._groundPainter) {
             this._groundPainter.dispose();

diff --git a/packages/gl/src/layer/postprocess/PostProcess.js b/packages/gl/src/layer/postprocess/PostProcess.js
@@ -72,7 +72,7 @@ export default class PostProcess {
             getFramebuffer,
             getDepthTexture
         };
-        const fGL = layerRenderer.glCtx;
+        const fGL = layerRenderer.gl;
         fGL.resetDrawCalls();
         if (event) {
             layerRenderer.forEachRenderer(renderer => {
@@ -118,7 +118,7 @@ export default class PostProcess {
         context.renderMode = 'default';
         context['sceneFilter'] = ssrFilter;
         context.renderTarget.fbo = fbo;
-        const fGL = layerRenderer.glCtx;
+        const fGL = layerRenderer.gl;
         let cleared = false;
         if (event) {
             layerRenderer.forEachRenderer(renderer => {

diff --git a/packages/gl/src/layer/terrain/TerrainLayerRenderer.js b/packages/gl/src/layer/terrain/TerrainLayerRenderer.js
@@ -1338,14 +1338,11 @@ class TerrainLayerRenderer extends MaskRendererMixin(maptalks.renderer.TileLayer
         });
     }
 
-    createContext() {
-        const inGroup = this.canvas.gl && this.canvas.gl.wrap;
-        if (inGroup) {
-            this.gl = this.canvas.gl.wrap();
-            this.regl = this.canvas.gl.regl;
-        } else {
-            this._createREGLContext();
-        }
+    initContext() {
+        super.initContext();
+        const { regl } = this.context;
+        this.regl = regl;
+
         this.renderer = new reshader.Renderer(this.regl);
         this.layer.fire('contextcreate', { regl: this.regl });
     }
@@ -1376,62 +1373,6 @@ class TerrainLayerRenderer extends MaskRendererMixin(maptalks.renderer.TileLayer
         }
     }
 
-    _createREGLContext() {
-        const layer = this.layer;
-
-        const attributes = layer.options.glOptions || {
-            alpha: true,
-            depth: true,
-            antialias: this.layer.options['antialias']
-            // premultipliedAlpha : false
-        };
-        attributes.preserveDrawingBuffer = true;
-        attributes.stencil = true;
-        this.glOptions = attributes;
-        this.gl = this.gl || this._createGLContext(this.canvas, attributes);
-        // console.log(this.gl.getParameter(this.gl.MAX_VERTEX_UNIFORM_VECTORS));
-        this.regl = createREGL({
-            gl: this.gl,
-            attributes,
-            extensions: [
-                'OES_element_index_uint'
-            ],
-            optionalExtensions: layer.options['glExtensions']
-        });
-    }
-
-    _createGLContext(canvas, options) {
-        const names = ['webgl', 'experimental-webgl'];
-        let context = null;
-        /* eslint-disable no-empty */
-        for (let i = 0; i < names.length; ++i) {
-            try {
-                context = canvas.getContext(names[i], options);
-            } catch (e) { }
-            if (context) {
-                break;
-            }
-        }
-        return context;
-        /* eslint-enable no-empty */
-    }
-
-    resizeCanvas(canvasSize) {
-        if (!this.canvas) {
-            return;
-        }
-        super.resizeCanvas(canvasSize);
-
-    }
-
-    clearCanvas() {
-        if (!this.canvas) {
-            return;
-        }
-        super.clearCanvas();
-
-    }
-
     _initSkinShader() {
         if (this._skinShader) {
             return;

diff --git a/packages/layer-3dtiles/src/layer/renderer/Geo3DTilesRenderer.js b/packages/layer-3dtiles/src/layer/renderer/Geo3DTilesRenderer.js
@@ -1,7 +1,7 @@
 import * as maptalks from '@maptalks/map';
 import { reshader } from '@maptalks/gl';
 import { getGLTFLoaderBundle } from '@maptalks/gl/dist/transcoders.js';
-import { createREGL, MaskRendererMixin } from '@maptalks/gl';
+import { MaskRendererMixin } from '@maptalks/gl';
 import Geo3DTilesWorkerConnection from '../Geo3DTilesWorkerConnection';
 import LRUCache from './LRUCache';
 import TileMeshPainter from './TileMeshPainter';
@@ -658,40 +658,19 @@ export default class Geo3DTilesRenderer extends MaskRendererMixin(maptalks.rende
         this.painter.deleteTile(tile);
     }
 
-    createContext() {
+    initContext() {
+        super.initContext();
         const layer = this.layer;
-        const attributes = layer.options.glOptions || {
-            alpha: true,
-            depth: true,
-            stencil: true,
-            preserveDrawingBuffer: true,
-            antialias: layer.options.antialias,
-        };
-        const inGroup = this.canvas.gl && this.canvas.gl.wrap;
-        if (inGroup) {
-            this.gl = this.canvas.gl.wrap();
-            this.regl = this.canvas.gl.regl;
-        } else {
-            this.glOptions = attributes;
-            this.gl = this._createGLContext(this.canvas, attributes);
-        }
-        this.regl = this.regl || createREGL({
-            gl: this.gl,
-            attributes,
-            extensions: [
-                'OES_element_index_uint'
-            ],
-            optionalExtensions: layer.options['optionalExtensions'] || []
-        });
+        const { regl, reglGL } = this.context;
+        this.regl = regl;
+        this.gl = reglGL;
         this.prepareWorker();
-        if (inGroup) {
-            this.canvas.pickingFBO = this.canvas.pickingFBO || this.regl.framebuffer(this.canvas.width, this.canvas.height);
-        }
-        this.pickingFBO = this.canvas.pickingFBO || this.regl.framebuffer(this.canvas.width, this.canvas.height);
-        this.painter = new TileMeshPainter(this.regl, layer);
+        this.canvas.pickingFBO = this.canvas.pickingFBO || regl.framebuffer(this.canvas.width, this.canvas.height);
+        this.pickingFBO = this.canvas.pickingFBO || regl.framebuffer(this.canvas.width, this.canvas.height);
+        this.painter = new TileMeshPainter(regl, layer);
 
         this.layer._resumeHighlights();
-        this.layer.fire('contextcreate', { regl: this.regl });
+        this.layer.fire('contextcreate', { regl });
     }
 
     prepareWorker() {

diff --git a/packages/map/src/renderer/layer/CanvasRenderer.ts b/packages/map/src/renderer/layer/CanvasRenderer.ts
@@ -431,6 +431,7 @@ class CanvasRenderer extends Class {
             const map = this.getMap();
             this.canvas = map.getRenderer().canvas;
             this.context = map.getRenderer().context;
+            this.initContext();
         }
         this.prepareContext();
         delete this._maskExtent;
@@ -465,6 +466,10 @@ class CanvasRenderer extends Class {
         return maskExtent2D;
     }
 
+    initContext() {
+
+    }
+
     prepareContext() {
 
     }