Can I set the color and opacity of buildings?

[nblintao]

I am doing data visualization to urban data. In my visualization, I need to set color and make it translucent. Can I set the color and opacity of buildings in Vizicities?

[antont]

at least by modifying the code in BlueprintOutputBuildings you can.

for example in this video you see at the end how the prices of the buildings are shown in a kind of heatmap way by using different colours, https://www.youtube.com/watch?v=SVhMFETeg88 .. info and the sources of that project are in https://github.com/playsign/fidemo and http://www.playsign.net/future-internet-solutions-and-smarter-cities/

the code, by Ludocraft, for the house colouring based on the price data is I think in https://github.com/playsign/fidemo/blob/master/js/client/BlueprintOutputBuildingPrices.js which sets the config and then there's a shader for the drawing. but you can do it with just e.g. vertex colours and default shading too. the actual colouring code with that seems to be here actually: https://github.com/playsign/fidemo/blob/master/js/client/BuildingAnimation.js

[brianchirls]

If you want the buildings to all be the same color, you shouldn't need to modify any of the Vizicities code. This feature was add in pull request #106. In your config options, it would look something like this:

//...
output: {
  type: "BlueprintOutputBuildingTiles",
  options: {
    grids: [{
      zoom: 15,
      tilesPerDirection: 1,
      cullZoom: 13
    }],
    materialOptions: {
      color: 0xFFDDDD,
      opacity: 0.8
      transparent: true
    }
  }
},
//...

You can set any options you want inside materialOptions and they will be passed to the THREE.js material. There's also a materialType option, which you can set to any THREE.js material constructor, like "MeshPhongMaterial", if you want to change that from the default.

You'll probably want to set emissive and possibly ambient as well. Also, be warned that the transparent buildings will composite a little weirdly against the map on the ground, because of the renderDepth option on the image tile mesh. There should probably be a bug issue filed for that.

But if you want to change the color per individual building, then yeah that's gonna require some custom code.

[nblintao]

Thank you for your help. I find the open source society extremely friendly and helpful. I am now able to complete my code. I hope to commit the useful part some day.