PDA

View Full Version : Unity web page/Gallery proof-of-concept



Nangleator
04-08-2014, 03:51 PM
I've been fiddling with the idea of an online gallery in the form of an architectural walk-through (or a first person shooter.) It's trickier than I thought to set it up. I thought simple, white corridors would work, but even with large texture maps, the banding is crazy. It's also difficult to find a good size for textures, without things getting crazy. I really feel for game developers!

This little test (http://home.comcast.net/~david.nangle/Webgallery.html) needs some work. Some interactivity. Perhaps background music and interactive narration when the viewer reaches certain spots. (There's 12 pictures total, if you want to see them all.

Disadvantages: Huge setup time. Can't easily show lots of texture work. Viewer has to load the Unity Player plugin for his browser.

Advantages: Kind of cool. Can show actual 3D model work, as well as pictures. People with a little game experience can go nuts making something like this amazing.

OnlineRender
04-08-2014, 04:42 PM
I've been fiddling with the idea of an online gallery in the form of an architectural walk-through (or a first person shooter.) It's trickier than I thought to set it up. I thought simple, white corridors would work, but even with large texture maps, the banding is crazy. It's also difficult to find a good size for textures, without things getting crazy. I really feel for game developers!

This little test (http://home.comcast.net/~david.nangle/Webgallery.html) needs some work. Some interactivity. Perhaps background music and interactive narration when the viewer reaches certain spots. (There's 12 pictures total, if you want to see them all.

Disadvantages: Huge setup time. Can't easily show lots of texture work. Viewer has to load the Unity Player plugin for his browser.

Advantages: Kind of cool. Can show actual 3D model work, as well as pictures. People with a little game experience can go nuts making something like this amazing.


it's early days however I notice some gaps in the environment you need to butt them together using the snap function in unity

example of what you can do http://3dxyz.pro/lightwiki/

Nangleator
04-08-2014, 04:53 PM
...you need to butt them together using the snap function in unity... http://3dxyz.pro/lightwiki/

I'll have to look for that. Still trying to figure out a workflow. I have trouble with Unity navigation, so I put all my assets together in LW and exported the scene as a single FBX.

Very nice environment, by the way. I noticed your work on this a while ago, and I've been anticipating your progress. Did you do this with the Pro version of Unity?

XswampyX
04-08-2014, 05:07 PM
It's a good idea. something a bit different.
You could also bake out your corridors using Lightwave.....

http://i465.photobucket.com/albums/rr16/xXswampyXx/Bake_Coridoor_zps752b6703.jpg (http://s465.photobucket.com/user/xXswampyXx/media/Bake_Coridoor_zps752b6703.jpg.html)

121281

I've baked out the texture and left the scene as is, but copied the model into a new lay and then applied the baked texture map to it so you can see what it will look like. I've then added it back into the scene.
A bit like time travel. :D

Nangleator
04-08-2014, 05:13 PM
Yup, I baked in LW and applied those textures to other versions of the models, so I don't have to worry about lighting in Unity. I kept my models very simple because I wanted to make sure things worked before I went too far. I tried all this a couple years ago, but couldn't get a surface baking camera to handle radiosity at a useful size in less than a century.

I exaggerate, but I had one render to 2048x2048 last 30 hours and not make it past 1%. I can't remember if it was 1% radiosity solution, or 1% scene rendering.

XswampyX
04-08-2014, 05:17 PM
Yup, I baked in LW and applied those textures to other versions of the models, so I don't have to worry about lighting in Unity. I kept my models very simple because I wanted to make sure things worked before I went too far. I tried all this a couple years ago, but couldn't get a surface baking camera to handle radiosity at a useful size in less than a century.

I exaggerate, but I had one render to 2048x2048 last 30 hours and not make it past 1%. I can't remember if it was 1% radiosity solution, or 1% scene rendering.

Strange? The scene above takes 51.2 seconds...

RayO3D
04-08-2014, 08:41 PM
... Viewer has to load the Unity Player plugin for his browser...

Just as a quick note (in case you had not heard): This will no longer be true in Unity v5. They are dropping the web plugin in favor of a WebGL setup so that should help quite a bit on that side.

I would also take a look at trying to bake the lighting in Unity as well. I have done it over there and been pretty happy with the results. I will admit it was not overly an exact science from my experience but with a few tweaks I got what I was looking for. I can post up a few examples when I get to get work tomorrow.

I also have a script I like to use with the first person controller that hides the cursor as you move around and then toggles it back on and stops the mouse moving the camera so you can interact with items.

If you have other LW > Unity questions let me know and I will be glad to help.

Danner
04-09-2014, 02:33 AM
... I exaggerate, but I had one render to 2048x2048 last 30 hours and not make it past 1%. I can't remember if it was 1% radiosity solution, or 1% scene rendering.

This is a known bug, It happens sometimes. All you have to do is increase the UV Border, (usually around 30 does the trick but I've had to go up to 150)

GandB
04-09-2014, 06:36 AM
Just as a quick note (in case you had not heard): This will no longer be true in Unity v5. They are dropping the web plugin in favor of a WebGL setup so that should help quite a bit on that side.

Didn't know that; awesome news!

Nangleator
04-09-2014, 09:20 AM
Lots of useful stuff on this thread, thanks all!

For my next iteration, I'll use this workflow:

1. Build the whole gallery model complete, with image planes on another layer. Geometry for lights on another (glow panels, lightbulbs, etc.)
2. Texture the whole model and do render tests to get lighting right.
3. Break the gallery model into small sections, one per layer, preferably with some identical sections, to save on texture memory.
4. UV each section with 3D Coat.
5. In Layout, set up the gallery model, image planes, light geometry and lights.
6. Using the surface baking camera, render out a good texture for each segment of the gallery.
7. Surface each section with the baked image and save as individual FBX files.
8. Import all into Unity and reassemble.

That sound about right?

Also, would you model extraneous items in each section (crates, cables, detritus) as part of the section, or a separate layer, with its own UV?

It would be a damned shame not to add animated models to the scene, as well. That seems pretty straightforward.

RayO3D
04-09-2014, 10:58 AM
Here (http://rayo3d.com/personal/ray/lw/unity-web-test/WebDeployment.html) is a little test I put together this morning. You can hit the Left Alt on your keyboard (sorry on the Mac I would have to test to see what key there) to unlock the cursor from controlling the camera. It looks like in the Web Player I can't hide the cursor like it happens in the standalone player.

Here is pretty much the process I went through:
1) Create model per layer for each wall section (straight, corner, up, and down) and then the light panel.
2) Create a UV and material for each model.
3) Send each layer individually to Layout and export FBX (Once in Unity, make sure to select the FBX files and check on "Generate Lightmap UV" and hit apply).
4) In Unity and assemble the sections into a hallway (tip: hold V with the move tool to snap vertices together) and place the light panels.
5) Make all of the wall sections static.
6) Assign the Light Panels a Self-Illumin > VertexLit Shader and change the Emission to 8 (also I made sure that just a texture of only white is assigned to the Base and Illumin texture spots on the shader)
7) I made a duplicate of Light Panels and marked on static and left the other non-static and inactive (this is because after light baking the static one appeared dark).
8) Switch to Lightmapping panel and I was able to bake with the default settings (though you might want to play around with the settings for the quality).
9) Once the bake is complete, make the static LightPanels inactive and the non-static active.
10) Add Mesh Collider to all of the walls (this was just in the interest of speed... the walls were very low poly so it wasn't going to cost much to do that).
11) Drop in the first person controller prefab and place for a starting position.

Tips I have found useful for going from LightWave to Unity:
- For Environments, I normally just build out sections (walls, floors, etc) that can be repeated (reusing objects and textures in Unity) and assemble the scene there. I will sometimes put one together in layout for reference but I think it is more efficient on the Unity side to build there (someone definitely correct me if I'm wrong though).
- I can't remember if this is something I picked up along the way or an actual requirement of Unity but I normal do 1 UV/material per object layer in LightWave. You can re-use materials for different objects/layers but each one can only have one UV (not counting the lightmap UV Unity can generate).
- If you are doing anything with Specular Maps, just remember they need to be in the alpha of your Diffuse Map. Most shaders look to that for Spec (though some will have their own texture slot it is way more common for the alpha channel).
- Edit: If you take your environment and then drop the whole thing in a Prefab once you get done, that will also save on draw calls and improve performance too.

I'm not sure if I really answered all of your questions but let me know and I will help where I can.

Nangleator
04-09-2014, 11:24 AM
Oops! Password protected.

RayO3D
04-09-2014, 12:10 PM
Oops! Sorry copied the wrong URL at first. I fixed it in the post but for easy access: http://rayo3d.com/personal/ray/lw/unity-web-test/WebDeployment.html