With the Will > Portal | Forum | News | Gallery | Podcast | IRC Chat | File Island | Digital Starlight | Card Terminal | DMA | Digipedia
Results 1 to 5 of 5

Thread: (Potentially) True Accounts of Theigno's Amazing Exploits

  1. #1
    Super Moderator Theigno's Avatar
    Join Date
    Jun 2013
    Location
    in a house
    Age
    24
    Posts
    1,949

    (Potentially) True Accounts of Theigno's Amazing Exploits


    Finally decided to claim my very own "What's Happening" Thread!

    I'm not yet sure how often and for what exactly I will use this but as I generally don't see the point of announcing details of my private life on the internet, I will probably stick to things related to my miscellaneous Digimon or forum themed activities that don't fit in other threads... or random thoughts and musings, generally noteworthy things or whatever else.

    Anyway, let's start off with a miracle that occurred to me this morning!
    So I was sitting in my room chewing on an uncooked spaghetti when I accidentally broke off the top of the noodle and it fell on the floor. And it just happened that in the very same moment an empty plastic bottle on the kitchen table was blown over by the wind coming from the open window. The spaghetti and the bottle hit the floor at exactly the same time causing a very unique clacking noise that kind of puzzled me for a moment.

    It is truly a magical world.

  2. #2
    I come from the net Jay Ukyou's Avatar
    Join Date
    May 2007
    Location
    Nagoya, Japan
    Posts
    2,070
    ...you can't make this stuff, guys!
    Bat-Guilmon's utility belt is mostly full of bread.

  3. #3
    Junior Commander Jaybird C's Avatar
    Join Date
    Jul 2017
    Posts
    214
    Truth is stranger than fiction.
    It's all part of the mystery or whatever.

  4. #4
    Super Moderator Theigno's Avatar
    Join Date
    Jun 2013
    Location
    in a house
    Age
    24
    Posts
    1,949

    On Physics Based Lighting, Digital Studios and Progressive Rendering.. and Gum

    Recently, mostly in order to gain some additional motivation, I've decided to rework my 3D rendering and posing workflow I'm using for my Digimon renders.
    While it won't be the most incredible difference in terms of results (most of the effects tend to be of the subtle sort), there was quite a bit too get used to. Setting up lights in particular can get a bit more demanding when working with photometric values. There is no longer a "100% light" value that will exactly light up the texture to it's natural brightness no matter how far it's away... now you got a bulb or a spotlight putting out 80000 lumen at 3 meters distance which might totally blow out all the details, or maybe not, depending on how big the model is and it is more often neccessary to relocate or tweak light sources betwen shots, just like in a real photostudio I guess.
    Freely scaling stuff around is also out of a question now since everything is now based on having the scene at a realistic scale so the light will behave realistically as well... which brings about a bit of a conundrum at least when it comes to Digimon. Canonically they come in the most varied sizes but as far as Linkz/CyberSleuth is concerned that range is squeezed down considerably. A Belphemon will no longer absolutely dwarf most humanoid Ultimates, it will just be a little bit bigger. So what to do with the lighting setup? Scale the model up to be around 10 meters tall to be accurate to it's portrayal in Savers for example or just use the size it has in relation to the other models in Cyber Sleuth? There is a case to be made for the second option since the model was designed to be displayed at that size but in the end CS uses completely different ligthing methods and resolutions than me anyway. So I'm planning to mostly go for the more "show accurate" sizes (which of course still leaves quite a bit of flexibility since the scale tends to be inconsistent anyway), mostly because lighting a giant model and having to set up all kinds of additional screens and spotlights sounds like a fun challenge.

    Of course working with cameras in itself also changes. Instead of having the kind of ethereal generic 3D camera tethered to nothing freely floating around I'm now also working with a setup that simulates a physical camera crane. This of course restricts the camera's movements immensely, and nakes setting up shots a bit of a slower process. No more simply pointing and randomly rotating about, now it's all about adjusting the pan and the tilt of the simulated crane's different parts. What am I gaining from that? Authenticity. Again, this is not something that many would consciously pick up on and it's clearly more aparrent when dealing with animated content but using more down to earth methods simply results in more "natural" angles. Most photos we see are not taken by photographers randomly rotating through the air. Even CG movies tend to use simulated "physical" cameras in order to get closer to the real thing. Our brains have picked up the patterns and, even if subconscoiusly, we've established what a proper perspective looks like. Agin, this becomes more important when animation is involved and the fact that my renders tend to have transparent backgrounds as opposed to any real scenery further diminishes the impact of such aspects but in any case it's practice and it's just very interesting to learn about those things.

    The third big change is the way the actual rendering is set up now: Instead of using the standard mode for rendering the Image now gets rendered in a special "Progressive Rendering" mode, an option that I knew the 3D editor had but it actually took me a while to figure out how useful it actually was. Progressive rendering does not work like you would usually set things up; Normally the render settings involve defining a specific amount of samples for shadow calculation, antialiasing Global illumination and so on and then you end up with an output image that will take (for example) 5 minutes to render. The big difference with the Progressive renderer is that all those sampling options are basically skipped and then the images is left to render indefinitly.
    Just with this description it's easy to understand why some might not understand advantages of the concept... I mean why would you want to render an image forever? But there are more aspects to this mode the first is that you can always see the current level of detail rendered at any point. The second is that the render can be stopped at any time. And of course the most important part is that, as the C4D manual helpfully points out, "very good results are achieved FAR before infinity".
    The renderer works by continually iterating over the image in the form of passes, each one further refining the result. Things like shadows and antialiasing start off rough but continue to get more precise. And when it's precise enough the render can be manually stopped. This is especially helpful when rendering a scene where you are not exactly sure how far to go in with the settings. Let's say we render a scene normally, we set the sample amounts andthen the scene renders for about 5 minutes... and then we notice that somewhere the shadows are still too noisy. Oops, back to the settings, increasing the samples rendering it again... this time it takes for 6 minutes and it looks significantly better. But here's the problem: we needed a sample size that renders for 6 minutes but we actually ended up rendering for 11 minutes because we needed the first 5 minute render in order to figure that out. Here's how things go with the progressive renderer: The image starts rendering like normal... after 5 minutes we take a look and see the grainy shadows and go "eh, that'll take another minute". So we just let it render come back after a minute, see that it's looking better by then and stop the render. It's the same process of observation as before but because we didn't need to render anything all over again the render time became far more efficient.
    Of course there are pitfalls to this method as well especially for inexperienced users. The renderer doesn't render anything faster in general and the concept of having infite time could easily lead to innefficient habits like not noticing inefficient shaders. But it's stll useful... and hey if you know you're not going to use your computer for anything else why not just let it sit and render for hours and see how pristine the output is in the end?

    But in the end I'm in a position where I don't want to have things to realistic. Sligthly colored lighting with GI can give amazing results but I don't want to falsify the colors of the textures. The same with realistic specular or reflection effects on emtals... those are not only a pain to set up but the material was never supposed to have them. So in many cases specular and other shading effects are already drawn on the texture itself and generation secondary ones on top of that has the tendency to look crappy (for truly realistic renders all materials would of course have to be re-done from scratch with the proper layers to generate the reflections dynamically based on the actual environment). In fact future renders might even go for a bit of a flatter approach to shading since the standard material diffusion in C4D sometimes doesn't end up looking a bit awkward and I've recently figured out ways to reduce it.

    Well, I guess that's enough random technical stuff that'll mean nothing to most people. Maybe I'll post something more relatable next time.



    Oh and by the way... near my house there's a gumball vending machine, pretty sure it has been there since I was born. It has sold various different kinds of gum over the years that so far have all tasted absolutely terrible (typical for cheap 20 cent gums I guess). Despite this, every few months if there's new kind of gum in the machine I buy some and test if it still tastes as bad as I expect. Today was one of those (randomly) chosen days again. There were no surprises.

  5. #5
    Super Moderator Theigno's Avatar
    Join Date
    Jun 2013
    Location
    in a house
    Age
    24
    Posts
    1,949

    The Magic of BBcode [TABLE] Part 1: Creating Dynamic Thumbnails!

    Let's try a bit of a different type of post today, something more "educational"...

    If you post a lot of images on this forum you are probably aware of the proper usage of the [THUMB] and the [THSIZE] tags. After all, while the forum automatically limits the maximum width of an image to the width of the post container, having giant pictures take up all the space on the page is very undesirable. These tags however are limited in what they allow you to do and in this post I will introduce a table based alternative method for resizing images that offers multiple advantages over the standard thumbnail tags. These include:

    • Thumbnail size dependent on screen size
    • respect for the image's original size
    • even spacing between multiple images
    • static and dynamic padding

    If you ask yourself why no one has done this before the answer is that what I'm showing here relies on advanced properties of the table tag that are not documented anywhere in the site's help section so most people are probably unaware of how powerful and versatile the tag actually is. At any point such a property is used it will be explained in a side note prefaced with "Table Fact You Probably Didn't Know About". Admittedly this method also involves writing more code than the normal tags... far more when it comes to the more advanced applications. But technology exists to be used! If a certain functionality exists somewhere in the software, no matter how obscure, it shall be exploited for its maximum potential! Forum software is no exception, so let's dive into the world of tables (this will be the first of a multi-part series, tables can do some really interesting things)...


    The Basics

    One thing to get out of the way before we start is a bit of clarification: The thumbnail tags actually generate half thumbnails. They only scale down the source image and don't actually substitute with a smaller version version that would take less resources to load. So if a 2mb JPEG gets scaled down to 150x150px with the tags... it still takes the exact same amount of data to load as it does without the tags. The table implementation also doesn't do that but I wanted to emphasize that we are not losing any functionality compared to the original tag ;)

    We'll start with a simple conversion without any of the special features; I have rendered a Greymon and the image is rather big... so I want to scale it down to a thumbnail about 250px win width:

    .
    Image Thumbnail (custom)
    [THSIZE=250]https://i.imgur.com/5zoKbgM.png[/THSIZE]
    [TABLE="width:260"][TR][TD]
    [URL="https://i.imgur.com/5zoKbgM.png"]
    [IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
    [/URL][/TD][/TR][/TABLE]
    On the left we see a standard thumbnail tag approach and on the right the table that produces the same result. The table code is already longer but still quite simple. The thumbnail tag creates an image with a width style and wraps it into a link to the full size image. For the table approach we simply create a new table with one row and one cell and set the "width" property of the table to our thumbnail size (table size overrides image size). We then insert the img tag with the picture inside the cell and wrap it into a link pointing to the itself just like the thumbnail tag does it.
    You will have noticed that we needed to make the table about ten pixels wider than the thumbnail tag to get the image to approximately the same size. This is because table cells always have a bit of padding around them which we have to offset. This isn't a big problem since of course it's rarely necessary to work super pixel perfectly when it comes to image thumbnails.
    And in case you were wondering about the unusual size of the quotes...

    Table Fact You Probably Didn't Know About #1
    If an element that would normally take up the width of the entire post container, such as a Quote, Code or PHP block, is placed within a table with no defined width it will shrink to match its text content. If it is placed within a table that has a defined width, the same width will be applied to the contained block element as well.
    ...This is not exactly critical to what we are doing (in fact it's mostly irrelevant) but it makes for a more varied layout.
    Anyway, now that we know how to accurately emulate the thsize tag with tables let's start making the table do some things that the normal tags couldn't do!



    Making image size screen dependent

    This is the big important thing that tables enable us to do. Static thumbnails always have their victims so to speak, especially since we live in a time where there's a potentially very big range of possible resolutions that users might browse the forum with. I have a standard Full HD 1920x1080 monitor for example. To me an image with the resolution 600x600 is not exactly big, it's a completely acceptable medium sized square that I can even fit twice in a row in a single post if I want. But for someone browsing the forum on an old 1024x768 monitor (maybe a bit of an extreme example) the image will take up their entire screen width and probably look rather clunky. It's the same for mobile resolutions, especially when browsing in portrait mode. With normal thumbnail tags the user friendly thing to do is to scale things down t the lowest common denominator, have thumbnails really small, so that no resolution has problems. But in that case what about those of us that have high resolution monitors? We have all that screen space available and the images are not using it even though they could be twice as big without being obnoxious! Isn't that unfair? I would suggest that it is... and also that we can use tables to make this problem go away!

    This all depends on a single discovery I made about the [TABLE] tag a few months ago:

    Table Fact You Probably Didn't Know About #2
    The width of a BBcode table can be defined in pixels as well as in percents, making fluid layouts possible.
    This is pretty much a game changer, since instead of relying on making up a width in pixels and hoping that it's small or big enough for certain devices we can now simply say that we want our thumbnails to have for example one fifth of the width of our post, and this size will stay constant regardless of resolution. Let's demonstrate this by turning our Greymon into a tiny thumbnail:
    [TABLE="width:20%"]
    [TR][TD]
    [URL="https://i.imgur.com/5zoKbgM.png"]
    [IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
    [/URL]
    [/TD][/TR]
    [/TABLE]
    ...And that's all there is to basic relative thumbnails. This Greymon is scaled to 20% of the post's width, which on my full HD display is about 300px wide. On my secondary monitor (1280x1024) the image further scales down to about 200px and so on.
    But while the existence of this feature is certainly the main message I want to send with this post, there are many more exciting possibilities that I will demonstrate in the remainder of the post. So let's continue on to...


    Dynamic Padding

    I have actually used this table scaling method in my Linkz model thread for a while now. I usually like my images centered on the screen and relatively big (as stated before one of the main strengths of dynamic table thumbnails is that it makes including big images in posts more viable since on smaller devices the images also get smaller). At this point I noticed some aesthetic issues with some of the image layouts... and it turned out tables could fix those as well!
    Again, let's demonstrate this with Greymon:
    [TABLE="align:center, width:45%"]
    [TR][TD]
    [URL="https://i.imgur.com/5zoKbgM.png"]
    [IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
    [/URL]
    [/TD][/TR]
    [/TABLE]
    This is basically how I would present this model in my thread, 45% width and centered. However it is only mathematically centered; Visually the centering looks off since because of Greymon's tail there is a lot of empty space in the right part of the image. The naturally eye gets drawn toward the more "populated" right side of the image making it seem like it is not actually centered. In order to visually center the image we need to nudge it to the right and most importantly we need to do so dynamically. There are "dirty" was to do it, like just including a bunch of white-space or transparent text before the image but that is not only inelegant but also static... since the image scales dynamically the padding needs to be dynamic as well or else the values won't match up. The solution lies in another undocumented table trick:
    Table Fact You Probably Didn't Know About #3
    The "width" and "align" properties are not exclusive to the main table body but can also be manually defined for individual table cells (but not for rows).
    In other words, if we want 25% padding on the right side we can accomplish that by creating another table cell before the one containing our image and defining its width as 25%. The other table cell will automatically take up the rest of the space in the table:
    [TABLE="align:center, width:60%"]
    [TR]
    [TD="width:25%"][/TD]
    [TD]
    [URL="https://i.imgur.com/5zoKbgM.png"]
    [IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
    [/URL]
    [/TD][/TR]
    [/TABLE]
    There we are again, and this time Greymon looks much better because the center of his body is now at the center of the post. Note however that in order to keep the size of the image the same as before we had to increase the overall width of the table from 45% to 60% since of course the padding cell takes up space inside the table which we need to offset.
    Right now the second table cell is empty and thus invisible but in case you want a bit more precise visual feedback about how much padding is going on exactly there is another handy little table feature for that:

    Table Fact You Probably Didn't Know About #4
    You can define a background color for individual table cells via the "bgcolor" property.
    Example: [TD="bgcolor:red"]*content*[/TD]
    Like the text color tag the property accepts both color names and hex codes.
    [TABLE="align:center, width:60%"]
    [TR]
    [TD="width:25%, bgcolor:green"][/TD]
    [TD]
    [URL="https://i.imgur.com/5zoKbgM.png"]
    [IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
    [/URL]
    [/TD][/TR]
    [/TABLE]
    Image size as upper boundary

    Another way in which our table thumbnails act differently than the normal thumb and thsize tags is that the size limit is applied as an upper limit instead of an absolute size. Instead of simply being scaling images down, if you were to drop an image into a thsize tag that is smaller than the size specified in the tag the image will end up being upscaled to that size. In isolated cases this might be useful in very unlikely situations but is very likely to result in a blurry mess instead. Tables thumbnails on the other hand will never scale an image above its original size, effectively turning the thumbnail into an conditional operation:

    [TABLE="width:50%, align:center"][TR]
    [TD="align:center"]
    [URL="https://i.imgur.com/kC8O4sr.png"][IMG]https://i.imgur.com/kC8O4sr.png[/IMG][/URL]
    [/TD]
    [/TR][/TABLE]
    Here we have for example a table thumbnail scaling this image to 50% of the post. However the image is rather small, only 512px wide, which only exceeds 50% of the post width on very small resolutions. Only at those resolutions does any scaling actally take place; everywhere else the image will appear in its original size.

    One important thing to note about this kind of conditional scaling is that if you use it in conjunction with a centered or right aligned table you need to define the "align:center/right" property on both the main table body and the table cell containing the image as shown above. Otherwise the table cell will retain its default left alignment and when a centered table keeps growing while the image no longer scales, the image sticking to the left side of the table will cause it to become off-center.
    It is of course also possible to center the image inside the cell with the normal [CENTER] tags but since the "align" property is directly applied to the td element and does not in result in the creation of new elements like the [CENTER] tag, it is the more efficient option here.


    Consistent thumbnail galleries with even spacing

    The thing about Thumbnails is that they tend to come in batches. And with the normal forum layout it can be a challenge create a consistent layout for a "gallery" of thumbnail images. Let's say we have 10 images that we want to turn into thumbnails and have them in two centered rows of 5 images each. This is difficult to do normally because of course if the width of our images is fixed the rows will break on smaller resolutions. We can't simply put 5 images next to each other two times and separate them with a line break because we might end up with end up with 4 lines of four and one which would be unacceptable, while simply putting all images in a row also won't guarantee clean rows... so of course we put the images in a table:

    [TABLE="align:center, width:90%"]
    [TR]
    [TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
    [/TR]
    [TR]
    [TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
    [/TR]
    [/TABLE]
    We're scaling the width to 90% to have a bit of a margin on the sides and the table handles the rest. We'll have same rows in every resolution. But things get even more interesting if we put a bunch of smaller images into a dynamic table with cells bigger than the images:

    [CENTER]
    [TABLE="align:center, width:70%"]
    [TR]
    [TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
    [/TR]
    [/TABLE]
    [/CENTER]
    As mentioned before the table will never scale an image above 100%. But it will still evenly distribute the table cells so it will switch over from scaling the images down to inserting spacing between the individual images (It's fun to play around with that by resizing the browser window...).
    Again, if the main table is centered it's important that all the images are centered as well, which is why the entire table is wrapped in a [CENTER] tag. Without it the images would stick to the right side of their table cells.


    Deactivating auto-spacing via nested tables

    ...But wait! What if we don't like evenly spaced thumbnails? Maybe with some images having all that space between them on higher resolutions simply won't look good... so how do we get the dynamic scaling and consistent rows while getting rid of the automatic spacing? It's easy: By putting our image table inside another table. When a table is created without a set width it will try to fit its content, scaling it down if there is not enough space. If we create a nested table inside another table the nested table will not inherit the width property of the main table and remain in it's default auto size. It will however shrink if the main table becomes to small.

    [TABLE="width:71%,align:center"]
    [TR][TD]
    [TABLE="align:center"]
    [TR]
    [TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
    [TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
    [/TR]
    [/TABLE]
    [/TD][/TR]
    [/TABLE]
    This our finished second version. Again, the table inside the table has a bit of padding as well so in order to offset that the table has to be 71% wide. When the images are scaled down it acts exactly like the previous table would. But after the images reach their full size the table won't insert any spacing between them. If we are centering the table like in the example, the centering needs to be done using the "align: center" property in both tables since the normal [CENTER] tag does not work for the table body itself.


    ...And that's it for today! I hope that some of these techniques will help someone layout their posts in a prettier way although I'm not actually expecting anyone to care as much about this as I do. There's still lots of other crazy things you can do with tables (most of them are not particularly useful though) which I plan to document in this thread at some point in the future.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •