Drawable Studio

Drawable Studio opens a CodeWalker XML export of a model with its textures and shows it in 3D in your browser. You can check geometry, LODs and textures, change shader parameters and texture slots, add or move light effects, paint straight onto the model, and export the edited XML, the textures as DDS or PNG, or a GLB. It is for prop, vehicle and map makers who want to inspect or tweak a model without opening a 3D package.

What it is for

• Checking a model before you ship it. Missing textures, empty LODs, wrong shader, a texture at 4096 that should be 1024: the Scene tab shows all of it at a glance.
• Small material fixes. Too shiny, normal map too strong, glow too weak: change specularIntensityMult, bumpiness or emissiveMultiplier and see it live.
• Lamps on props. Add a light to a streetlight or a sign, move it with a gizmo, set the hours it is on.
• Quick texture touch ups. Paint over a logo, fix a seam, recolour a part, then export the texture under its original name.

Everything is read in your browser. Nothing is uploaded.

Export the model from CodeWalker

The tool reads CodeWalker’s XML format, not the binary files.

1. Open CodeWalker’s RPF Explorer (or the project window for your own files) and find the .ydr, .ydd or .yft.
2. Right click it and pick Export XML. CodeWalker writes name.yft.xml and a folder name/ with the textures as DDS.
3. Vehicles and most props keep their textures in a separate .ytd. Export that one too; it gives you a .ytd.xml and the same kind of DDS folder.
4. Drop everything on the viewer together, or use Choose folder. Textures are matched to shaders by name, so the folder layout does not matter.

Quick start

1. Open the tool.
2. Click Choose folder and pick the export folder, or drop it on the viewer. Choose files takes .xml, .dds, .png, .jpg and .jpeg files.
3. Wait for the progress bar (reading, parsing, decoding textures). A message tells you how many textures are missing, if any.
4. Look around, then switch between the Scene, Materials, Lights and Paint tabs on the right.
5. When you are done, press Export XML, Package .zip or GLB in the bar above the viewer.

Inputs

BC7 textures are not supported yet; they show as unsupported in the texture list.

The viewport

Drag to orbit, right drag to pan, the wheel zooms. Click a mesh to select it; its shader is selected in the Materials tab too.

Top left is the LOD switcher: High, Med, Low, VLow. LODs the file does not have are greyed out. Top right:

The bottom bar shows vertices, triangles, shaders and textures for the current LOD, plus how many textures are missing.

The model is shown the way the game places it: rigid parts on their bones, vehicle wheels on every wheel bone. Skinned meshes (peds, most vehicle bodies) are shown in their bind pose. Missing textures render as a pink checker.

The bar above the viewport shows the file name, a counter of your changes, the export buttons and an X to close the file. Opening another file or closing with unsaved changes asks first.

Scene tab

Model

File name, type (Drawable, Drawable dictionary or Fragment), number of drawables, bones, lights and shaders, and how long the file took to read. Warnings from reading the file show here too.

Display

Geometry

Every geometry of the current LOD, grouped by drawable, with shader name and index, vertex and triangle count and the bone it sits on. The eye hides or shows a geometry, Show all and Hide all do it for the whole list, and Solo (in .ydd files) shows only one drawable. Click a row to select it in the viewport.

Textures

A grid of every texture the shaders use, with format and size. The dot is green when the texture is fine, amber when you edited it, red when it is missing or could not be read. Click a texture to open the texture window:

• Color, RGB and Alpha channel views.
• Used by: which shader slots point at it.
• File: where it was loaded from.
• PNG and DDS for CodeWalker downloads.
• Replace with image (PNG, JPG or WebP) and Revert changes.

Materials tab

Click a shader (or a mesh in the viewport) to expand it. Each shader row shows its index, name, .sps file, render bucket (opaque, alpha, decal, cutout and so on) and how many meshes use it. Pills tell you the alpha mode, glass, emissive (or emissive at night) and vehicle paint.

Inside you get every parameter:

• Texture slots: the texture name in a text field with suggestions from the loaded textures. Type another name to point the slot at a different texture. The image button replaces the texture’s pixels with a PNG, JPG or WebP (the name stays the same). A download button appears once the texture is edited. The line below says the format and size, or file not dropped, or unknown texture, add it to a .ytd.
• Vectors: a single number for scalar values, with an xyzw button to edit all four components.
• Arrays: listed and kept as they are.

