41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import sdf2dJpeg from '../static/media/sdf2d.png?format=jpg';
|
|
import sdf2dWebP from '../static/media/sdf2d.png?format=webp';
|
|
|
|
import { Preview } from '../page/basics/preview/preview';
|
|
import { Open, NPM, Youtube } from './shared';
|
|
|
|
export const sdf2dTimelineElement = {
|
|
title: `2D ray tracing`,
|
|
date: `2020 autumn`,
|
|
figure: new Preview(
|
|
sdf2dWebP,
|
|
sdf2dJpeg,
|
|
'https://sdf2d.schmelczer.dev',
|
|
'A webpage showcasing the SDF-2D project.'
|
|
),
|
|
description: `
|
|
I created the SDF-2D library for efficiently rendering 2D scenes using ray tracing.
|
|
My solution relies on signed distance fields (SDF-s), it supports both WebGL and WebGL2,
|
|
and is an easily reusable and extensible NPM package.
|
|
`,
|
|
more: [
|
|
`
|
|
A multitude of optimisations were needed to achieve real-time performance even on low-end mobile devices.
|
|
These include deferred shading, tile-based rendering, and dynamic shader generation to eliminate unnecessary
|
|
instructions.
|
|
`,
|
|
`
|
|
The result is a reusable library written in TypeScript with a — subjectively — simple and elegant API.
|
|
For more information please check out the GitHub repository or the NPM package itself. Or simply enjoy the
|
|
mesmerising demo scenes.
|
|
`,
|
|
`
|
|
Creating this library package is also covered in my thesis (available above).
|
|
`,
|
|
],
|
|
links: [
|
|
new NPM('https://www.npmjs.com/package/sdf-2d'),
|
|
new Youtube('https://www.youtube.com/watch?v=K3cEtnZUNR0'),
|
|
new Open('https://sdf2d.schmelczer.dev'),
|
|
],
|
|
};
|