In this tutorial series, I’m sharing my experiences with creating the VUE-MASTER Demo Reel …
Both, the template project as well as these HTML tutorials are included in VBDE (since version 1.2.2).
VUE-MASTER Graphics Tutorial – Part 1:
How to prepare 3D images for the VIRTUAL BOY
This part describes how to prepare existing 3D source images for a VIRTUAL BOY ROM. If you want to know more about creating 3D images, please search the internet for further information.
💡 For example:
You could use a 3D camera or 3D software like Blender to create 3D images. Or just shift 2D layers to the left and right to create parallax. And before Morintari has to remind us again: there’s a pixel art tool out there, that even let’s you draw right in 3D … that’s right – I’m promoting ProMotion here! :thumpup: 😀
What you will need:
• editable 3D source images (as separate left and right files or side-by-side)
• a graphics tool, that lets you edit the color table / palette (and apply dithering preferably), like Photoshop or GIMP
• optional: download color table files attached to this tutorial
💡 This hard- and software was used to create the 3D images for the VUE-MASTER Demo Reel:
• The 3D photos were shot with a Fuji W3
• CGI was rendered with Cinema 4D
• Preparing images for the VIRTUAL BOY was done with Photoshop (CS6)
Specifications for VUE-MASTER images
These are the technical specifications, that our images are supposed to meet:
• 3D layout: 2 separate images (left and right 3D view) (duplicate 1 view for 2D images)
• Image Size: 384 x 224 pixels (for each 3D view)
• Color Mode: Indexed (4 colors: black and three shades of red)
• both views together must consist of a maximum of 2033 different tiles (8×8 pixels each)
💡 Note:
Last one can be a tricky part for very detailed images. If your image turn’s out to have more different tiles than 2033, please refer to post #2 of this thread. Do not count tiles yourself, VBDE’s GRIT will tell you 😉
:vb: Step 1 – 3D layout / Setup Workspace
The final 3D image needs to be exported as 2 separate PNG files for left and right view, but I recommend to import all source files into a single composition file first, for 3D synchronized editing. You could arrange L&R views as layers one above the other or just place them side by side.
💡 Each layout has different advantages …
one above the other:
• quickly copy 2D elements from one view to the other
• quickly compare left and right views by un/hiding upper composition
• compose both views for anaglyph glasses or other 3D previewing methods
side by side:
• always see both views
• if you can do cross-eyed or parallel 3D free viewing, arrange views accordingly
• Photoshop: you can use the Slice Tool* to define left & right views
*Photoshop’s Slice Tool: you can slice L&R views to quickly export them via “Save for Web”
:vb: Step 2 – Image Size
Scale down your composition to 384 x 224 pixels (or 768 x 224 for side-by-side layout). In Photoshop, you can also do this when exporting PNGs via “Save for Web”.
💡 Note:
Photoshop recommends „Bicubic“ resampling for downscaling, but I prefer “Bilinear”, as Bicubic creates very hard results and glows along high-contrast edges (similar effect with GIMP’s “Sinc/Lanczos3” interpolation). Compare different resample / interpolation types to find the best results for your image.
:vb: Step 3 – Indexed Color & Dithering
The easiest way to do this is to download and import a predefined color table / palette file attached to this tutorial:
• “VUE Emulator” ( #000000, #870000, #b90000, #ff0000 )
• “VUE Blueberry Wine” ( #000000, #73001b, #a50027, #ff003c )
• “VUE Linear” ( #000000, #550000, #aa0000, #ff0000 )
The color table will have no effect on the final color values of the ROM (which will be replaced with standard colors by the VUEngine). It’s primarily for your preview*, so choose a table that looks close to VIRTUAL BOY’s color output on your computer display. I recommend “VUE Emulator” or “VUE Blueberry Wine”.
💡 * Note #1:
The color table DOES have a slightly effect on color distribution and dithering while reducing colors. You can try different tables if you’re having problems to get the dithering results you’re looking for.
💡 Note #2:
If you’re defining a color table yourself, make sure indexes are in correct order:
• #0 must be black
• #1 must be dark red
• #2 must be medium red
• #3 must be bright red
Photoshop: one way to reduce colors and import a color table file is Image > Mode > Indexed Color > Palette: Custom > Load…
Photoshop’s “Save for Web” dialog also offers a convenient way, to scale down, reduce colors, preview dithering results and export PNG files in one step. Make sure to “Sort by Luminance” when editing or importing a color table.
GIMP: Import color table files in the palettes window before you convert your image to indexed color mode.
GIMP: Make sure to uncheck “Remove unused colors from colormap” when converting colors, as this option might mess up the color indexes.
If you’re not satisfied with the resulting color distribution in your image, undo / cancel indexing colors and try to make some color adjustments to your image before.
💡 Using Dithering
If your image already is a low res pixel art with only a few colors, you wouldn’t want to use Dithering.
Also when your image only has 2 colors (like shadow art) you will get the best anti aliasing results when you turn Dithering off.
Shadow Art: turn off Dithering for better Anti Aliasing
If your source image has a hight color depth, Dithering will keep much more details of your image when indexing colors, but therefore will produce more 8×8 tiles. If your image turn’s out to have more different tiles than 2033, please refer to post #2 of this thread.
Source image (256 colors)
Image with 4 indexed colors (no dithering)
Dithered image with 4 indexed colors
In Photoshop you will mostly get the best results with “Diffusion Dithering”. “Pattern Dithering” also can create very nice looking results (and will create less tiles too), but small patterns tend to cause unintended 3D effects in stereo images (for further information on this effect please refer to post #2 of this thread).
Try different dithering algorithms and compare the results in 3D, before you REELease your reel. 😎
Original gradient (256 colors)
Indexed gradient (4 colors, no dithering applied)
Indexed gradient with “Diffusion Dithering”
Indexed gradient with “Pattern Dithering”
Indexed gradient with “Noise Dithering”
💡 Note:
I do not use GIMP regularly and unfortunately wasn’t able to create dithered gradients with it, that make some sense – hopefully you’re more lucky than me 😛
:vb: Step 4 – Exporting images
Export separate PNG files for left and right view. Name them like this (as VBDE will search for these files):
• VueMasterImage1Left.png, VueMasterImage1Right.png
• VueMasterImage2Left.png, VueMasterImage2Right.png
• and so on …
You’re ready for the VBDE Tutorial now …
-
This topic was modified 6 years, 2 months ago by .
-
This topic was modified 6 years, 2 months ago by .
-
This topic was modified 6 years, 2 months ago by .
Attachments:
VUE-MASTER Graphics Tutorial – Part 2:
How to optimize your images and reduce tiles count
This part will give some advanced tips to tackle tiles count and create more optimized and beautiful results.
GRIT is part of VBDE and will automatically cut each view into a pattern of 48 x 28 tiles (8×8 pixels each tile) – that’s a total of 2688 for 3d images. Unfortunately, VUE-MASTER can only load a maximum of 2033 tiles (almost 76%) at a time (due to limitations of the VIRTUAL BOY):
• Tiles pattern for each view: 48 x 28 = 1344 tiles
• Two views needed for 3d images: 2688 tiles in total
• Maximum loadable tiles: 2033
GRIT also tries to solve this problem for you: it automatically identifies identical tiles in your image, so they only must be loaded once! It also finds mirrored instances! I love this tool.
But some images are just having so much individual details, that even GRIT doesn’t find enough twins. In these cases, there are different options to optimize your image …
💡 Easy way to reduce tiles count: reducing image details
To reduce the details of your image, you can:
• crop the image, making it letterboxed (can save many tiles)
• for Photoshop’s Diffusion Dithering, you can use a slider to “Specify the amount of dither” (count of saved tiles depends on your image)
💡 More sophisticated way: use repeating tiles
Tips to find or create more repeating tiles:
• Make your graphics tool show you a grid of 8×8 pixels
• Shifting 2D elements (like text or back plates) by 8px steps between 3d views (this can significantly reduce the count of tiles for larger layers!)
• And keep in mind: you can also use mirrored tiles
• Use Pattern Dithering (carefully) instead of Diffusion …
💡 Use Pattern Dithering carefully in 3D images
Using “Pattern Dithering” instead of Diffusion (GIMP: “Positioned” instead of “Floyd-Steinberg”) will create less tiles, but small patterns tend to be problematic in 3D stereo images, as they can produce random depth allocations:
Looking at Image #3 from the Demo Reel in 3D, you can experience the effects that small patterns are creating in 3D stereo: the pattern dithered background at the right edge of the image can be perceived at different depth levels (depending on your imagination) – it can appear in front of the table for example.
💡 Combine different techniques to find the optimal solution for your image
You can separate your image into fore- and background to use pattern dithering on less important areas of your image only. If you’re using 2D layers, you should even be able to pattern dither them without creating 3d problems: use the same pre-dithered layer in both views. Shift it in 8 pixel steps, to save even more tiles!
The 2D background layer of image #7 also uses pattern dithering, but the dither was rendered only once and used for both views. In contrast to image #3, your brain indicates only one perfect matching depth level for the background. The background was also shifted by 8 pixels (4 pixels in each view), to save many tiles: you can find many tiles in the left view, that are reappearing in the right view, shifted by 8px (= 1 tile).
I also share my graphic source files for the Reel – feel free to use them, if you want to pimp up your REELease post, for example …
2D files:
• Alpha
• Texture of the Demo Reel
• PSD composition file with editable text layers (CS6)
3D formats:
• C4D
• FBX
• OBJ
The UV layout of the 3D Reel also matches the 2D files …
Attachments:
STEREO BOY schrieb:
Using “Pattern Dithering” instead of Diffusion (GIMP: “Positioned” instead of “Floyd-Steinberg”) will create less tiles, but small patterns tend to be problematic in 3D stereo images, …
Image No. 6 in the MARIO KART 7 Reel No. 2 is a good example of how pattern dithering can rescue your image:
• with Diffusion Dithering GRIT counted 2600 tiles
• with Pattern Dithering GRIT counted only 1983 tiles
The background wasn’t even separated and pre-dithered in this image. I guess, our brains just know that the sky is located very far away, so pattern dithering doesn’t seem to create many 3d problems in this case …
mips5000 wrote:
Would the 3D sprite you mentioned basically consist of several layers of PNG images over top of each other?
I’m mainly guessing, but I think you’d need to be a skilled enough artist to draw two versions of the same sprite, each from a slightly different perspective to represent what something would look like if you only had your left (or right) eye open.
Here’s two slightly different views of a 2d drawing, like a detailed sprite. See if you can spot some of the differences between them.
Cross your eyes so they overlap and your brain will process it as if it were a 3D model.
Source for this graphic: https://hierojux.deviantart.com/art/Cross-view-Huntress-Bishoujo-354911772
Attachments:
mips5000 schrieb:
Would the 3D sprite you mentioned basically consist of several layers of PNG images over top of each other?
Technically, a 3D sprite also consists of two 2D sprites. You can find 3D sprites in the VUE-MASTER template folder under:
assets > images > “Logo”, “LogoAa” and “ViewtualBoy”
(the “Logo” left and right sprites also are attached to this post)
But your suggestion is a possible way to create those two sprites: placing several layers on top of each other in your Photoshop or GIMP composition and shifting them left and right.
Actually, I created the low pixel version of the VUE-MASTER logo this way – see the “MakingOf_Logo” attached … 😉
Attachments:
Eiksirf schrieb:
Here’s two slightly different views of a 2d drawing, like a detailed sprite. See if you can spot some of the differences between them.
Thank you, but this actually is a pretty good example of very bad 3D stereo … 😉
There must only be horizontal parallax (view differences) in proper 3D images. In this image, there’s huge vertical parallaxe also (see attachement) – please avoid this in your images, as this will cause eye strain to your audience.
Attachments:
From what I understand, if the right and left image spacing is off, it causes VB sickness to the viewer…
I hit a small road-block – After creating my own reel with stereoboy’s instructions, I added the first 2D image. Looks good to me.
The next image is of my wife at a museum, but the bottom half is scrambled – and what’s weirder (to me) is that it is filled in partially with another image from the program…
I had a similar result when trying to replace some images (a bush, background, etc.) on the platformer demo – only a small part of the top of my image showed up, the rest was scrambled.
The PNG being used is a similar size.
I’m guessing this is due to the numbers mentioned that I pay attention to in the guide.. I’ll keep looking into it.
