{"id":42618,"date":"2018-05-01T06:00:38","date_gmt":"2018-05-01T10:00:38","guid":{"rendered":"http:\/\/shamusyoung.com\/twentysidedtale\/?p=42618"},"modified":"2018-05-01T06:21:24","modified_gmt":"2018-05-01T10:21:24","slug":"pixel-city-redux-4-i-didnt-know-i-didnt-know-that","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=42618","title":{"rendered":"Pixel City Redux #4: I Didn’t Know I Didn’t Know That"},"content":{"rendered":"

In the last entry I hacked together a solution that let me draw my scene without using a framebuffer object. But now I’m realizing that even though I got lighting working, I still don’t have the features I need to make this work.<\/p>\n

The Loss of Framebuffer Effects<\/h3>\n

One of my goals at the start of this project was to mess around with goofy color reduction and dithering effects. I don’t know why, really. It was just something I wanted to see in action. <\/p>\n

The idea I had for dithering would squash the image down to just 16 colors, which would produce something like this:<\/p>\n

I strongly suspect this effect won't do much unless you apply it to a near-photoreal scene, but I still want to run the experiment.<\/div>
I strongly suspect this effect won't do much unless you apply it to a near-photoreal scene, but I still want to run the experiment.<\/div><\/p>\n

With lots of colored lighting, stark shadows, and the right surface textures, that might look really interesting. Like pixel art in motion? The other idea was to simply reduce the resolution of the individual color channels to make something like this:<\/p>\n

It doesn't look very interesting here, but in on old OpenGL project I got some semi-interesting results out of this.<\/div>
It doesn't look very interesting here, but in on old OpenGL project I got some semi-interesting results out of this.<\/div><\/p>\n

Again, there might be some combination of lighting, shadows, bloom FX, and surface textures that would make something unique. (As opposed to just “pixelated”.) <\/p>\n

I really enjoy this sort of crazy mixing of technology levels. Like, “What would it look like if you were doing modern-day 3D rendering on the EGA displays of the late 1980s?” Maybe it would yield a distinctive look, or maybe it would just result in something confusing and dull. The only way to be sure would be to do the experiment and see how it looks.<\/p>\n

Sadly, I have to abandon this idea. These effects require the use of a framebuffer. You need to be able to render the entire screen into a framebuffer, and then copy it into the viewport using some sort of special effects shader. No framebuffer means no full-screen effects. <\/p>\n

This also means no bloom lighting, which is another thing I wanted to experiment with. I wondered what it would look like if you only applied bloom to certain color channels. Like, blue light blooms, but red light doesn’t. It might look something like this:<\/p>\n

I know bloom lighting gets a lot of hate, but I think it's a bit like CGI. People only notice it when it's done poorly.<\/div>
I know bloom lighting gets a lot of hate, but I think it's a bit like CGI. People only notice it when it's done poorly.<\/div><\/p>\n

I know this is somehow possible in Unity, because Nightdive Studios did something like this in the System Shock Remake<\/a> demo, and that was written in Unity:<\/p>\n

Can we call this... bluem lighting?<\/div>
Can we call this... bluem lighting?<\/div><\/p>\n

I’m guessing the “dreamy” look of this image comes from bloom lighting with the blue channel boosted, and I really wanted to try that out on my city.<\/p>\n

But to do all this I’d need to figure out how to gain access to framebuffer effects in Unity, and:<\/p>\n

1) The documentation on this rendering path is so sketchy it borders on classified.
\n2) What little I can find out about it indicates it’s built around rendering the scene with normal maps, with the assumption that you’re going for modern-day rendering conventions. So even if I did gather enough information on how to use Unity’s deferred render path, I’d still need to perform extensive modifications to adopt it to my gonzo rendering style. (And it might not even be possible to do so.)<\/p>\n

