I have an approach on this PG, but it’s just a “div” over the canvas that is transforming according to the distance/rotation of the camera. It’s not really attaching to a 3D plan. It’s not really what I’m looking for.
Yea, the issue is definitely at the browser level if you are trying to get content from another webpage page you don’t own.
See this issue:
Which lead to this:
But it will likely take a long time before something like this shows up in a browser so hacky workarounds are unfortunately the best option at this time.
DIV over canvas: Works pretty well on 2D screens but can’t present to a VR headset and it always needs to be in front of everything.
Server side webpage rendering: Works in 2D and in VR but is a lot slower, videos wont work and requires a server to exist somewhere.
Cross site browser plugin: With a chrome plugin you can inject JS onto your page and the iframe’s page and send messages back and forth so you can send the page data from the iframe to the parent and then re render the page from the parent using https://html2canvas.hertzen.com/ but this is also pretty slow and I’m not sure if this is against browser plugin TOS. It also doesn’t work very well for videos.
Your @Pryme8 solution only works for an internal web element on the server. It does not work with a link from an external site.
Is it possible to create a simple image of an external web page as an alternative. Like with Babylon.CreateScreenShot from an external address and display it as a texture on a clickable plane that redirects to the website.
This could be a solution, but I do not know if such an image can be generated remotely.
Yes, if you have a PHP server you create a PHP page to do a CORS request and as long as the responding server allows cross origin requests with the correct header you use that page to grab the information.
Then in your scene you would need to do an AJAX call to the PHP page that actually does the CORS request and then push that to the html2canvas object.
Ive done that method with the PHP CORS thing for web scrappers and other externally driven data stuff…
I find this by search on google. It seems to do the job. It’s written in WebGL (With a webgl2 context), So I guess that can be achievable in BabylonJS ? @Deltakosh what do you think of what is done below? I do not know anything about WebGL code
I have tested, but error : gl.bindTexSource which seemed to work on a local version of Chronium. So bad. It seems really boring to achieve that goal. Some speak of a security problem, others say that it is not possible. Zute, I hit a wall with this thing.
I saw that TreeJS does this with : WebGLRenderer and CSS3DRenderer and it displays a web page on a planeGeometry :
Now if you combined this with my mmmPie UI canvas engine, you could add hotspots and click callbacks on the canvas which if you did a conversion of the UV of the mesh to canvas space you could simulate the actual website interactions in the 3d scene (including scroll)
Now there are going to be some caveats that you have to fix, like a regEx scrape over the HTML context prior to injecting into the data div to correct image URLS and other things that might not be appearing correctly due to linkages.