We are using Cesium for animation work, with some 2D animation such as image zoom in/out and spreading as a overlay on 3D Canvas(not html element, just WebGL elements).
Is there any way to use add 2D animation overlay in Cesium Casvas? I got some references about combining PixiJS and ThreeJS.
But it use 3D canvas dom as 2D image source to implement it, so there will be no interaction path for user to manipulate 3D scene.
So we are considering another way to make 2D canvas dom as image source of 3D element such as Billboard. But we need a static billboard fill the whole canvas, whose position cannot be changed with camera. Just like a overlay canvas on the front of 3D canvas to render 2D annimation.
Like dynamic HUD in Canvas.
Hi there,
Is there are reason you want to use WebGL elements directly? Could we have more details about your use case? We can probably come up with some solution, but there isn’t direct support for this.
Cheers,
- Rachel
在 2017年5月2日星期二 UTC+8上午4:13:41，Rachel Hwang写道：
Hi there,
Is there are reason you want to use WebGL elements directly? Could we have more details about your use case? We can probably come up with some solution, but there isn't direct support for this.
Cheers,
- RachelOn Friday, April 28, 2017 at 4:59:04 AM UTC-4, trista...@garmin.com wrote:Like dynamic HUD in Canvas.
Thanks Rachel.
We want to show a picture or some charts on the front of scene with some animation such as shape entrance, just like Relive video:
Since billboard's position will be changed with camera, so we need another way to realize it...
Hi Tristan,
You can just overlay ordinary html elements over the viewer to add a HUD. If you need an element to draw directly over a specific part of the scene, you can use
Cesium.SceneTransforms.wgs84ToDrawingBufferCoordinates() (http://cesiumjs.org/Cesium/Build/Documentation/SceneTransforms.html) to transform world space coordinates into screen coordinates to position your HUD element correctly.
Hope that helps!
- Rachel