Hi,
We have developed an interactive site plan for Windows and mobile platforms. Then we decided to convert it to WebGL (specifically PlayCanvas). As neither WebGL nor PlayCanvas are our area of expertise, we’re looking someone to help us with the project.
We’re not looking for a person to develop the whole solution, but rather an experience PlayCanvas developer to help us fill some gaps, and improve our code. If you’re good and keen to help, we can agree fixed rate for developed functionality.
As I previously mentioned the solution has already been developed, and I can provide a video which shows required functionality. The 3D assets will be created by us, so we’re not looking for 3d artist, but coder.
Basically - brief would be to create functionality (described below) without any assets. If we would have plain as a ground with 10 cubes to be houses and 5 rectangles to be trees, with all the described functionality, that would be great. We would also need to have ability to load / unload , swap any 3d assets on runtime, to speed up loading time.
The project requires following functionality to be implemented (check our video to get even better understanding of the description below):
When in site view (initial view)
-
user can drag with finger to rotate around middle of the site (that’s already been done)
-
user can use pinch / zoom gesture, to zoom in/out the site. This part works well, on Windows , but when trying on mobile, it resize the whole page rather than just zooming inside WebGL iFrame
-
the UI (on the video) is currently part of the app, but we would like the UI elements to be outside WebGL view,so the UI can be presented in different way depends on the platform / screen res / screen size. The UI would just needs to communicate between WebGL and HTML in both ways (when selecting house in WebGL window, then relevant info is presented using html outside WebGL window, the same about buttons done in html, to trigger actions inside WebGL window ).The basic concept has been done, but we’re looking for feedback/help from experience web-dev.
-
the app is grabbing data from JSON feed, and use it to print basic info about the houses, as well as change status of the houses. JSON integration in WebGL is not done, the JSON file / URL to the file will be provided.
when clicking on house type, bedrooms etc. currently the UI is within the app. The UI is build dynamically based on info from JSON feed, and predefined set of images.
Example of 2 plots from JSON file:
[{
“SiteID”: 0012,
“PhaseID”: 0101,
“PlotNumber”: 1,
“Status”: “Sold”,
“Price”: 0.00,
“Beds”: 5,
“Type”: “Type1”
},
{
“SiteID”: 2166,
“PhaseID”: 1101,
“PlotNum”: 41,
“Status”: “Available”,
“Price”: 543210.00,
“Beds”: 4,
“Type”: “Type2”
},
We wouldn’t need all the filters to be done, just one example to help us create other filters.
- When filtering is active, material for selected houses would need to be either transparent, or swapped with different set.
- Each house in our stand-alone/mobile version of the app got attached a class, which contain all the information about the object (like plot, status, price, beds, as well as description (per house type), thumbnail image etc. We would like to have the same functionality in WebGL version.
- the ‘house type’ list example with scrolling animation (on video from 00:20) , would need to be (like all other UI elements), part of HTML, outside WebGL window, like all other UI elements.
- The only two non-interactive UI elements would be 2 logos, always visible within WebGL window, in place where ‘DEV BUILD’ text currently is.
- the background noise is currently played in loop, so we would like to have it implemented the same way.
- user should be able to double tap / click on any clickable house (info if it’s clickable or not is part of house class attached to each house, I mentioned above) to fly to the house
- user should be able to trigger the same flying action when selecting ‘Plot’ button, then selecting plot, and then if plot is valid and button '‘fly to plot’ is clicked, the camera would fly there.
- In the current stand-alone app all the animations are generated on the fly from code using a tween library, to fly smoothly from any initial position / place, to predefined pivot point, which is attached as a child of each clickable house. We have tried to implement that , but hit some issue with camera flipping 180 degree at the end (maybe Gimbal lock issue, but not sure).
When in house mode:
- user can use drag gesture to rotate around the house, and pinch/zoom to zoom in/out
- the house panel info on the right hand side, would need to be grabbed from JSON feed + class attached to each house
- the Site plan button when clicked would fly camera to site view (the site position, where camera was before flying to house view)
- Show trees, would got through the scene and activate/deactivate all objects tagged as ‘TREE’
- Free Orbit, rather than rotating around house pivot point, camera would rotate around its own axis in place (like in 360 view).
- When walk mode activated, camera is landing on the front of the house, having front doors behind, and allow to walk. Currently we’re using onscreen UI, to activate/deactivate walking forward/backward, then using finger to look around.
- When floor plan activated, another 3d model of floor plan need to be loaded,where you can basically do the same like with site/house - drag to rotate and pinch / zoom, to zoom in/out. Button, outside WebGL window, floor plan measurements / details, grabbed from external file / DB.
- When gallery activated, gallery view is loaded as part of the app, where you can change images by clicking / tapping previous / next button.
When in walk mode:
- user can go back to previous mode (either house or site mode), in with nice, smooth transition, nothing predefined.
- user can also activate mini-map, which allows you to choice from predefined list of choices, where on this development you could move, when being still in walk mode.
If that’s something you would be keen to help us with - please contact me.
To see the video I mentioned a few times - please share your Google e-mail address, so I can add you to list of viewers (the video is private).
Regards,
Tomasz