Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transparency issue in Firefox with polygons in 3D #421

Closed
jmgomezpoveda opened this issue Nov 28, 2016 · 9 comments
Closed

Transparency issue in Firefox with polygons in 3D #421

jmgomezpoveda opened this issue Nov 28, 2016 · 9 comments

Comments

@jmgomezpoveda
Copy link
Contributor

jmgomezpoveda commented Nov 28, 2016 •
edited
Loading

I have created some polygons with colours and transparencies. This is how it looks like in 2D:

2d

However, in 3D, transparency is messed up in Firefox 50 (it shows as solid white), but fine in Chrome 53.

3D rendering in Firefox:

3d-firefox

3D rendering in Chrome:

chrome-ok

This used to work fine; not sure if in earlier versions of ol3-cesium, or earlier versions of Firefox.

I have reproduced the issue in a small file; attaching it since I can't create a jsfiddle with ol3-cesium.

transparency_issue.zip

<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <link rel="stylesheet" type="text/css" href="ol.css" />
  <script src="thirdparty/openlayers/ol3cesium.js"></script>
  <script src="thirdparty/Cesium/Cesium.js"></script>
  <script>
    var map;
    function createMap() {
      map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map2d'
      });
      map.getView().setCenter(ol.proj.transform([20, 75], 'EPSG:4326', 'EPSG:3857'));
      map.getView().setZoom(3.5);

      var geometry = [
          new ol.geom.MultiPolygon([ [ [ [-10, 70], [ 60, 70], [ 60, 69], [-10, 69], [-10, 70] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 71], [ 60, 71], [ 60, 70], [-10, 70], [-10, 71] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 72], [ 60, 72], [ 60, 71], [-10, 71], [-10, 72] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 73], [ 60, 73], [ 60, 72], [-10, 72], [-10, 73] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 74], [ 60, 74], [ 60, 73], [-10, 73], [-10, 74] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 75], [ 60, 75], [ 60, 74], [-10, 74], [-10, 75] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 76], [ 60, 76], [ 60, 75], [-10, 75], [-10, 76] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 77], [ 60, 77], [ 60, 76], [-10, 76], [-10, 77] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 78], [ 60, 78], [ 60, 77], [-10, 77], [-10, 78] ] ] ]),
          new ol.geom.MultiPolygon([ [ [ [-10, 79], [ 60, 79], [ 60, 78], [-10, 78], [-10, 79] ] ] ])
        ];

      var colourStyles = [];
      for (var i = 0; i < geometry.length; i++) {
        colourStyles[i] = new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(' + 10 * i + ', ' + 20 * i + ', ' + 30 * i + ', ' + 0.05*i +')'
          })
        });
      }

      var features = [];
      for (var i = 0; i < geometry.length; i++) {
        geometry[i].transform('EPSG:4326', 'EPSG:3857');
        features.push(new ol.Feature({
          geometry: geometry[i],
          colour: i
        }));
      }

      var vectorLayer = new ol.layer.Vector({
        map: map,
        source: new ol.source.Vector({
          overlaps: false,
          features: features
        }),
        style: function(feature) {
          var colour = feature.get("colour");
          return colourStyles[colour];
        }
      });

      map.addLayer(vectorLayer);

      // Switch to 3D
      setTimeout(function() {enable3D();}, 6000); 
    }

    function enable3D() {
      map3d = new olcs.OLCesium({map: map});

      var scene = map3d.getCesiumScene();

      //scene.camera.setView({
      //    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
      //});

      map3d.setEnabled(true);
    }
  </script>
</head>
<body onload="createMap()">
  <div id="map2d" style="width:800px;height:400px;float:left;"></div>
</body>
</html>
@gberaudo
Copy link
Member

30 * 9 is 270 > 255. Are you sure your last color is valid?

@jmgomezpoveda
Copy link
Contributor Author

Good catch; that is just some issue with the test page. So that explains the green colour in Chrome. So, the only issue is the transparency issue in Firefox.

@jmgomezpoveda jmgomezpoveda changed the title Colour/transparency issue with polygons in 3D Transparency issue in Firefox with polygons in 3D Nov 28, 2016
@gberaudo
Copy link
Member

Looks like a Cesium bug. See similar bug CesiumGS/cesium#2431.

@jmgomezpoveda
Copy link
Contributor Author

That may be. However, I cannot see that issue in the Cesium Sandcastle: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Rectangle.html&label=

@gberaudo
Copy link
Member

See also CesiumGS/cesium#4658.

@jmgomezpoveda
Copy link
Contributor Author

Yeah, that is likely the root cause. Should we close this issue or keep it open for tracking purposes?

@gberaudo
Copy link
Member

Fine to me to keep it open. Thanks.

@gberaudo
Copy link
Member

gberaudo commented Jan 4, 2017

OL3-Cesium was ported to latest Cesium version, which includes this fix: CesiumGS/cesium#4762. Could you update to master and test if the issue is solved?

@jmgomezpoveda
Copy link
Contributor Author

Yeah I just tested with the updated version of ol3-cesium and works great with the workaround removed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jmgomezpoveda @gberaudo