1. Welcome to VRCat! Please note that this message board is not related to VRChat in any official manner. It is run entirely by the community, and moderated by the community. Any content present has not been reviewed by VRChat moderators or staff. Your use of these forums implies understanding of this message. Thanks!
    Dismiss Notice

Avatars Error's HUD Shader

Discussion in 'Tutorials and Tools' started by error.mdl, Aug 5, 2018.

  1. error.mdl

    error.mdl New Member

    Joined:
    Nov 30, 2017
    Messages:
    9
    Likes Received:
    19
    VRChat:
    error.mdl
    Code:
    %--------------------------------------------------------------------------
    %
    %    Error's Heads Up Display (EHUD) Shader Version 1.01
    %    2018-08-05
    %
    %--------------------------------------------------------------------------
    
    CHANGELOG:
        1.01: 2018-08-07    Added two new example huds designed to better fit
                           desktop displays, updated readme
    
       1.00: 2018-08-05    Initial version
    
    1. INTRODUCTION
    
    This shader is intended for use on custom avatars in VRChat. It displays on
    the user's screen their position, rotation, and framerate as well as several
    other useful stats. This is a screen-space shader, meaning that it will
    draw in a fixed position on your screen regardless of where you look. While
    this is a non-issue for desktop users, VR users may find this slightly
    annoying and perhaps even nausiating at first. However, this feeling should
    wear off quickly as you use the hud.
    
    Provided with this shader are a few pre-made HUD meshes and textures. In
    order to use your own assets with this shader, you will need to specially
    prepare your mesh, and your textures must conform to a specific layout. See
    section 3 for instructions.
    
    The hud has seven components. The first is a simple textured mesh, used to
    make the non-functional background of the hud. The second component is
    another simple textured mesh, but it uses a different texture. This can be
    used with a render-texture and camera to provide a top-down minimap, or more
    importantly for most users a vanity camera that looks at their face. The
    third component is three numerical displays that show the users x, y, and z
    position in world-space coordinates. These can show values up to the
    millions. The fourth component is the Axis Gizmo, which similar to most 3d
    editing programs shows the orientation of the three principle axes with
    respect to the camera. The fifth component is the compass. Somewhat
    redundant with the axis gizmo, this shows the camera's rotation in the
    X-Z plane. It also provides a "quest marker" that points toward the origin
    of the world. The sixth component is an fps counter. The seventh is a flip-
    book texture. This component takes a texure sheet with several images layed
    out in a grid, and displays only one of the images depending on the frame
    number given in the shader. This was intended as a weapon-selection
    indicator for myself. Given the fact that most users won't have an arsenal
    of guns on their avatar, I re-purposed the flip book to show facial
    expressions as a sort of more-performant version of the face cam. Note
    texture I provided for this purpose is probably worthless as I have no clue
    what facial expressions most people use and no skill as a graphical
    designer. You'll probably want to make your own.
    
    2. INSTALLING THE PROVIDED HUD TO YOUR AVATAR
    
    Within the EHUD folder, you will find two meshes: example_hud_normal and
    example_hud_screen. The normal lacks any portion of the hud for the
    secondary texture, while the screen has a rounded square designed for use
    as a face cam. Select the one you want and drag it into the root of the
    scene. It should be using a default shader right now so it is easy to
    position. Reset the scale to 1 if it isn't already, and then drag the mesh
    on to your avatar's head bone. Reset the position to 0,0,0. Do not put leave
    it on the head bone, your head gets scaled down to 0.0001 in game locally.
    This will make the bounding box for the hud entirely behind your eyes and
    you will be unable to see it in game. Instead, drag it on to the neck bone.
    Rotate the hud so it is infront of your face. Now change its material to
    gp_hud or gp_hud_screen, depending on the mesh you used. You should see the
    hud pop up in your face when you get very close to your head.
    
    If you want to use the face cam, there's some annoying setup you need to do.
    First, you'll need to save the scene you're currently in and create a new
    scene (ctrl-n or File -> New Scene). Drop a VRC World Descriptor into the
    scene. A prefab of it can be found in VRCSDK/Prefabs/World/VRCWorld. Now go
    to the build control panel and there should be a button to set up layers
    near the top. Click it, and once its done re-open your original scene.
    Create a camera, put it in the root of your avatar's hierarchy (Just under
    the component with the avatar descriptor). Now go to the project window and
    in the folder with your textures right click and hit Create->Render Texure.
    Set its resolution to 512x512 (trust me, thats more than enough especially
    if you're in VR). Go back to the camera, and drag that render-texture into
    the target texture slot. In the material for the hud, set the secondary
    texture to the render-texture. You should see the view of the camera on the
    hud now. Position the camera how you want it. Now, in the inspector for the
    camera find "Culling Mask". Set this first to nothing, then to mirror
    reflection. You won't be able to see anything from the camera in the editor,
    but in-game the camera will now only see yourself. Also change the clear
    flag to solid color and change the alpha value (A) to 0.
    
    If you want to use the flip-book to display your expressions, just add a
    keyframe setting the frame number in the respective gesture.
    
    3. MAKING YOUR OWN MESH
    
    Provided with the hud meshes is a calibration hud mesh. This shows the
    position of the mic icon on the screen (using the default stereo
    convergence) and is useful for gauging your fov. Each blue circle represents
    30 degrees of fov.
    
    In order make different parts of the mesh do different things using the same
    material, the shader looks for vertex colors to determine the proper output.
    The colors the shader looks for are as follows: normal texture (any color
    other than the ones listed), world coordinates (pure red, green, or blue),
    Axis Gizmo (0,0,0.5), compass (0,0.5,0), fps (0,0,0), clock (0.5,0,0),
    Secondary Texture (0.5, 0.5, 0), Flip-Book Texture (0.5, 0, 0.5).
    
    For some components, the uv map needs to follow specific rules. Normal
    numeric displays should be created from planes that have the entire texture
    mapped on to them. They should be scaled to an aspect ratio of 10.5:1, as
    there are 10 digits and one half-width point. If you want to display less
    digits, just slice the plane into 21 pieces and delete the portions you
    want. The clock should be made in the same way, but scaled to 7:1. The
    compass's horizontal UV component must cover the entire texture.
    
    The axis gizmo must be located at the center of the object, as it rotates
    around the objects center. Position it in the shader itself.
    
    Refer to the example textures for the layout of the number and compass
    textures.
    
    When exporting an fbx from blender, make sure that the unit conversion of
    blender units to fbx centimeters is unchecked (button with arrows and
    cylinder next to the scale input bar). Otherwise your hud will be 1/100th
    scale in unity. Alternatively, you can set the scale factor in the import
    settings in unity to 1 and turn off use file scale.
    
    Note that the current example mesh only works in VR. In Desktop, if your aspect-ratio isn't close to 1:1 the bottom of the hud will get cut off. I may design a desktop-specific example in the future.

    Also I can't upload an image, because apparently that's spam.



    UPDATE: Added two new hud meshes that are compatible with desktop. Also added a bottom frame to the screen on the huds with those and fixed the default range on the example material.

    WARNING: If you're using a headset with an OLED screen (Occulus, Vive) you need to keep the alpha of all the tint values rather low (like around 50 or so). OLED screens suffer from burn-in, and having a static image always displaying on your screen will cause that eventually. Keeping the alpha low will dramatically reduce the chances of burn in. I've been using a version of this hud for about five months on one of my most commonly used avatars. The alpha for the hud is close to opaque. I only just noticed some very subtle burn in happening on my vive. Its only just barely visible in dark areas with uniform color, but I thought I'd give a warning.

    UPDATE 10/10/2018
    Added new features to prevent burn in. Added optional holographic scan lines and alpha noise, as well as a jitter feature that allows the hud to slowly drift around the screen within set bounds. These should dramatically reduce the chances of significant burn-in.
     
    #1 error.mdl, Aug 5, 2018
    Last edited: Oct 10, 2018
  2. error.mdl

    error.mdl New Member

    Joined:
    Nov 30, 2017
    Messages:
    9
    Likes Received:
    19
    VRChat:
    error.mdl
  3. error.mdl

    error.mdl New Member

    Joined:
    Nov 30, 2017
    Messages:
    9
    Likes Received:
    19
    VRChat:
    error.mdl
    Still can't upload any images. Thought it was because of the host I chose, but it doesn't seem to matter. Tupper plz fix.
     
  4. Highom

    Highom New Member

    Joined:
    Dec 20, 2017
    Messages:
    3
    Likes Received:
    0
    VRChat:
    Highom
    This is so cool! thank you so much for this <3
     
  5. ShimSooChang

    ShimSooChang New Member

    Joined:
    Apr 30, 2018
    Messages:
    4
    Likes Received:
    2
    VRChat:
    ShimSooChang
    when i put this my loading is so long
     
  6. Firestorm185

    Firestorm185 Member

    Joined:
    Mar 20, 2018
    Messages:
    19
    Likes Received:
    1
    VRChat:
    Firestorm185
    I did everything you said for attaching it to my own avatar... but for some reason I can only see the HUD when I look straight down at the floor. Any possible ideas?
     
    #6 Firestorm185, Sep 25, 2018
    Last edited: Sep 26, 2018
  7. error.mdl

    error.mdl New Member

    Joined:
    Nov 30, 2017
    Messages:
    9
    Likes Received:
    19
    VRChat:
    error.mdl
    Update: added a couple new burn-in prevention features.

    For people trying to make their own hud meshes, make sure that the hud is pointing in the right direction! In order to work, the hud mesh must point along the +Z axis in unity when all the rotations are set to 0. Additionally, the origin of the mesh is where your head will be located. Make sure you set the origin of the mesh to the world origin in blender, and not the meshes center. If your hud isn't showing up, try throwing a huge box surrounding your head on the hud mesh. If you can see the box, the hud is facing the wrong direction or your meshes origin is off. Another common error is FBX export in blender is set by default to scale blender units to 0.01 unity units. This often results in the hud being closer than the near clipping plane to the camera, thus rendering it invisible. The proper scale is 1 blender unit to 1 unity unit. You can uncheck "use file scale" in the unity import settings and manually set it to 1 to fix this.
     
  8. error.mdl

    error.mdl New Member

    Joined:
    Nov 30, 2017
    Messages:
    9
    Likes Received:
    19
    VRChat:
    error.mdl
    Firestorm, if you can only see the hud when looking straight down that means the bounding box of the hud can only be seen when looking at the floor. Swap the hud back to standard shader to see where it is on your avatar. Make sure its rotated so that the hud is in front of your face. Also you can scale up the hud so the bounding box is larger. It won't effect the hud shader at all since it only looks at the original mesh's proportions.
     
  9. ni1chigo2115

    ni1chigo2115 New Member

    Joined:
    Jun 14, 2018
    Messages:
    1
    Likes Received:
    0
    VRChat:
    ni1chigo2115
    Using this, if you add effects like night vision, it looks fun.