halfway to graphv_webgl replacing wall

boot_js.ml

@@ -0,0 +1,69 @@
+open Js_of_ocaml
+module NVG = Graphv_webgl
+
+(* This scales the canvas to match the DPI of the window,
+   it prevents blurriness when rendering to the canvas *)
+let scale_canvas (canvas : Dom_html.canvasElement Js.t) =
+  let dpr = Dom_html.window##.devicePixelRatio in
+  let rect = canvas##getBoundingClientRect in
+  let width = rect##.right -. rect##.left in
+  let height = rect##.bottom -. rect##.top in
+  canvas##.width := width *. dpr |> int_of_float ;
+  canvas##.height := height *. dpr |> int_of_float ;
+  let width =
+    Printf.sprintf "%dpx" (int_of_float width) |> Js.string in
+  let height =
+    Printf.sprintf "%dpx" (int_of_float height) |> Js.string in
+  canvas##.style##.width := width ;
+  canvas##.style##.height := height
+
+let _ =
+  let canvas =
+    Js.Unsafe.coerce (Dom_html.getElementById_exn "canvas") in
+  scale_canvas canvas ;
+  let webgl_ctx =
+    (* Graphv requires a stencil buffer to work properly *)
+    let attrs = WebGL.defaultContextAttributes in
+    attrs##.stencil := Js._true ;
+    match
+      WebGL.getContextWithAttributes canvas attrs |> Js.Opt.to_option
+    with
+    | None ->
+        print_endline "Sorry your browser does not support WebGL" ;
+        raise Exit
+    | Some ctx -> ctx in
+  let open NVG in
+  let vg =
+    create
+      ~flags:CreateFlags.(antialias lor stencil_strokes)
+      webgl_ctx in
+  (* File in this case is actually the CSS font name *)
+  Text.create vg ~name:"sans" ~file:"sans" |> ignore ;
+  webgl_ctx##clearColor 0.3 0.3 0.32 1. ;
+  let rec render (time : float) =
+    webgl_ctx##clear
+      ( webgl_ctx##._COLOR_BUFFER_BIT_
+      lor webgl_ctx##._DEPTH_BUFFER_BIT_
+      lor webgl_ctx##._STENCIL_BUFFER_BIT_ ) ;
+    let device_ratio = Dom_html.window##.devicePixelRatio in
+    begin_frame vg ~width:canvas##.width ~height:canvas##.height
+      ~device_ratio ;
+    Transform.scale vg ~x:device_ratio ~y:device_ratio ;
+    Human.Display.render vg canvas##.width canvas##.height ;
+    (*
+    Path.begin_ vg ;
+    Path.rect vg ~x:40. ~y:40. ~w:320. ~h:320. ;
+    set_fill_color vg ~color:Color.(rgba ~r:154 ~g:203 ~b:255 ~a:200) ;
+    fill vg ;
+    Transform.translate vg ~x:200. ~y:200. ;
+    Transform.rotate vg ~angle:(time *. 0.0005) ;
+    Text.set_font_face vg ~name:"sans" ;
+    Text.set_size vg ~size:48. ;
+    Text.set_align vg ~align:Align.(center lor middle) ;
+    set_fill_color vg ~color:Color.white ;
+    Text.text vg ~x:0. ~y:0. "Hello World!" ; *)
+    NVG.end_frame vg ;
+    Dom_html.window##requestAnimationFrame (Js.wrap_callback render)
+    |> ignore in
+  Dom_html.window##requestAnimationFrame (Js.wrap_callback render)
+  |> ignore