webaverse / app

Web metaverse client
https://app.webaverse.com
MIT License
339 stars 208 forks source link

Art: WFC/Wave function collapse city #1365

Closed avaer closed 1 year ago

avaer commented 3 years ago

https://github.com/marian42/wavefunctioncollapse

This is a good Unity repo + codebase for procedurally generating cities, better than what I had planned. It essentially uses a set of prefabs to glue together a cityscape based on fills and heuristics.

img

The actual blocks FBX is here: https://github.com/marian42/wavefunctioncollapse/blob/master/Assets/blocks.fbx

image

We can use this to fill the need to have a city in Zone 0, meeting the last requirement for the trailer.

The work involved is:

Inspiration

solarpunk

madjin commented 3 years ago

Familiarizing myself with this project, so far set it up and usied https://github.com/Plattar/gltf-exporter to export as GLTF

image

124k triangles from a 16x16 area generation image

madjin commented 3 years ago

More pics: image blender_KBgRPpnvWC blender_WXXFjZ8OhB

Could also generate these more vertically as well image

avaer commented 3 years ago

Great research, looks sick. 😍 I’m curious how this textures. If you uv/texture the source does it come out in the model?

Once we understand the process, we should redo the ingredients and textures to be strong “Webacity”/“Zone 0”/“Nihon” architecture.

It would take a bit of work, but the resulting effect might be pretty magical.

madjin commented 3 years ago

I did a bit of testing to see what the optimal workflow. When I first attempted to modify the pieces inside Unity, lets just say it didn't like that and I had to nuke / redownload the entire project.

Meshes

The blocks.fbx file is hard to edit in Unity and blender because when you open it up it looks like this: image

Gotta open up the prototypes file where all the pieces are individually arranged Unity_MkOe8UtKd3

You can then change values in the ModulePrototype component where you can see a preview of what it looks like in the context of other pieces. Great way to pre-visualize the generation. image

It took me a bit to figure out how to modify the meshes, both blender and unity have different scale / coordinate systems.

First, figure out what piece you want to edit based on step above so you know how it'll fit with other pieces. Then, import the FBX file into blender with Apply Transform box checked.

blender_kUyXCdi5ak

Search for the piece you want to edit, then hide everything else to make it easier to work on just that. Make sure whatever you're doing is joined to that specific piece.

image

When done, unhide everything again and export with Apply Transform box enabled again. You can name the fbx file whatever you'd like.

Import custom FBX

When you import the FBX into Unity make sure to uncheck Convert Units and check Read/Write enabled.

Unity_6bziidNSNX

Open up the Prototypes.unity project and drag the Prototypes.prefab into the Hierarchy. Select the piece(s) that you modified and replace the Mesh Filter with your new piece from the FBX you imported (mine was blocks7.fbx).

image

Save the project. You can now open the Game.unity project and generate with the modified pieces.

Unity_77YUXILdWE

Texturing

I'm still figuring out the workflow for texturing modular pieces before generation, something seems to break which causes them to disappear in the output. In the meantime after generating you can either texture in Unity or Blender no problem.

Changing the material for a piece in Blender will change all of them. blender_B3fzPik05V

madjin commented 3 years ago

Figured out texturing pre-generation, was simpler than I thought. Open the prototypes prefab then search for the piece you want to retexture. If that piece is missing from the Mesh Filter search for it again and respawn it. Then drag the material onto the piece and go back to the scene.

image

Next open ModuleData and click Create module data.

image

Can then re-open the Game.unity project and Initialize the area to generate with the remodeled / retextured pieces. Ta-da!

image

madjin commented 3 years ago

Author of the repo is working on a rewrite as a full blown city generator: twitter image

How it looks with textures: https://pbs.twimg.com/media/E6B-OpGWYAIQeUJ?format=jpg&name=4096x4096 image The new generator uses octrees and has these advantages compared to the old one:

Hasn't decided if it'll be hosted on GH again. Think we'll be able to use the same assets though! image

avaer commented 3 years ago

Sounds like we should proceed with generating Webaversey blocks then, but I think first it will need a lot more ingredients from Pinterest.

madjin commented 3 years ago

Notes on workflow

  1. First we're starting with the base mesh layer. We could add simple textures at this step. There's 454 modules.
  2. Next we can do a detail pass with an asset kit ready for adding plants / decorations. Doing this collaboratively or as a timelapse would make great fodder for social media.

When redesigning modular pieces, we'll want to edit the blocks.fbx file in the way I described at the top of the comment above:

Search for the piece you want to edit, then hide everything else to make it easier to work on just that. Make sure whatever you're doing is joined to that specific piece.

In order to check how a piece looks like next to another piece we can view previews in the Prototypes.unity file or generate everything and check. We'll want a quick feedback cycle. I think it might be fine to keep the UVs really simple, could retexture in post plus it could open up room for graffiti in the future.

Window Box

