Cesium Fisheye Effect?

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

I would like to add a fisheye effect to Cesium. Is there a way to do this? Maybe using a CSS plugin or using the Cesium camera options?

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
None

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I would like to try to use this in a projection dome.

4. The Cesium version you're using, your operating system and browser.

2

Hi there,

I took a quick look and it seems like for a true fish-eye effect, you’d need to create an environment map, (see http://paulbourke.net/dome/fisheye/), in which case you’d need to dig into the cesium rendering source code a bit to accomplish this. Otherwise, you could apply a distortion to the camera’s projection matrix, but that’s not exposed via the public API. You would need to modify the camera to expose that property.

We are currently working on a post processing effects framework (#5615), which this could perhaps take advantage of.

I don’t know of any CSS plugin to accomplish this.

Thanks, let us know what you end up doing, sounds like a cool project!

Gabby

3

We downloaded the fork for post processing effects from the github, and made some custom post process fragment shaders to perform the effect. Looks sharp.

4

Awesome to hear! Do you have an example? We’d love to see it in action!

Thanks,

Gabby

5

made a glsl and added it into the Source/Shaders/PostProcessStages folder.
there were a few files that needed changing after that:
    Source/Cesium.js needed it in several places (i searched file for NightVision, and just emulated format)
    Source/Scene/PostProcessStageLibrary.js (same as above. this required an entire function be copied as well)
    Specs/Scene/PostPRocessStageLibrarySpec.js (same again, with entire function)
after files are edited and in place, build with "npm run release" and it will implement them to be called as the native post processing shaders. I used the Sandbox example for the PostProcessing to figure out how to call:

var collection = viewer.scene.postProcessStages;
var domeIn=collection.add(Cesium.PostProcessStageLibrary.createDomeInStage());
var domeOut=collection.add(Cesium.PostProcessStageLibrary.createDomeOutStage());

it can be seen at:
http://digitalgreynoise.net/cesium/Apps/Dome/index.html

6

Also, sorry about the poor format for the demo, it's particularly formatted for reasons.

7

That’s pretty neat, thanks for sharing your results and process!