WebGL & HTML Comparison
Compare rendering technologies side-by-side with this dual-mode demonstration of the SeatmapBookingRenderer in both WebGL and HTML rendering modes.
Visualize the differences in custom seat styling, price colors, and custom icons between the two approaches. The split interface presents HTMLCanvas (left) and WebGLCanvas (right), each equipped with independent zoom control buttons (+ and -), allowing direct comparison of rendering quality, performance, and visual appearance while interacting with each mode separately.
Code
1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../../index';
2import '../main.css';
3
4const eventId = 'a4a75361-7823-4847-bf22-336843022e80';
5const publicKey = '99a77be5-4680-4b5e-b9ce-962e78f9b811';
6
7const COLOR_UNAVAILABLE = '#bbb';
8
9const settings: IBookingRendererSettings = {
10 publicKey,
11 theme: {
12 gridStep: 14,
13 bgColor: '#f7f7f7',
14
15 priceColors: [
16 [
17 '#9C27B0',
18 '#673AB7',
19 '#3F51B5',
20 '#2196F3',
21 '#00BCD4',
22 '#009688',
23 '#4CAF50',
24 '#CDDC39',
25 '#FFC107',
26 '#FF9800',
27 '#FF5722',
28 '#F44336',
29 '#E91E63',
30 ],
31 ['#2196F3'],
32 ['#2196F3', '#FFC107'],
33 ['#673AB7', '#2196F3', '#FFC107'],
34 ],
35
36 // Put your SVG icons here
37 images: {
38 checkmark:
39 '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 8.5l5 5 10-10" stroke="#fff" stroke-width="2"/></svg>',
40 star: '<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0l2.163 5.023 5.445.505-4.108 3.61 1.202 5.334L8 11.68l-4.702 2.792L4.5 9.137.392 5.527l5.445-.504L8 0z" fill="#fff"/></svg>',
41 },
42
43 // Here you can redefine default seat styles
44 seatStyles: {
45 default: {
46 size: 16,
47 color: COLOR_UNAVAILABLE,
48 },
49 unavailable: {
50 size: 6,
51 color: COLOR_UNAVAILABLE,
52 },
53 hovered: {
54 size: 38,
55 color: COLOR_UNAVAILABLE,
56 seatName: {
57 font: '18px Arial, sans-serif',
58 color: '#fff',
59 },
60 },
61 selected: {
62 size: 42,
63 color: COLOR_UNAVAILABLE,
64 imageId: 'checkmark',
65 shadow: {
66 blur: 20,
67 color: 'rgba(0, 0, 0, 0.3)',
68 },
69 },
70 },
71 },
72
73 onBeforeSeatDraw: (e) => {
74 let newStyle = Object.assign({}, e.style);
75
76 // You can use custom condition or conditions
77 // state: 'default' | 'unavailable' | 'hovered' | 'selected'
78 const isStarred = e.seat.name === '7' && e.state === 'default' && e.seat.priceId;
79
80 if (isStarred) {
81 newStyle = {
82 size: 28,
83 color: COLOR_UNAVAILABLE,
84 imageId: 'star',
85 };
86 }
87
88 // Add price coloring
89 if (e.seat.priceId) {
90 newStyle.color = e.context.pricesById[Number(e.seat.priceId)].color;
91 }
92 return newStyle;
93 },
94};
95
96const webgl = document.getElementById('webgl-root');
97const html = document.getElementById('html-root');
98
99if (webgl) {
100 const webglRender = (window.seatmapWebglRenderer = new SeatmapBookingRenderer(webgl, {
101 ...settings,
102 switchToWebGL: true,
103 }));
104 webglRender.loadEvent(eventId);
105}
106
107if (html) {
108 const htmlRender = (window.seatmapHtmlRenderer = new SeatmapBookingRenderer(html, settings));
109 htmlRender.loadEvent(eventId);
110}
HTML
1<div style="display: flex; height: 100vh; width: 100vw">
2 <div class="block">
3 <h2>HTMLCanvas</h2>
4 <div id="html-root"></div>
5 <div class="ZoomButtonList">
6 <div class="ZoomButton" onclick="seatmapHtmlRenderer.zoomIn()">+</div>
7 <div class="ZoomButton" onclick="seatmapHtmlRenderer.zoomOut()">–</div>
8 </div>
9 </div>
10
11 <hr style="width: 1px; height: 100vh; background-color: black; border: none" />
12
13 <div class="block">
14 <h2>WebGLCanvas</h2>
15 <div id="webgl-root"></div>
16 <div class="ZoomButtonList">
17 <div class="ZoomButton" onclick="seatmapWebglRenderer.zoomIn()">+</div>
18 <div class="ZoomButton" onclick="seatmapWebglRenderer.zoomOut()">–</div>
19 </div>
20 </div>
21</div>