A few days after writing this I found the post-processing effects. It would have allowed me to do all of the stuff above, but none of the search terms I came up with took me to the secret chamber on knowledge I needed to proceed. I found a post-processing effect that does bloom lighting, but it’s a black box and I can’t figure out how to get the source. (I’m sure I’ve got the source SOMEWHERE on my machine in the \/Unity install folder, but with no indication of what it’s called or how to set it up, I’d have to re-write and re-implement the entire thing. <\/p>\n

It’s a shame, because I’m sure I could do the blue bloom lighting by changing a single line of code, but I can’t get the info on where that one line of code would go.<\/p><\/div>\n

Using Unity is really odd. Sometimes huge, complex tasks can be automated in just a couple of lines of code, and sometimes seemly-obvious things become unreasonably complex. For the last five days I’ve been saying, “Everything in Unity is either trivial or impossible!” That’s not really true, but it feels true.<\/p>\n

Enough whining. Let’s get back to work.<\/p>\n

Streets<\/h3>\n

Bah. Close enough. Ship it.<\/div>
Bah. Close enough. Ship it.<\/div><\/p>\n

In previous entries you might have spotted some streets with traffic lines and proper intersections. In this write-up I’m listing features in order and talking about them in isolation because that makes it easier to follow, but the truth is that I bounced around and worked on a lot of different things. If I got stuck on one thing, I’d switch over to another task until I got an idea of how to solve the first problem.<\/p>\n

So let’s go back and talk about how I made those streets, because I ran into an amusing situation.<\/p>\n

Like I said in part 1<\/a>, I scribbled some random lines down to use as streets. That would form something like this:<\/p>\n

Finally, a nice easy problem for a change.<\/div>
Finally, a nice easy problem for a change.<\/div><\/p>\n

Then I just need to see where the lines cross each other. I can split them at those points and insert intersections. That will leave me with something like this:<\/p>\n

So simple a child could do it! Sadly, there aren't any kids around at the moment and I'm stumped.<\/div>
So simple a child could do it! Sadly, there aren't any kids around at the moment and I'm stumped.<\/div><\/p>\n

Okay, so I just need to take two arbitrary line segments and derive their intersection point. (Assuming they have one.) To do that I’ll need to…<\/p>\n

Um.<\/p>\n

This Should Be Easy, Right?<\/h3>\n

Hang on. Why can’t I figure this out? I really expected this would be easy, but now that I’m about to type the code I suddenly realize I have no idea how to do this<\/i>. And it seems like it should be simple, right? “Where do two lines intersect?” That sounds like a simple operation. It certainly seems simple compared to fancy stuff like surface normals and reflection vectors and transformation matricies. <\/p>\n

I mean, it's RIGHT THERE.<\/div>
I mean, it's RIGHT THERE.<\/div><\/p>\n

Oh right, I can look at the point and see how far it is from the ends and that will tell me…<\/p>\n

No, that will tell me if the point falls within the line, but first I need to find the point. <\/p>\n

(Moments of confusion and embarrassment pass. I feel like some kid who’s been asked to write a word on the chalkboard, and it’s not until I’m holding the chalk in my hand that I realize I no longer speak English. Why am I having so much trouble?)<\/p>\n

This is silly. I can do this. What if…<\/p>\n

Okay, what if I connect two of the endpoints? This will form two of the corners of a triangle. It should be easy to get the inside angles of those two corners, and I can use those to somehow derive…<\/p>\n

I worked out a formula to solve this, but it only works on left triangles.<\/div>
I worked out a formula to solve this, but it only works on left triangles.<\/div><\/p>\n

Huh. I actually have no idea how to do this. I guess this is the sort of predicament you find yourself in when you’re self-taught. I’m not surprised I have gaps like this in my knowledge, but I am surprised I didn’t know that I didn’t know this until I tried to do it. That’s funny. <\/p>\n

Anyway, I search around and I find a code snippet that does the job for me. I have to convert it into C#, but it works:<\/p>\n

\r\npublic bool Intersects (LineSegment other, ref Vector2 intersection_position) \r\n{\r\n\t\/\/First let's try to avoid the heavy math with simple bounding checks.\r\n\tBbox2\tbox1 = new Bbox2();\r\n\tBbox2   box2 = new Bbox2();\r\n\r\n\tbox1.Contain (start);\r\n\tbox1.Contain (end);\r\n\tbox2.Contain (other.start);\r\n\tbox2.Contain (other.end);\r\n\tif (!box1.Intersect (box2))\r\n\t\treturn false;\r\n\r\n\tfloat\t\ta1 = end.y - start.y;\r\n\tfloat\t\tb1 = start.x - end.x;\r\n\tfloat\t\tc1 = a1 * start.x + b1 * start.y;\r\n\r\n\tfloat\t\ta2 = other.end.y - other.start.y;\r\n\tfloat\t\tb2 = other.start.x - other.end.x;\r\n\tfloat\t\tc2 = a2 * other.start.x + b2 * other.start.y;\r\n\r\n\tfloat det = a1*b2 - a2*b1;\r\n\tif (det == 0)\r\n\t\treturn false;\r\n\tintersection_position.x = (b2*c1 - b1*c2) \/ det;\r\n\tintersection_position.y = (a1 * c2 - a2*c1) \/ det;\r\n\t\/\/The above checks can figure out WHERE the intersection takes place, but that \r\n\t\/\/point might only be reachable by continuing one of the segments.\r\n\t\/\/Now make sure this point falls WITHIN the segments.\r\n\tfloat\tto_intersection;\r\n\tfloat\tmy_length = Length ();\r\n\tfloat\tother_length = other.Length ();\r\n\tto_intersection = (start - intersection_position).magnitude;\r\n\tif (to_intersection > my_length)\r\n\t\treturn false;\r\n\tto_intersection = (end - intersection_position).magnitude;\r\n\tif (to_intersection > my_length)\r\n\t\treturn false;\r\n\tto_intersection = (other.start - intersection_position).magnitude;\r\n\tif (to_intersection > other_length)\r\n\t\treturn false;\r\n\tto_intersection = (other.end - intersection_position).magnitude;\r\n\tif (to_intersection > other_length)\r\n\t\treturn false;\r\n\t\/\/All tests pass. The point must be good.\r\n\treturn true;\r\n}\r\n<\/pre>\n
It works, so whatever.<\/p>\n
Getting Rid of a Bad Idea<\/h3>\n
Remember in part one I put down all these little “sidewalk marker” objects? At the time, I was envisioning this system where sidewalks would be very organic. Roads would crisscross and form little traffic islands and such. Stuff like this:<\/p>\n
These aren't just traffic islands. This is an archipelago.<\/div>
These aren't just traffic islands. This is an archipelago.<\/div><\/p>\n
But now that I’m working on this, I’m not really interested in messing around with organically-grown traffic islands. They’re interesting, but they’re not the kind of feature you need. The scene won’t look incomplete without them.<\/p>\n
Also, having the program chew through thousands of these stupid sidewalk points is slow to the point of annoyance. If I’m not using them to do anything sophisticated, then there’s no reason to have a sophisticated system. <\/p>\n
Highlight code. Press delete.<\/p>\n
Now we can build blocks a much simpler way. <\/p>\n
We take all our streets, cut them up where they intersect, and put intersection objects at the split location. This intersection will mediate the connections between all the roads that feed into it. <\/p>\n
Damn it, THAT'S why I couldn't find the intersection points. They were hiding behind these big black dots!<\/div>
Damn it, THAT'S why I couldn't find the intersection points. They were hiding behind these big black dots!<\/div><\/p>\n
Once all the streets are plugged into their respective intersections, we go around and look for hanging dead-end streets. We throw these away.<\/p>\n
Great. Ship it.<\/div>
Great. Ship it.<\/div><\/p>\n
The block builder will grab one side of the street and just keep making right turns until it gets back to where it started. When it’s done, it’s formed a block.<\/p>\n
This is still a very primitive system. I’ll need to add a way to have streets of varying widths, and maybe more variation in the spacing. But I plan on adding a “region” system later where different parts of the city will have different streets \/ buildings. Until then, I think this is good enough. <\/p>\n","protected":false},"excerpt":{"rendered":"
In the last entry I hacked together a solution that let me draw my scene without using a framebuffer object. But now I’m realizing that even though I got lighting working, I still don’t have the features I need to make this work. The Loss of Framebuffer Effects One of my goals at the start […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66],"tags":[],"class_list":["post-42618","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/42618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=42618"}],"version-history":[{"count":17,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/42618\/revisions"}],"predecessor-version":[{"id":42677,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/42618\/revisions\/42677"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=42618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=42618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}