Name: High_Wall_Window Add window till for plants to overhang (don't add plants yet)

image

Now in the blend file you could search High Wall Window and find all the windows that need plants in the tills.

image

Interiors

Name: Interior_Wall

How might we improve the interiors? Note: the floor, wall, and ceiling are all part of the same modular section.

image

Example: Roofs

Name: Search "roof" Replace some with steel/glass to test

One of the common threads of solarpunk aesthetic is light coming in from high windows / glass ceilings. There is access to the rooftops, but the rooftops do not serve the interior sections well to allow for light.

Unity_wpey7A5s5R

One of the challenges with this is that there are a lot of individual roof pieces. Something we could do is perhaps instead of shingles, we replace some roofs with steel and glass and test.

image

Asset Kits:

After the initial base is generated we can go back in and add details

Plants

image

Signs and hanging decorations

image

Idea: Facade

The output leaves a lot exposed, so we'll need to think of how we want to patch that up.

One way is to add scaffolding on the outside and make it look like a work in progress. This would be an honest expression of how the world is a constant work in progress, similar to booming cities around the world. It's also kind of cool in the way that it's like the grid being applied vertically.

image

Another idea I had was to enclose it up, perhaps as part of a larger structure such as a mountain hillside. Gerudo Fortress was a cool example of such. image

This would add a ton of cohesion since it'd be 1 model gluing everything together, make such optimized through by being enclosed, and be made pretty quickly since the procgen is very geometric. The rooftops would be unaffected.

marian42 commented 3 years ago

Hello, I hope you don't mind me commenting here!

Some thoughts on the current blocks:

Really looking forward to seeing progress on this, I love that you chose Solarpunk as the theme!

avaer commented 3 years ago

Some textures/shapes/colors ideas. This is Collision Chaos Good Future from Sonic CD.

solarpunk6 solarpunk2 solarpunk4 solarpunk5

avaer commented 3 years ago

An article that made the HN rounds: https://www.messynessychic.com/2021/06/10/inside-the-imaginarium-of-a-solarpunk-architect/

madjin commented 3 years ago
madjin commented 3 years ago

Note: We have to replace each block individually in the unity project so its a good idea to take note of which pieces have been modified in the process.

madjin commented 3 years ago

Okay we figured out a better workflow, we transfer the modified .blend file of the blocks.fbx file and then export (with Apply Transform enabled) to overwrite the blocks.fbx file in the Unity project Assets folder. As a test @plankatron removed the columns from the wall and shingles on the roof and it worked during initialization.

image

Unity_uwonhuosDg

avaer commented 3 years ago

The AI keeps coming up with Nihon City for this city (in Zone 0). Is that appropriate?

I googled it and it does not seem to exist so it is actually original (though I could be wrong).

I did not have any japan references in the prompt so if it came up with this multiple times it seems like it has a strong idea.

avaer commented 3 years ago

Checking in on the explanation of why it came up with that:

(this is AI generated)

Is Nihon City a good name for the name these characters inhabit? Why?

I think it is, and not just because I know the name Nihon means Japan in Japanese. I think it's a good name because it makes clear that the City isn't normal. But it is rooted in the real world. Also, I think it's because the name Nihon is easy to pronounce and remember, which is important when it comes to online video games. And I think the name is easy to say and remember because it's an actual name, not a made up one. The fact that it's a real name gives it a sense of authenticity.

madjin commented 3 years ago

Simplification

We need a more simplified generation in order to make concept art of new designs (geometry / textures) before modifying the pieces.

Modifications

  1. Remove these lights, make these walls more plain.

Unity_yiPNvr9Px6

  1. Remove the Grandfather clock (perhaps we can consider a new prop instead?)

Unity_pKJonsC6Oq

  1. Simplify these walls by removing the lights

Unity_ATElbk4OUC

Unity_uwonhuosDg

Updates

@plankatron figured out the minimal starter set for generating maps with: https://github.com/marian42/wavefunctioncollapse/issues/20, has 3 sets that work

avaer commented 3 years ago

@plankatron figured out the minimal starter set for generating maps with: marian42/wavefunctioncollapse#20, has 3 sets that work

But we are not doing that right? Only the full set.

plankatron commented 3 years ago

interesting shape language : 17-Buttress-Columns-Mita-Mitauzo-実-田-く-ら-Intricate-Japanese-Architectural-Drawings-www-designstack-co 16-To-the-City-Mita-Mitauzo-実-田-く-ら-Intricate-Japanese-Architectural-Drawings-www-designstack-co 13-Sleeping-Mita-Mitauzo-実-田-く-ら-Intricate-Japanese-Architectural-Drawings-www-designstack-co 12-Column-Jungle-Mita-Mitauzo-実-田-く-ら-Intricate-Japanese-Architectural-Drawings-www-designstack-co 11-Inside-the-City-Mita-Mitauzo-実-田-く-ら-Intricate-Japanese-Architectural-Drawings-www-designstack-co 10-Possible-Future-Mita-Mitauzo-実-田-く-ら-Intricate-Japanese-Architectural-Drawings-www-designstack-co 07-Loaded-Interior-Mita-Mitauzo-実-田-く-ら-Intricate-Japanese-Architectural-Drawings-www-designstack-co 22-Precious-Chaos-Mita-Mitauzo-実-田-く-ら-Intricate-Japanese-Architectural-Drawings-www-designstack-co

madjin commented 3 years ago

Those are some nice illustrations. I took some screenshots of the latest simplified blend, think we can concept art some good ideas on top of it. Here are some samples:

Unity_BAlTNpZUf0

Unity_XiWDO8e2zO

Unity_BmY4zukmBU

Unity_J30HuG6CFD

Unity_kikhzOmunh


Note: If @plankatron you need front facing pics to make the UV maps faster we can use screenshots like this

Unity_bYb7R7YnQ9

Screenshots Imgur album: https://imgur.com/a/sq3naP7 GLTF export: https://cdn.discordapp.com/attachments/641036402829819914/867794958688976906/Map.zip

avaer commented 3 years ago

https://github.com/webaverse/app/issues/1365#issuecomment-884632571 interesting shape language :

I agree, very pretty and surreal. Like someone spent lifetimes on this one city. Which would be an appropriate vibe, though hard to accomplish without spending a lifetime. Luckily we have procgen :D

madjin commented 3 years ago

image "his is probably the most accurate thing I've seen for how I envision city/Z0 looking like"

madjin commented 3 years ago

Workflow Speed Tip

You can edit the prefab inside Unity and nest objects inside modules then save the module data.

Unity_An28xfDZYJ

Then when you initialize the map it should start working in your editor

Unity_KMpV9XWQHf

Can export as part of the gltf as well using plattar exporter. Saves a bunch of time!

madjin commented 3 years ago

image

image

avaer commented 3 years ago

☝️ Whoa, what's that?

It looks like it's neural.

madjin commented 3 years ago

Need to remove these tables

image

GaladWarder commented 3 years ago

☝️ Whoa, what's that?

It looks like it's neural.

It's the WIP I put in the Discord from yesterday - used deepdream to transfer the style quickly then I'm overpainting on top

Vianvolaeus commented 3 years ago

☝️ Whoa, what's that? It looks like it's neural.

I think I might have a way to achieve similar to this in SP 👀 the edge warping style is something i've messed with a little bit before... If you want me to explore it a bit, I can. It's generative (non-destructive) filtering.

avaer commented 3 years ago

It's the WIP I put in the Discord from yesterday

Thanks, I see it now.

madjin commented 3 years ago

Missed a spot here with the ceiling trim, need to simplify:

image

image

Need to remove the outdoor railings too: Roof_2_Wall Roof_2_Wall_M

image

image


Here's a preview on how it looks when initializing with nested assets:

https://user-images.githubusercontent.com/32600939/128097783-f86c99e7-e0f8-4cfe-8805-2a04f9e52f64.mp4

madjin commented 3 years ago

Comments / Ideas:

This area could be interesting for either hanging lanterns or scrolling LED text image

We could make custom fit vines based on the mesh export of the city and edit in post for the columns: image image

Trees would look really cool at night with light decorations, would make the zone feel so much more comfy and safe image

The trees outdoor need to be changed, they're not that great.

Overall this has interesting and sometimes surprising results that manual work might not provide the satisfaction of. I think there can be a balance between WFC and manual interior design.

madjin commented 3 years ago

Unity_6v7r9t3Hrn

Unity_IgKcSPnmvh

Unity_VFTzKIG0Y5

image

Blender

6x6 area 12 textures 27.2 MB 58k triangles

image

https://cdn.discordapp.com/attachments/641036402829819914/872593885459775498/WFC_export.zip

madjin commented 3 years ago

Test file: https://cdn.discordapp.com/attachments/641036402829819914/873675931317858344/wfc_12x4.zip

Textures

I've begun testing out various textures for the pieces in blender by making quick and dirty uvmaps for the pieces and assigning CC0 textures using https://github.com/eliemichel/LilySurfaceScraper. I can rapidly test new textures since applying it to one piece applies to all the other pieces. For somethings like the roof there are 10 pieces.

image

image

blender_kMu2fiZLWs

I'm currently literally throwing stuff at the wall to see what sticks. Here's an unlit look at an example:

blender_uNBJ8yFqoP

The style we want is cartoon / anime. I have ideas on how to post-process the chosen textures to fit the aesthetic.


Geometry

It would look nice to hang art on the walls. We need to smooth out the trim that is on some of these module pieces so we have clear wall space to hang some framed art.

blender_eItbEb6KOW

Lights

I could add point lights to some of the module pieces and it will generate the map with all of them there. This is good for the props that have emissive lights, will save a lot of time.

Unity_Fsk6FR9Oi1

When exporting to GLTF using plattar plugin and importing to Blender, the lights do appear as nodes but not as lights. Wondering if there's a way to search and replace in Unity or Blender?

blender_9BGpM6mFly

madjin commented 3 years ago

Updated latest project files here: https://github.com/madjin/wavefunctioncollapse

avaer commented 3 years ago

https://github.com/webaverse/wavefunctioncollapse

avaer commented 3 years ago

Closing this because it’s not clear whether we can use the existing work, but the ingredient models are good. We still need to generate this.

ahadshams commented 2 years ago

reopening the issue and doing a deep dive

i found this and found the style quite interesting

https://manifold.garden/