Files
cell/docs/graphics.md
2025-01-05 16:11:31 -06:00

5.2 KiB

TERMINOLOGY

Texture - a set of bytes on the GPU, not directly accessible Surface - a set of bytes in RAM, modifiable rect - a rectangle of {x,y,width,height} Image - combination of a texture and rect, where the rect defines the UV coordinates on the texture to draw

Drawing, cameras, viewports, logical size, and so on

A camera is a view into the game world. A camera can be "rendered", which means it renders the world, and what it can see in the world. A camera may draw to a surface, or to the main window. Objects in the world will render so that if their position is equal to the camera position, that is in the center of the screen. HUD functions always render so [0,0] is the bottom left of the camera's view.

Cameras always draw to their own render target. Then, they draw that render target to the framebuffer.

COORDINATES

Screen coordinates start in the upper left corner at [0,0] and extend to the bottom right, in pixels. Raw mouse coordinates are in these.

RENDERING PIPELINE

In prosperon, you call graphics rendering functions at well defined hook points. These are interleaved as necessary with predefined created objects, like sprites, 3d world models, and so on.

The engine stores a command buffer. When you issue "draw" commands, they are recorded into the command buffer. These are batched as much as they can be; if there is no significant state change between, the draw commands can be coalesced into one. Then, for each camera, the draw commands are executed.

RENDERING COMPONENTS

MATERIALS

A material defines the inputs to a shader.

PIPELINES

Pipelines are how the rendering engine is set up. Switching pipelines can be done for special effects.

SPECIAL EFFECTS

Sometimes you want a special effect. While there are many objects in prosperon you can create and have the engine handle for you, a special effect typically requires a bit of code.

LAYERS

All things that draw have a layer. If no layer is set, the implicit layer is "0". Even draw and hud functions have a layer. To draw a draw function on a specific layer, set that function's "layer". ie,

this.draw = function() { render.rect(); } this.draw.layer = -5;

Now that layer will draw at the -5 layer.

CAMERAS

Everything is drawn via cameras. Cameras can draw directly to the screen, or they can draw to an offscreen render target. By default, everything is drawn to all cameras. There will eventually be a tag that lets you filter what is drawn to specifc cameras.

Cameras have a resolution they draw at, "size".

TEXTURES

Anatomy of rendpering an image render.image(path) Path can be a file like "toad" If this is a gif, this would display the entire range of the animation It can be a frame of animation, like "frog.0" If it's an aseprite, it can have multiple animations, like "frog.walk.0" file^ frame^ idx

render.image("frog.walk.0", game.image("frog.walk.0") ==> retrieve

image = { texture: "spritesheet.png", rect: [x,y,w,h], time: 100 },

frames: {
  toad: {
    x: 4,
    y: 5,
    w: 10,
    h: 10
  },
  frog: {
  
    walk: [
      { texture: spritesheet.png, x: 10, y:10, w:6,h:6, time: 100 },
      { texture: spritesheet.png, x:16,y:10,w:6,h:6,time:100}       <--- two frame walk animation
    ],
  },
},

} texture frog { texture: {"frog.png"}, <--- this is the actual thing to send to the gpu x:0, y:0, w:10, h:10 },

RENDER MODES

/* rendering modes ps1 gouraud diffuse // 16 bit color, 5-5-5 7 dynamic lights, 1 ambient textures are affine no vertex skinning 256x256 texture max (generally 128x128) 320x240, variable up to 640x480

n64 gouraud diffuse combiner // a secondary texture sometimes used to combine 7 dynamic lights, 1 ambient 320x240, or 640x480

sega saturn gouraud diffuse 320x240 or 640x480

ps2 phong diffuse combiner // second texture for modulation of diffuse combine_mode // int for how to combine

dreamcast phong diffuse combiner // second texture; could be an environment map, or emboss bump mapping fog 640x480 640x448, special mode to 1280x1024

gamecube phong diffuse +7 textures // wow! 8 dynamic lights 640x480

*/

/* meshes position (float3) color (rgba) uv */

/* materials, modern pbr any object can act as a "material". The engine expects some standardized things: diffuse - base color texture bump - a normal map for dot3 bump maping used in phong shading height - a grayscale heightmap occlusion - ambient occlusion texture emission - texture for where model emits light bump2 - a second normal map for detail metallic - a metal/smoothness map specular - specular map, alternative for the metallic workflow */

// world coordinates, the "actual" view relative to the game's universe // camera coordinates, normalized from 0 to 1 inside of a camera's viewport, bottom left is 0,0, top right is 1,1 // screen coordinates, pixels, 0,0 at the top left of the window and [w,h] at the bottom right of the window // hud coordinates, same as screen coordinates but the top left is 0,0