And in the viewer index.html can receive these messages:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
if (event.origin !== "https://configuratordomain") {
return;
}
// Handle the message
}
This a standard mechanism for communicating between a page and an iframe, it is not a part of Shapespark API. The idea is that if a user for example selects a floor material from your configurator interface, the configurator will send a message to the viewer to change the floor material.
To be able to do anything useful in response to such messages we will need to at least add a function that would allow you to find a material by name. Can you talk with the developer what kind of operations you would like to perform, so we know if some other functions need to be also added?
It has been a while. I have been monitoring the continued developments at Shapespark - great job!
We are continuing to seek a visualization solution for our product that will allow us to show/hide geometry to allow the geometry in the viewer to follow our online configurator.
Have there been any plans since we last chatted on this forum to add this type of functionality? I am not a webgl expert but it looks like the EcoHomes example bakes the scene without the optional geometry then inserts the optional geometry into the scene complete with shadows for the optional geometry.
I look forward to your thoughts. Thanks very much. Eric
You can already do some of this with the Material Picker extension. You can change materials but you currently cannot show * hide objects (which I think would be a big plus )
Hello @Eric_Bjornson. As @ntxdave pointed, we added support for changing materials, but in a short term we don’t have plans to add support for adding/removing objects.
In general such interactive changes are possible in WebGL, although require support of some form of dynamic lighting in the engine (for example EcoHomes looks like it is using ambient occlusion based lighting).
What if you made it so all objects were visible during baking and then allowe us to set up controls (similar to the material picker) that allowe us to control the visibility?
IMO, from what I have seen as a bigger problem is the way objects are stored. If there are multiple instances of an object, the way Shapespark stores them, you can’t address them independently. Again, LMO, that issue needs to be addressed as well.
You can already hide and show objects (Hide in views setting in the Objects tab). But this is intended mainly for hiding ceiling in floor plan views, or for example to show 3D text room names visible only in the floor plan views.
If you hide objects that cast significant shadows, the results won’t look good, like in this post: Configurator Commands - #2 by jan
Yes, I am aware of the ability to show/hide objects at the view level but this is not flexible enough (IMO). Let me put it this way:
Shapespark is, and markets itself as, a presentation tool. So let me give you a typical situation: I have a product the has multiple add-on options. I want the viewer to be able to see any combination of the options. Doing that at the view level is not really a viable solution.
Despite really hoping to find a solution that includes geometry change functionality, I would still like to consider using your software to showcase our homes. I feel you have one of the best performance vs quality products available. We would like the ability to control views and materials from external triggers - I know we had briefly discussed your API under development - might this be something that might be made available soon?
@Eric, I agree that the performance and quality is one of the best out there. I also think that the ability to do HTML and Material Picker are excellent.
Your suggestion to control the triggers externally is interesting but I do not think they would give the ability to overcome some of the problems that @jan and @wojtek have pointed out before. Seems that the ability to control lighting for these situations (materials, show/hide objects, and things like that) would still be a problem.
While working on the editor extensions we have moved the JavaScript API a bit forward, although it is not yet used by any external users.
You can use the API to implement the same functionality that the material change extension enables: replace all occurrences of one material within a scene with another material (this second material must also be present in the scene during loading). Is such functionality sufficient for you?
Thanks for this. At minimum, we would need over material change, and camera position & target (which could be as simple as navigating to predetermined views) set within Shapespark (scene buttons in our app vs buttons at the top right corner of the viewer). It would also be great to have access to the show/hide object function so that we can do some experimentation.
We don’t yet expose a function to navigate to predefined views, but you could do it by simulating clicks in the Shapespark view menu items with the JavaScript .click() method.
In the index.html the view elements are children of the <div> with id view-list.
You can hide objects but you need to sacrifice shadows.
In this example https://all360.shapespark.com/prueba_sillones2/ I set up two ways to hide objects: one with shadows (the triangle chair) and one without shadows (the square chair). It works but only if you are willing to sacrifice the shadow to show two types of furniture arrangements
Hi @Vladan, pre-baking the shadows to the floor wouldn’t be very flexible - if you would have more pieces of furniture you would have to render several versions of the floor and than some how connect this to the changing chairs. What should work would be pre-baked shadows added to the chair as a simple plane underneath with transparent png
Hi @Kuba, we should also be careful about the flickering of the additional layer above the floor. I am also aware of the effects of shadows of other objects near objects that are changing. Generally, both of your ideas can be helpful for now.
For the third solution, I’m not sure if it can be programmed into Shapespark: mark the box area where the shadows will be changed, render this area in extra baking map and connect it with the “object picker”?
@Vladan I would just put the planes with shadows raised a little bit above the ground and the should work without flickering (a least at reasonably close distance)
Hello!
I would love to do a scene like this: http://ex.i-plans.pl/shapespark/
but I’m not into coding at all… I was reading this chat, but I didn’t acctually get how to do this with the JavaScript. Could you explaine me step by step how to get from a normal modell to this?
Thank you so much,
Jasmin
Hi Jasmin, this old demo depends on mouse hover to highlight floors. Since then we realized this wasn’t a good idea since hover is not compatible with touch screen devices.
It is better to use clickable 3D spheres or flat text that can be added from the Shapespark editor Viewer tab (Extension section at the bottom). Open URL extension will allow you to add such clickable sphere/text next to each floor of such building and open a floor plan image or a separate scene when clicked. This doesn’t require any JavaScript programming.
)
that is a good idea! I will try and show you the results. Thansk for the tip. 