How to put charts(such as Highcharts or echarts) or div label into GUI

Questions
1

My workaround is output a picture as image Textures at present, but this way will consumes too many resources. So I wanted to ask if there was any other way

2

You sadly can’t easily project an HTML element in a 3D scene. there are workarounds, and small hacks and tricks that might make it look like it is working well, but Babylon doesn’t officially support any of those.

Maybe another community member can suggest a different course of action :slight_smile:

2 Likes
3

Some libraries, like the echarts one that you mentioned, can render to a canvas element, which Babylon supports creating and updating a dynamic texture from. :slight_smile:

For a simple example here I created an echarts chart on an offscreen canvas and then created a DynamicTexture from that canvas, which is projected onto a plane mesh:

6 Likes
4

thanks a lot for your help! :smile:

5

You are right, I think GUI can put HTML elements in 3D scenes from this example, thank you for reply :smiley:
Simple HTML GUI | Babylon.js Playground (babylonjs.com)

6

Hmm, in the example you posted the HTML element isn’t actually part of the 3D scene, it’s just overlayed overtop of it. If that’s what you’re going for then I would follow the examples from whatever charting package you want to use and then just make sure that whatever html element has the chart on it has a higher z-index than Babylon’s canvas (e.g. 0 for the Babylon canvas and 1 for the chart element).

7

NoNONO, in fack your answer is what I want, it is easily to set z-index but this way can’t show charts in a 3D scene. What’s more I find when I put a gltf model in this scene the model will lost textures and become black, so I find a new way: use echarts’s API called “myChart.getDataURL(opts)”