render

scripts/modules/draw2d.js

@@ -8,7 +8,7 @@ var geometry = use('geometry')
 var draw = {}
 draw[prosperon.DOC] = `
 A collection of 2D drawing functions that operate in screen space. Provides primitives
-for lines, rectangles, text, sprite drawing, etc.
+for lines, rectangles, text, sprite drawing, etc. Immediate mode.
 `
 
 var whiteimage = {}
@@ -79,14 +79,13 @@ draw.arrow[prosperon.DOC] = `
 `
 
 draw.rectangle = function render_rectangle(rect, color = Color.white, pipeline) {
-  var T = os.make_transform()
-  T.rect(rect)
   render.queue({
-    type: 'sprite',
-    transform: T,
-    color,
+    type: 'rectangle',
+    material: {
+      color,
+    },
+    rect,
     pipeline,
-    image: whiteimage
   })
 }
 draw.rectangle[prosperon.DOC] = `

scripts/modules/sdl_render.js

@@ -48,6 +48,53 @@ render.load_texture = function(img)
 
 var current_color = Color.white
 
+render.image = function(image, rect)
+{
+  if (typeof image === 'string')
+    image = graphics.texture(image)
+
+  rect.width ??= image.texture.width
+  rect.height ??= image.texture.height
+  context.texture(image.texture, rect);
+}
+
+render.clip = function(rect)
+{
+  context.clip(rect)
+}
+
+render.circle = function(pos, radius, color = Color.white)
+{
+
+}
+
+render.ellipse = function(pos, radiuses, color = Color.white)
+{
+
+}
+
+render.line = function(a, b, color = Color.white)
+{
+  context.draw_color(color)
+  context.line([a,b])
+}
+
+render.point = function(pos, color = Color.white)
+{
+  context.draw_color(color)
+  context.point(pos)
+}
+
+render.rectangle = function(rect, color = Color.white)
+{
+
+}
+
+render.geometry = function(mesh, pipeline)
+{
+  
+}
+
 render.queue = function(cmd)
 {
   if (cmd.color && cmd.color != current_color) {
@@ -56,15 +103,19 @@ render.queue = function(cmd)
   }
   
   switch(cmd.type) {
+    case "rectangle":
+      
+      context.
+      break;
     case "geometry":
       context.geometry(cmd.texture, cmd.mesh)
       break;
     
-    case "hardware_line":
+    case "line":
       context.line(cmd.points, cmd.color)
       break;
 
-    case "hardware_point":
+    case "point":
       context.points(cmd.points, cmd.color)
       break;
 
@@ -83,8 +134,9 @@ render.get_image = function(rect)
   return context.get_image(rect)
 }
 
-render.clear = function()
+render.clear = function(color)
 {
+  if (color) context.draw_color(color)
   context.clear()
 }
 

source/jsffi.c

@@ -1006,7 +1006,6 @@ char *js2strdup(JSContext *js, JSValue v) {
   return ret;
 }
 
-
 #include "qjs_macros.h"
 
 void SDL_Window_free(JSRuntime *rt, SDL_Window *w)
@@ -1016,7 +1015,7 @@ void SDL_Window_free(JSRuntime *rt, SDL_Window *w)
 
 typedef struct renderer_ctx {
   SDL_Renderer *sdl;
-  HMM_Mat4 cam;
+  shader_globals cam;
 } renderer_ctx;
 
 void renderer_ctx_free(JSRuntime *rt, renderer_ctx *ctx)
@@ -1642,21 +1641,24 @@ static const JSCFunctionListEntry js_spline_funcs[] = {
 shader_globals camera_globals(JSContext *js, JSValue camera)
 {
   shader_globals data = {0};
+  if (JS_IsUndefined(camera))
+    return data;
+    
   HMM_Vec2 size;
   transform *transform;
   double fov = 0;
-  double aspect = 0;
   int ortho;
   double near_z = 0;
   double far_z = 0;
+  HMM_Vec2 anchor;
   
   JS_GETPROP(js, size, camera, size, vec2)
   JS_GETPROP(js, transform, camera, transform, transform)
   JS_GETPROP(js, fov, camera, fov, number)
-  JS_GETPROP(js, aspect, camera, aspect, number)
   JS_GETPROP(js, ortho, camera,ortho,bool)
   JS_GETPROP(js,near_z,camera,near_z,number)
   JS_GETPROP(js,far_z,camera,far_z,number)
+  JS_GETPROP(js, anchor, camera, anchor, vec2)
 
   HMM_Mat4 proj;
   HMM_Mat4 view;
@@ -1664,20 +1666,24 @@ shader_globals camera_globals(JSContext *js, JSValue camera)
   if (ortho) {
     proj = HMM_Orthographic_RH_NO(
       -size.x*0.5, 0.5*size.x,
-      -size.y*0.5, 0.5*size.y,
+      size.y*0.5, -0.5*size.y, // flip these negative signs based on backend
       -1.0f, 1.0f
     );
+
+    proj.Columns[3].x += size.x * anchor.x;
+    proj.Columns[3].y += size.y * anchor.y;
     view = HMM_Translate((HMM_Vec3){ -transform->pos.x, -transform->pos.y, 0.0f });    
   }
   else {
-    proj = HMM_Perspective_RH_NO(fov, aspect,near_z,far_z);
-
-    HMM_Mat4 camera_transform = HMM_Translate(transform->pos);
-    camera_transform = HMM_MulM4(camera_transform, HMM_QToM4(transform->rotation));
-//    camera_transform = HMM_MulM4(camera_transform, HMM_Scale(transform->scale));  // don't bother w/ scale
-    view = HMM_InvGeneralM4(camera_transform);
+    proj = HMM_Perspective_RH_NO(fov, size.x/size.y,near_z,far_z);
+    proj.Columns[1] = HMM_MulV4F(proj.Columns[1], -1.0f);
   }
 
+  view = HMM_MulM4(
+    HMM_InvTranslate(HMM_Translate(transform->pos)),
+    HMM_InvRotate(HMM_QToM4(transform->rotation))
+  );
+
   // Update your shader globals
   data.world_to_projection = HMM_MulM4(proj, view);
   data.projection_to_world = HMM_InvGeneralM4(data.world_to_projection);
@@ -2562,7 +2568,7 @@ JSC_SCALL(SDL_Window_make_renderer,
   SDL_SetStringProperty(props, SDL_PROP_RENDERER_CREATE_NAME_STRING, str);
   renderer_ctx *ctx = malloc(sizeof(*ctx));
   ctx->sdl = SDL_CreateRendererWithProperties(props);
-  ctx->cam = HMM_M4D(1.0);
+  ctx->cam = (shader_globals){0};
   SDL_DestroyProperties(props);
   if (!ctx->sdl) {
     free(ctx);
@@ -2902,27 +2908,10 @@ JSC_CCALL(renderer_coords,
 )
 
 JSC_CCALL(renderer_camera,
-  SDL_Renderer *ren = js2renderer_ctx(js,self)->sdl;
+  renderer_ctx *ctx = js2renderer_ctx(js,self);
   JSValue camera = argv[0];
-  
-  SDL_Rect vp;
 
-  int centered = JS_ToBool(js,argv[1]);
-  SDL_GetRenderViewport(ren, &vp);
-  HMM_Mat3 proj;
-  proj.Columns[0] = (HMM_Vec3){1,0,0};
-  proj.Columns[1] = (HMM_Vec3){0,-1,0};
-  if (centered)
-    proj.Columns[2] = (HMM_Vec3){vp.w/2.0,vp.h/2.0,1};
-  else
-    proj.Columns[2] = (HMM_Vec3){0,vp.h,1};
-    
-  transform *tra = js2transform(js,argv[0]);  
-  HMM_Mat3 view;
-  view.Columns[0] = (HMM_Vec3){1,0,0};
-  view.Columns[1] = (HMM_Vec3){0,1,0};
-  view.Columns[2] = (HMM_Vec3){-tra->pos.x, -tra->pos.y,1};
-  cam_mat = HMM_MulM3(proj,view);
+  ctx->cam = camera_globals(js, argv[0]);
 )
 
 JSC_CCALL(renderer_screen2world,
@@ -3004,12 +2993,17 @@ JSC_CCALL(renderer_make_sprite_mesh,
   JS_SetProperty(js, ret, count, number2js(js, count));
 )
 
+JSC_CCALL(renderer_texture,
+  
+)
+
 static const JSCFunctionListEntry js_renderer_ctx_funcs[] = {
   MIST_FUNC_DEF(SDL_Renderer, draw_color, 1),
   MIST_FUNC_DEF(SDL_Renderer, present, 0),
   MIST_FUNC_DEF(SDL_Renderer, clear, 0),
   MIST_FUNC_DEF(renderer, line, 1),
   MIST_FUNC_DEF(renderer, point, 1),
+  MIST_FUNC_DEF(renderer, texture, 2),
   MIST_FUNC_DEF(renderer, geometry, 2),
   MIST_FUNC_DEF(renderer, load_texture, 1),
   MIST_FUNC_DEF(renderer, get_image, 1),

tests/camera.js

@@ -12,26 +12,35 @@ render.initialize({
 var draw = use('draw2d')
 
 var camera = {
+  size: [500,500],
   transform: os.make_transform(),
-  zoom: 1,
+  fov:50,
+  near_z: 0,
+  far_z: 1000,
   surface: undefined,
-  viewport: {x:0,y:0,width:1,height:1}
+  viewport: {x:0,y:0,width:1,height:1},
+  ortho:true,
+  anchor:[0.5,0.5],
 }
 
 var hudcam = {
-  x: 0,
-  y: 0,
-  mode: 'ortho',
+  size: [500,500],
+  transform: os.make_transform(),
+  fov:50,
+  near_z: 0,
+  far_z: 1000,
+  surface: undefined,
   viewport: {x:0,y:0,width:1,height:1},
-  surface:undefined,
+  ortho:true,
+  anchor:[0,0],
 }
 
-$_.delay($_.stop, 3)
-
 function loop()
 {
-  render.clear()
-  draw.rectangle({x:50,y:-50,width:50,height:50})
+  render.clear(Color.red)
+//  render.camera(camera)
+  render.line([0,0],[50,50])
+//  draw.rectangle({x:50,y:-50,width:50,height:50})
   render.present()
   $_.delay(loop, 1/60)
 }