Hi,
We are working on a showroom where different sized products have to be shown with different prices. We need to include an excel sheet where the immediate calculations have to be made. But when i include an excel sheet, it is opening in another window. Rather we need it to be displayed inside the shapespark walkthrough. Is there anyway i can resolve this issue?
Thanks
I’m not aware of anyone doing this so far. You could try this Microsoft guide for embedding Excel workbook in a website: Embed your Excel workbook on your web page or blog from SharePoint or OneDrive for Business - Microsoft Support Try putting the iframe code from this guide in the HtmlLabel extension.
hello @Jan, in relation to this question, is there a possibility of placing a web page on a surface? something similar to how you place a video texture? In other words, paste an iFrame as a video texture on a surface! I hope to explain myself well.
Hi @jorgearq ,
I’ve seen some interesting examples before for three.js (the core of Shapespark):
I like your suggestion, it is practical for virtual gallery walls and you can get better optimization with text.
I spent a lot of Mb on photo wallpapers with texts.
There was a WebGL extension proposal to support using iframe as a texture, but it was not implemented and it doesn’t seem that any progress is made on this extensions: WebGL WEBGL_texture_source_iframe Extension Proposed Specification
What @Vladan found is a trick to apply 3D CSS transforms to show a web content in 3D. But such content is not really a part of a 3D scene - it is still rendered separately, the same way the current flat HTML Label extension in Shapespark is rendered. So you couldn’t for example map such content as a texture on any object. And unfortunately such content still wouldn’t be visible in VR, the same way HTML Labels are not visible in VR.
Hi @jan, I found this HTML Elements in WebGL and GitHub - jensarps/surf-in-style, may be this can help you to implement it into Shapespark. Good Luck!! (Iframe as texture | Blend4Web)
Hi Jan, many customers ask about a web page insert in a surface? Do you have any idea how to do that, a trick or hack way, or some!
That will be a great hit on this Corona time!!!
Hi @jorgearq for such a feature we depend on what WebGL API enables, so we won’t be able to add this (see also my explanation three posts above).
Hi @jan, excuse my ignorance and my insistence, but this new option of sharing screen on a surface during a meeting fulfills exactly my need to place a live video, however I know that it can only be done in meetings.
@jorgearq, we are not planning screen sharing outside of meetings.
What type of stream would you like to share in your scene: somebody’s screen or a live stream captured from a camera?
Hi @wojtek, They both work for me, but whichever one they implement first would be very useful to me!
I have a particular project, I am putting together a convention center where I can do live presentations, something similar to the new function that you just activated to share screen, only that it would require it to work outside of a meeting, so that it does not have the limitation of 10 participants, so anyone who enters the experience will be able to see the live broadcast.
Shapespark screen sharing capabilities are closely tied to the meetings functionality. The same video streaming infrastructure is used to stream screen content and the camera image (in both cases you need to have participants that register to receive the streams).
You could embed life streamed video, for example from YouTube, within a HTML Label popup, but such popup is not a part of 3D scene, so for example it can not be shown on a TV screen within the 3D scene.
There is also a possibility that some video streaming platforms allow to access a streamed video as a HTML Video element. Such element could be embedded within a 3D scene using Shapespark JavaScript API. Unfortunately, I’m not aware of any such platform, so you would need to research this (for example YouTube doesn’t seem to allow to access html video element).
Thanks @jan I will reserch that kind of services. This is a very important thing that I need to develop in our tours. If I find some service that can do this I will inform you here.
Happy new year everyone! We also have a client that wants to stream something directly on a trade fair master screen. We actually tried and succeeded in swapping a given material with a live video stream BUT without an access to the Shapespark back end can not seem to broadcast it to any other users than ourselves.
If anyone finds such video service that supports HTML video element, please let me know.
I think it might be difficult and/or disallowed to use the HTML <video> element from the Twitch player as a source for the video texture.
To use a live stream as a video texture you can try the following approach (JavaScript programming required):
body-end.html file that:
<video> element play your live stream based on the M3U8 manifest,<video> element as an argument to the Shapespark’s API Viewer.createTextureFromHTMLVideo function to create a live stream texture,baseColorTexture property of the material you want the live stream to appear on.We haven’t tested the above approach, but it seems to be complete and should work.
Hi! I’d like to chip in if you don’t mind, I recently tested the hls library to create a mediastream from .m3u8 and sure enough it does work.
I’ll attach a sample of code from shapesparks github that I modified! Hope this helps 
<head>
<link href="https://vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<script>
const viewer = WALK.getViewer();
viewer.setMaterialEditable('Rug');
function createVideoTexture() {
const video = document.createElement('video');
video.classList.add("video-js")
video.autoplay = true;
video.muted = false;
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('http://YourStreamSource.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
console.log("hls not supported")
video.src = 'http://YourStreamSource.m3u8';
video.addEventListener('canplay', function () {
video.play();
});
}
return viewer.createTextureFromHtmlVideo(video);
}
function setUpExternalVideoTexture(triggerNodeTypeName, materialName,
) {
let videoTexture = null;
viewer.onNodeTypeClicked(triggerNodeTypeName, function () {
if (!videoTexture) {
videoTexture = createVideoTexture();
console.log(videoTexture)
const material = viewer.findMaterial(materialName);
material.baseColorTexture = videoTexture;
}
else if (!videoTexture.isPlaying) {
videoTexture.play();
} else {
videoTexture.pause();
}
viewer.requestFrame();
return true;
});
}
setUpExternalVideoTexture('Rug', 'Rug');
</script>For those of us who aren’t so “Java Script” inclined … could you present a more step by step - 1 - 2 - 3 approach to implementing a live stream as a video texture
Thanks
Hi @Jumbe,
Thanks for sharing the HLS Library sample code. I tried integrating it in the example-room scene, but I am unable to play the video. I can hear the audio though, but the screen remains blank.
Could you please share if you had faced any such issue?
Thanks