Parameters marked live change the preview: the diffuse, normal and spec maps, bumpiness, specularIntensityMult, specularFalloffMult and emissiveMultiplier. Every other change is written to the exported XML only. Hover a parameter name for a short hint (for example specularFalloffMult: specular tightness, higher is glossier). Each changed value has a reset button, and Reset shader undoes all changes of one shader.

Textures for your .ytd lists every texture you painted or replaced, with DDS and PNG downloads and where it belongs: embedded in the model, replace in the .ytd, or add to a .ytd. New texture names you typed into a slot that have no file show up as needs a texture.

The preview is an approximation, not the game’s shaders. Check the final look in game.

Lights tab

Shows the <Lights> block of the model as real lights in the scene. With several drawables that have lights, a Drawable selector picks which one you edit.

• Add light creates a point light above the model, sized to it.
• Each light row shows its colour, type, bone, intensity and range, with duplicate and delete buttons.
• Night preview dims the sky, Light gizmos shows or hides the light helpers.

Pick a light in the list or click it in the viewport. Move it with the gizmo (switch between move and rotate with the two buttons in the light’s header) or type values.

Positions and directions are relative to the bone in BoneId, the same as in the file. Light brightness in the viewer is an estimate.

Paint tab

Left drag on the model paints, right drag orbits, middle drag pans, the wheel zooms. Texture view shows the flat texture with an optional UV wireframe; you can paint there too. Below it: download <texture>.png, DDS, and Revert to the original texture.

Keys in the Paint tab: Ctrl + Z undo, Ctrl + Y or Ctrl + Shift + Z redo, [ and ] brush size.

Output

Exported DDS files keep the texture name and the format family of the original (DXT1, DXT5 or A8R8G8B8) and get a full mip chain. A DXT1 texture you painted with transparency becomes DXT5. When you replace a texture with an image of a different size, the XML export updates the size of embedded textures.

Getting your edits back into the game

1. Extract Package .zip over your CodeWalker export folder, so the XML and the <model>/ texture folder get replaced.
2. In CodeWalker, use Import XML and pick the .ydr.xml, .ydd.xml or .yft.xml. It builds the binary file again.
3. Textures that live in a separate .ytd are not part of the model. Open that .ytd in CodeWalker or OpenIV and replace the texture with the PNG or DDS of the same name, or use the Texture Editor. The Materials tab lists which textures need this.
4. Copy the rebuilt files into your resource’s stream/ folder and restart the resource.

my_props/
  fxmanifest.lua
  stream/
    prop_my_lamp.ydr
    prop_my_lamp.ytd
    my_props.ytyp

FiveM streams everything in stream/ automatically. A new prop (not a replacement of a game model) also needs an archetype in a .ytyp, loaded from the manifest:

fx_version 'cerulean'
game 'gta5'

data_file 'DLC_ITYP_REQUEST' 'stream/my_props.ytyp'

The YTYP Creator builds that file.

Tips

• Drop the whole export folder, not single files. That way every texture, including the separate .ytd ones, is found in one go.
• Use Clay and UV checker to spot bad normals and stretched UVs before you blame the texture.
• For lights, turn on Night preview and set the hours with Night 20 to 6 so street lamps do not burn at noon.
• Solo in a .ydd is the fastest way to check one drawable of a clothing or ped dictionary.

Common mistakes

• Only the XML dropped. Every texture shows as a pink checker. Drop the texture folder on the open model.
• Edited .ytd textures forgotten. Painting a texture that lives in a separate .ytd does not change the model file. Export the DDS or PNG and put it into the .ytd.
• Renamed texture that does not exist. Typing a new name into a slot only changes the reference. Add a texture with that name to a .ytd, or the game draws nothing.

Limitations

• Reads CodeWalker XML exports only, not binary .ydr, .ydd or .yft files.
• BC7 textures are not supported yet.
• Geometry can not be edited. Skinned meshes are shown in their bind pose.
• The 3D preview and the light brightness are estimates of the in game look.
• Everything runs in your browser and nothing is uploaded.

Related tools

• Texture Editor for editing the .ytd dictionaries that go with the model.
• YTYP Creator for the archetype of a new prop.
• Clothing Designer for painting clothing with layers from binary .ydd files.
• YTD Optimizer to shrink texture memory.
• Objects List to find game props with pictures and 3D previews.