examples/web-sprite/src/web-sprite/main.sgl

1;;; web-sprite / main — sigil-graphics rendering in the browser (Milestone 2)

2;;;

3;;; A Sigil program that draws through (sigil graphics) — i.e. REUSED sokol_gfx /

4;;; sokol_gp — in the browser, with no Emscripten and no sokol_app. The GL calls

5;;; are satisfied by the sigil-wasm-gles3 raw-GLES3 binding; the canvas + the

6;;; requestAnimationFrame loop come from that binding's app-shell surface

7;;; ((sigil browser gles3)), which replaces sokol_app on web.

8;;;

9;;; Same drawing API as native sigil-graphics (begin-frame / set-color /

10;;; draw-filled-rect / draw-filled-circle / end-frame) — the whole point of M2.

12(define-library (web-sprite main)

13 (import (sigil core)

14 (sigil math)

15 (sigil graphics)

16 (sigil browser gles3))

18 (export main web-tick sigil-web-dispatch-event)

20 (begin

21 ;; Virtual playfield — letterboxed to the canvas so the scene is

22 ;; resolution-independent (exercises set-viewport + the swapchain sizing).

23 (define FIELD-W 640)

24 (define FIELD-H 480)

26 (define (web-tick timestamp-ms)

27 (let* ((t (* timestamp-ms 0.001))

28 (cx (+ 320.0 (* 200.0 (sin (* t 1.3)))))

29 (cy (+ 240.0 (* 140.0 (cos (* t 1.7))))))

30 ;; Keep the drawing buffer matched to the CSS display size.

31 (gles3-resize-to-display)

33 (begin-frame)

35 ;; A moving textured-looking sprite: a filled rect body + a bright

36 ;; halo circle, drawn through sokol_gp via sigil-graphics.

37 (set-color 0.90 0.70 0.30 1.0)

38 (draw-filled-rect (- cx 48.0) (- cy 48.0) 96.0 96.0)

40 (set-color 0.20 0.72 0.75 1.0)

41 (draw-filled-circle cx cy 34.0 32)

43 ;; A few static corner markers so orientation is obvious.

44 (set-color 0.85 0.25 0.35 1.0)

45 (draw-filled-rect 8.0 8.0 40.0 40.0)

46 (draw-filled-rect (- FIELD-W 48) 8.0 40.0 40.0)

47 (draw-filled-rect 8.0 (- FIELD-H 48) 40.0 40.0)

48 (draw-filled-rect (- FIELD-W 48) (- FIELD-H 48) 40.0 40.0)

50 (end-frame)))

52 ;; Input hook required by the generated web loader (unused here).

53 (define (sigil-web-dispatch-event type payload)

54 #t)

56 (define (main)

57 ;; Order matters: the WebGL2 context must exist before gfx-setup runs

58 ;; sg_setup (sokol immediately issues gl* calls). use-canvas creates it;

59 ;; fail fast with a readable message if the canvas / WebGL2 is unavailable

60 ;; rather than crashing deep inside a sokol gl* call.

61 (unless (gles3-use-canvas "#stage")

62 (error "web-sprite: could not attach WebGL2 to #stage"))

63 (gles3-resize-to-display)

65 ;; Dark letterbox bars; the pass clears to this each frame.

66 (set-letterbox-color 0.06 0.07 0.10 1.0)

67 (set-viewport FIELD-W FIELD-H)

69 (gfx-setup)

71 ;; Drive the frame from the browser RAF loop through the Sigil VM tick.

72 (gles3-start-loop "web-tick"))))