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>