Start using the sdf-2d library
This commit is contained in:
parent
99f47e2961
commit
1b7dee4be0
56 changed files with 314 additions and 2119 deletions
24
frontend/custom.d.ts
vendored
24
frontend/custom.d.ts
vendored
|
|
@ -1,24 +0,0 @@
|
|||
declare module '*.glsl' {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
|
||||
/*
|
||||
declare module '*.png' {
|
||||
import { ResponsiveImage } from 'src/framework/model/misc';
|
||||
const content: ResponsiveImage;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.jpg' {
|
||||
import { ResponsiveImage } from 'src/framework/model/misc';
|
||||
const content: ResponsiveImage;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.jpeg' {
|
||||
import { ResponsiveImage } from 'src/framework/model/misc';
|
||||
const content: ResponsiveImage;
|
||||
export default content;
|
||||
}
|
||||
*/
|
||||
|
|
@ -7,10 +7,10 @@
|
|||
"scripts": {
|
||||
"start": "webpack-dev-server --mode development",
|
||||
"lint": "npx eslint --fix \"src/**/*.ts\" && npx prettier --write \"src/**/*.ts\"",
|
||||
"build": "webpack && find dist -type f -not -name '*.html' | xargs rm"
|
||||
"build": "webpack --mode production && find dist -type f -not -name '*.html' | xargs rm"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "András Schmelczer",
|
||||
"author": "András Schmelczer <andras@schmelczer.dev> (https://schmelczer.dev/)",
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
|
|
@ -22,9 +22,6 @@
|
|||
"sideEffects": [
|
||||
"*.scss"
|
||||
],
|
||||
"optimization": {
|
||||
"usedExports": true
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/gl-matrix": "^2.4.5",
|
||||
"@types/uuid": "^8.0.0",
|
||||
|
|
@ -35,6 +32,7 @@
|
|||
"css-loader": "^3.5.2",
|
||||
"cssnano": "^4.1.10",
|
||||
"eslint": "^7.2.0",
|
||||
"sdf-2d": "^0.1.0-alpha",
|
||||
"eslint-config-prettier": "^6.11.0",
|
||||
"eslint-plugin-import": "^2.21.2",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,27 @@
|
|||
import { glMatrix, vec2 } from 'gl-matrix';
|
||||
import { glMatrix } from 'gl-matrix';
|
||||
import { Game } from './scripts/game';
|
||||
import { applyArrayPlugins } from './scripts/helper/array';
|
||||
import { Random } from './scripts/helper/random';
|
||||
import TunnelShape from './scripts/shapes/types/tunnel-shape';
|
||||
import './styles/main.scss';
|
||||
|
||||
glMatrix.setMatrixArrayType(Array);
|
||||
applyArrayPlugins();
|
||||
glMatrix.setMatrixArrayType(
|
||||
Array
|
||||
); /*
|
||||
}
|
||||
}
|
||||
|
||||
zeroes.forEach((z) => {
|
||||
const blueIndex = z.y * (width * 4) + z.x * 4 + 2;
|
||||
imageData.data[blueIndex] = 255;
|
||||
imageData.data[blueIndex - 1] = 255;
|
||||
imageData.data[blueIndex - 2] = 255;
|
||||
});
|
||||
|
||||
console.log(errors);
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
};*/ //testSDF(); // extract as new image (data-uri)
|
||||
|
||||
/*
|
||||
const testSDF = () => {
|
||||
Random.seed = 44;
|
||||
|
||||
|
|
@ -24,19 +38,32 @@ const testSDF = () => {
|
|||
res = -Math.log2(res) / k;
|
||||
return -res;
|
||||
|
||||
*/
|
||||
/*let min = 1000;
|
||||
*/ /*let min = 1000;
|
||||
for (const t of objects) {
|
||||
min = Math.min(min, t.distance(position));
|
||||
}
|
||||
if (min < 0) {
|
||||
// min = Math.min(min, vec2.distance(position, vec2.fromValues(40, 80 - 31.62)) - 31.62);
|
||||
}
|
||||
return -min;*/
|
||||
return -min;*/ /*
|
||||
const tree = new BoundingBoxTree([
|
||||
new BoundingBox(300, 550, 150, 550, 'A'),
|
||||
new BoundingBox(400, 800, 50, 200, 'B'),
|
||||
new BoundingBox(450, 500, 175, 185, 'C'),
|
||||
new BoundingBox(100, 200, 100, 500, 'D'),
|
||||
new BoundingBox(750, 950, 450, 600, 'E'),
|
||||
new BoundingBox(940, 1000, -2, 180, 'F'),
|
||||
new BoundingBox(960, 1050, 50, 190, 'G'),
|
||||
new BoundingBox(150, 900, 0, 575, 'H'),
|
||||
new BoundingBox(-10000, 10000, -10000, 10000, 'I'),
|
||||
]);
|
||||
|
||||
tree.print();
|
||||
console.log(tree.findIntersecting(new BoundingBox(960, 1050, 50, 190, 'G')));
|
||||
*/ /*
|
||||
return -vec2.distance(position, vec2.fromValues(40, 40)) + 30;
|
||||
};
|
||||
|
||||
/*
|
||||
const width = 80;
|
||||
const height = 100;
|
||||
|
||||
|
|
@ -92,43 +119,7 @@ const testSDF = () => {
|
|||
/*if (zeroes.find((z) => vec2.distance(z, position) < dist) !== undefined) {
|
||||
const blueIndex = y * (width * 4) + x * 4 + 2;
|
||||
imageData.data[blueIndex] = 255;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
zeroes.forEach((z) => {
|
||||
const blueIndex = z.y * (width * 4) + z.x * 4 + 2;
|
||||
imageData.data[blueIndex] = 255;
|
||||
imageData.data[blueIndex - 1] = 255;
|
||||
imageData.data[blueIndex - 2] = 255;
|
||||
});
|
||||
|
||||
console.log(errors);
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
};
|
||||
|
||||
//testSDF();
|
||||
// extract as new image (data-uri)
|
||||
|
||||
/*
|
||||
const tree = new BoundingBoxTree([
|
||||
new BoundingBox(300, 550, 150, 550, 'A'),
|
||||
new BoundingBox(400, 800, 50, 200, 'B'),
|
||||
new BoundingBox(450, 500, 175, 185, 'C'),
|
||||
new BoundingBox(100, 200, 100, 500, 'D'),
|
||||
new BoundingBox(750, 950, 450, 600, 'E'),
|
||||
new BoundingBox(940, 1000, -2, 180, 'F'),
|
||||
new BoundingBox(960, 1050, 50, 190, 'G'),
|
||||
new BoundingBox(150, 900, 0, 575, 'H'),
|
||||
new BoundingBox(-10000, 10000, -10000, 10000, 'I'),
|
||||
]);
|
||||
|
||||
tree.print();
|
||||
console.log(tree.findIntersecting(new BoundingBox(960, 1050, 50, 190, 'G')));
|
||||
*/
|
||||
|
||||
const main = async () => {
|
||||
}*/ const main = async () => {
|
||||
try {
|
||||
Random.seed = 42;
|
||||
await new Game().start();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import { vec3 } from 'gl-matrix';
|
||||
import { CircleLight, compile, Flashlight, Renderer } from 'sdf-2d';
|
||||
import { CommandBroadcaster } from './commands/command-broadcaster';
|
||||
import { BeforeRenderCommand } from './graphics/commands/before-render';
|
||||
import { RenderCommand } from './graphics/commands/render';
|
||||
import { IRenderer } from './graphics/i-renderer';
|
||||
import { WebGl2Renderer } from './graphics/rendering/webgl2-renderer';
|
||||
import { timeIt } from './helper/timing';
|
||||
import { prettyPrint } from './helper/pretty-print';
|
||||
import { IGame } from './i-game';
|
||||
import { KeyboardListener } from './input/keyboard-listener';
|
||||
import { MouseListener } from './input/mouse-listener';
|
||||
|
|
@ -12,13 +11,14 @@ import { GameObject } from './objects/game-object';
|
|||
import { Objects } from './objects/objects';
|
||||
import { Camera } from './objects/types/camera';
|
||||
import { Character } from './objects/types/character';
|
||||
import { InfoText } from './objects/types/info-text';
|
||||
import { createDungeon } from './objects/world/create-dungeon';
|
||||
import { MoveToCommand } from './physics/commands/move-to';
|
||||
import { StepCommand } from './physics/commands/step';
|
||||
import { TeleportToCommand } from './physics/commands/teleport-to';
|
||||
import { Physics } from './physics/physics';
|
||||
import { BoundingBoxBase } from './shapes/bounding-box-base';
|
||||
import { CircleShape } from './shapes/types/circle-shape';
|
||||
import { TunnelShape } from './shapes/types/tunnel-shape';
|
||||
|
||||
export class Game implements IGame {
|
||||
public readonly objects = new Objects();
|
||||
|
|
@ -26,14 +26,13 @@ export class Game implements IGame {
|
|||
public readonly camera = new Camera();
|
||||
private previousTime?: DOMHighResTimeStamp = null;
|
||||
private previousFpsValues: Array<number> = [];
|
||||
private infoText = new InfoText();
|
||||
private character: Character;
|
||||
private renderer: IRenderer;
|
||||
private initializeRendererPromise: Promise<void>;
|
||||
private renderer: Renderer;
|
||||
private rendererPromise: Promise<Renderer>;
|
||||
private overlay: HTMLElement = document.querySelector('#overlay');
|
||||
|
||||
constructor() {
|
||||
const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
|
||||
const overlay: HTMLElement = document.querySelector('#overlay');
|
||||
|
||||
document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
|
||||
|
||||
|
|
@ -46,14 +45,31 @@ export class Game implements IGame {
|
|||
[this.objects]
|
||||
);
|
||||
|
||||
this.renderer = new WebGl2Renderer(canvas, overlay);
|
||||
this.initializeRendererPromise = this.renderer.initialize();
|
||||
this.rendererPromise = compile(
|
||||
canvas,
|
||||
[
|
||||
CircleShape.descriptor,
|
||||
TunnelShape.descriptor,
|
||||
Flashlight.descriptor,
|
||||
CircleLight.descriptor,
|
||||
],
|
||||
[
|
||||
vec3.fromValues(0, 0, 0),
|
||||
vec3.fromValues(224 / 255, 96 / 255, 126 / 255),
|
||||
vec3.fromValues(119 / 255, 173 / 255, 120 / 255),
|
||||
]
|
||||
);
|
||||
this.initializeScene();
|
||||
this.physics.start();
|
||||
}
|
||||
|
||||
public async start(): Promise<void> {
|
||||
await this.initializeRendererPromise;
|
||||
this.renderer = await this.rendererPromise;
|
||||
this.renderer.setRuntimeSettings({
|
||||
isWorldInverted: true,
|
||||
ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
|
||||
shadowLength: 300,
|
||||
});
|
||||
requestAnimationFrame(this.gameLoop.bind(this));
|
||||
}
|
||||
|
||||
|
|
@ -70,8 +86,6 @@ export class Game implements IGame {
|
|||
}
|
||||
|
||||
private initializeScene() {
|
||||
this.objects.addObject(this.infoText);
|
||||
|
||||
const start = createDungeon(this.objects, this.physics);
|
||||
createDungeon(this.objects, this.physics);
|
||||
|
||||
|
|
@ -90,7 +104,6 @@ export class Game implements IGame {
|
|||
}
|
||||
}
|
||||
|
||||
@timeIt()
|
||||
private gameLoop(time: DOMHighResTimeStamp) {
|
||||
if (this.previousTime === null) {
|
||||
this.previousTime = time;
|
||||
|
|
@ -98,44 +111,26 @@ export class Game implements IGame {
|
|||
|
||||
const deltaTime = time - this.previousTime;
|
||||
this.previousTime = time;
|
||||
this.calculateFps(deltaTime);
|
||||
|
||||
this.objects.sendCommand(new StepCommand(deltaTime));
|
||||
this.camera.sendCommand(new MoveToCommand(this.character.position));
|
||||
|
||||
this.renderer.startFrame(deltaTime);
|
||||
|
||||
this.camera.sendCommand(new BeforeRenderCommand(this.renderer));
|
||||
this.camera.sendCommand(new RenderCommand(this.renderer));
|
||||
|
||||
const shouldBeDrawn = this.physics
|
||||
.findIntersecting(this.camera.viewArea)
|
||||
.map((b) => b.shape?.gameObject);
|
||||
|
||||
for (const object of shouldBeDrawn) {
|
||||
object?.sendCommand(new BeforeRenderCommand(this.renderer));
|
||||
object?.sendCommand(new RenderCommand(this.renderer));
|
||||
}
|
||||
|
||||
this.character.sendCommand(new RenderCommand(this.renderer));
|
||||
this.infoText.sendCommand(new RenderCommand(this.renderer));
|
||||
this.renderer.finishFrame();
|
||||
this.renderer.renderDrawables();
|
||||
|
||||
this.overlay.innerText = prettyPrint(this.renderer.insights);
|
||||
|
||||
localStorage.setItem('character-position', JSON.stringify(this.character.position));
|
||||
window.requestAnimationFrame(this.gameLoop.bind(this));
|
||||
}
|
||||
|
||||
private calculateFps(deltaTime: number) {
|
||||
this.previousFpsValues.push(1000 / deltaTime);
|
||||
if (this.previousFpsValues.length > 30) {
|
||||
this.previousFpsValues.sort();
|
||||
const min = this.previousFpsValues[0];
|
||||
const median = this.previousFpsValues[
|
||||
Math.floor(this.previousFpsValues.length / 2)
|
||||
];
|
||||
|
||||
InfoText.modifyRecord('FPS', { min, median });
|
||||
|
||||
this.previousFpsValues = [];
|
||||
}
|
||||
requestAnimationFrame(this.gameLoop.bind(this));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import { Command } from '../../commands/command';
|
||||
import { IRenderer } from '../i-renderer';
|
||||
|
||||
export class BeforeRenderCommand extends Command {
|
||||
public constructor(public readonly renderer?: IRenderer) {
|
||||
super();
|
||||
}
|
||||
|
||||
public get type(): string {
|
||||
return 'BeforeRenderCommand';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { Renderer } from 'sdf-2d';
|
||||
import { Command } from '../../commands/command';
|
||||
import { IRenderer } from '../../graphics/i-renderer';
|
||||
|
||||
export class RenderCommand extends Command {
|
||||
public constructor(public readonly renderer?: IRenderer) {
|
||||
public constructor(public readonly renderer?: Renderer) {
|
||||
super();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
import { mat2d, vec2 } from 'gl-matrix';
|
||||
import { Blob } from '../../shapes/types/blob';
|
||||
import { settings } from '../settings';
|
||||
import { IDrawable } from './i-drawable';
|
||||
import { IDrawableDescriptor } from './i-drawable-descriptor';
|
||||
|
||||
export class DrawableBlob extends Blob implements IDrawable {
|
||||
public static descriptor: IDrawableDescriptor = {
|
||||
uniformName: 'blobs',
|
||||
countMacroName: 'blobCount',
|
||||
shaderCombinationSteps: settings.shaderCombinations.blobSteps,
|
||||
empty: new DrawableBlob(vec2.fromValues(0, 0)),
|
||||
};
|
||||
|
||||
public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
|
||||
const { uniformName } = DrawableBlob.descriptor;
|
||||
if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
|
||||
uniforms[uniformName] = [];
|
||||
}
|
||||
uniforms[uniformName].push({
|
||||
headCenter: vec2.transformMat2d(vec2.create(), this.head.center, transform),
|
||||
leftFootCenter: vec2.transformMat2d(vec2.create(), this.leftFoot.center, transform),
|
||||
rightFootCenter: vec2.transformMat2d(
|
||||
vec2.create(),
|
||||
this.rightFoot.center,
|
||||
transform
|
||||
),
|
||||
headRadius: this.headRadius * scale,
|
||||
footRadius: this.footRadius * scale,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import { mat2d, vec2 } from 'gl-matrix';
|
||||
import TunnelShape from '../../shapes/types/tunnel-shape';
|
||||
import { settings } from '../settings';
|
||||
import { IDrawable } from './i-drawable';
|
||||
import { IDrawableDescriptor } from './i-drawable-descriptor';
|
||||
|
||||
export class DrawableTunnel extends TunnelShape implements IDrawable {
|
||||
public static descriptor: IDrawableDescriptor = {
|
||||
uniformName: 'lines',
|
||||
countMacroName: 'lineCount',
|
||||
shaderCombinationSteps: settings.shaderCombinations.lineSteps,
|
||||
empty: new DrawableTunnel(vec2.fromValues(0, 0), vec2.fromValues(0, 0), 0, 0),
|
||||
};
|
||||
|
||||
public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
|
||||
const { uniformName } = DrawableTunnel.descriptor;
|
||||
if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
|
||||
uniforms[uniformName] = [];
|
||||
}
|
||||
|
||||
uniforms[uniformName].push({
|
||||
from: vec2.transformMat2d(vec2.create(), this.from, transform),
|
||||
toFromDelta: vec2.scale(vec2.create(), this.toFromDelta, scale),
|
||||
fromRadius: this.fromRadius * scale,
|
||||
toRadius: this.toRadius * scale,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { IDrawable } from './i-drawable';
|
||||
|
||||
export interface IDrawableDescriptor {
|
||||
uniformName: string;
|
||||
countMacroName: string;
|
||||
shaderCombinationSteps: Array<number>;
|
||||
readonly empty: IDrawable;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { vec2, mat2d } from 'gl-matrix';
|
||||
|
||||
export interface IDrawable {
|
||||
distance(target: vec2): number;
|
||||
serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void;
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { mat2d, vec2, vec3 } from 'gl-matrix';
|
||||
import { settings } from '../../settings';
|
||||
import { IDrawableDescriptor } from '../i-drawable-descriptor';
|
||||
import { ILight } from './i-light';
|
||||
|
||||
export class CircleLight implements ILight {
|
||||
public static descriptor: IDrawableDescriptor = {
|
||||
uniformName: 'circleLights',
|
||||
countMacroName: 'circleLightCount',
|
||||
shaderCombinationSteps: settings.shaderCombinations.circleLightSteps,
|
||||
empty: new CircleLight(vec2.fromValues(0, 0), 0, vec3.fromValues(0, 0, 0), 0),
|
||||
};
|
||||
|
||||
constructor(
|
||||
public center: vec2,
|
||||
public lightDrop: number,
|
||||
public color: vec3,
|
||||
public lightness: number
|
||||
) {}
|
||||
|
||||
public distance(_: vec2): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
|
||||
const { uniformName } = CircleLight.descriptor;
|
||||
|
||||
if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
|
||||
uniforms[uniformName] = [];
|
||||
}
|
||||
|
||||
uniforms[uniformName].push({
|
||||
center: vec2.transformMat2d(vec2.create(), this.center, transform),
|
||||
lightDrop: this.lightDrop,
|
||||
value: this.value,
|
||||
});
|
||||
}
|
||||
|
||||
public get value(): vec3 {
|
||||
return vec3.scale(
|
||||
vec3.create(),
|
||||
vec3.normalize(this.color, this.color),
|
||||
this.lightness
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import { mat2d, vec2, vec3 } from 'gl-matrix';
|
||||
import { settings } from '../../settings';
|
||||
import { IDrawableDescriptor } from '../i-drawable-descriptor';
|
||||
import { ILight } from './i-light';
|
||||
|
||||
export class Flashlight implements ILight {
|
||||
public static descriptor: IDrawableDescriptor = {
|
||||
uniformName: 'flashlights',
|
||||
countMacroName: 'flashlightCount',
|
||||
shaderCombinationSteps: settings.shaderCombinations.flashlightSteps,
|
||||
empty: new Flashlight(
|
||||
vec2.fromValues(0, 0),
|
||||
vec2.fromValues(0, 0),
|
||||
0,
|
||||
vec3.fromValues(0, 0, 0),
|
||||
0
|
||||
),
|
||||
};
|
||||
|
||||
public constructor(
|
||||
public center: vec2,
|
||||
public direction: vec2,
|
||||
public lightDrop: number,
|
||||
public color: vec3,
|
||||
public lightness: number
|
||||
) {}
|
||||
|
||||
public distance(_: vec2): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
|
||||
const listName = Flashlight.descriptor.uniformName;
|
||||
|
||||
if (!Object.prototype.hasOwnProperty.call(uniforms, listName)) {
|
||||
uniforms[listName] = [];
|
||||
}
|
||||
|
||||
uniforms[listName].push({
|
||||
center: vec2.transformMat2d(vec2.create(), this.center, transform),
|
||||
direction: this.direction,
|
||||
lightDrop: this.lightDrop,
|
||||
value: this.value,
|
||||
});
|
||||
}
|
||||
|
||||
public get value(): vec3 {
|
||||
return vec3.scale(vec3.create(), this.color, this.lightness);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { IDrawable } from '../i-drawable';
|
||||
|
||||
export type ILight = IDrawable;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { checkShader } from './check-shader';
|
||||
|
||||
export const checkProgram = (gl: WebGL2RenderingContext, program: WebGLProgram) => {
|
||||
const success = gl.getProgramParameter(program, gl.LINK_STATUS);
|
||||
|
||||
if (!success) {
|
||||
gl.getAttachedShaders(program).forEach((s) => {
|
||||
checkShader(gl, s);
|
||||
});
|
||||
|
||||
throw new Error(gl.getProgramInfoLog(program));
|
||||
}
|
||||
};
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export const checkShader = (gl: WebGL2RenderingContext, shader: WebGLShader) => {
|
||||
const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
|
||||
|
||||
if (!success) {
|
||||
throw new Error(gl.getShaderInfoLog(shader));
|
||||
}
|
||||
};
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { waitWhileFalse } from '../../../helper/wait-while-false';
|
||||
import { tryEnableExtension } from '../helper/enable-extension';
|
||||
import { checkProgram } from './check-program';
|
||||
import { createShader } from './create-shader';
|
||||
|
||||
export const createProgram = async (
|
||||
gl: WebGL2RenderingContext,
|
||||
vertexShaderSource: string,
|
||||
fragmentShaderSource: string,
|
||||
substitutions: { [name: string]: string }
|
||||
): Promise<WebGLProgram> => {
|
||||
const program = gl.createProgram();
|
||||
|
||||
const extension = tryEnableExtension(gl, 'KHR_parallel_shader_compile');
|
||||
|
||||
const vertexShader = createShader(
|
||||
gl,
|
||||
gl.VERTEX_SHADER,
|
||||
vertexShaderSource,
|
||||
substitutions
|
||||
);
|
||||
gl.attachShader(program, vertexShader);
|
||||
|
||||
const fragmentShader = createShader(
|
||||
gl,
|
||||
gl.FRAGMENT_SHADER,
|
||||
fragmentShaderSource,
|
||||
substitutions
|
||||
);
|
||||
gl.attachShader(program, fragmentShader);
|
||||
|
||||
gl.linkProgram(program);
|
||||
|
||||
if (extension) {
|
||||
const checkCompileStatus = () =>
|
||||
gl.getProgramParameter(program, extension.COMPLETION_STATUS_KHR);
|
||||
|
||||
await waitWhileFalse(checkCompileStatus);
|
||||
}
|
||||
|
||||
checkProgram(gl, program);
|
||||
|
||||
return program;
|
||||
};
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
export const createShader = (
|
||||
gl: WebGL2RenderingContext,
|
||||
type: GLenum,
|
||||
source: string,
|
||||
substitutions: { [name: string]: string }
|
||||
): WebGLShader => {
|
||||
source = source.replace(/{(.+)}/gm, (_, name: string): string => {
|
||||
const value = substitutions[name];
|
||||
return Number.isInteger(value) ? `${value}.0` : value;
|
||||
});
|
||||
|
||||
const shader = gl.createShader(type);
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
|
||||
return shader;
|
||||
};
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { FrameBuffer } from './frame-buffer';
|
||||
|
||||
export class DefaultFrameBuffer extends FrameBuffer {
|
||||
constructor(gl: WebGL2RenderingContext) {
|
||||
super(gl);
|
||||
this.frameBuffer = null;
|
||||
this.setSize();
|
||||
}
|
||||
|
||||
public setSize(): boolean {
|
||||
const hasChanged = super.setSize();
|
||||
if (hasChanged) {
|
||||
this.gl.canvas.width = this.size.x;
|
||||
this.gl.canvas.height = this.size.y;
|
||||
}
|
||||
|
||||
return hasChanged;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { vec2 } from 'gl-matrix';
|
||||
import { settings } from '../../settings';
|
||||
|
||||
export abstract class FrameBuffer {
|
||||
public renderScale = 1;
|
||||
public enableHighDpiRendering = settings.enableHighDpiRendering;
|
||||
|
||||
protected size = vec2.create();
|
||||
protected frameBuffer: WebGLFramebuffer;
|
||||
|
||||
constructor(protected gl: WebGL2RenderingContext) {}
|
||||
|
||||
public bindAndClear(colorInput?: WebGLTexture) {
|
||||
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
|
||||
|
||||
if (colorInput !== null) {
|
||||
this.gl.bindTexture(this.gl.TEXTURE_2D, colorInput);
|
||||
}
|
||||
|
||||
this.gl.viewport(0, 0, this.size.x, this.size.y);
|
||||
this.gl.clearColor(0, 0, 0, 0);
|
||||
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
|
||||
}
|
||||
|
||||
public setSize(): boolean {
|
||||
const realToCssPixels =
|
||||
(this.enableHighDpiRendering ? window.devicePixelRatio : 1) * this.renderScale;
|
||||
|
||||
const canvasWidth = (this.gl.canvas as HTMLCanvasElement).clientWidth;
|
||||
const canvasHeight = (this.gl.canvas as HTMLCanvasElement).clientHeight;
|
||||
|
||||
const displayWidth = Math.floor(canvasWidth * realToCssPixels);
|
||||
const displayHeight = Math.floor(canvasHeight * realToCssPixels);
|
||||
|
||||
const oldSize = vec2.clone(this.getSize());
|
||||
this.size = vec2.fromValues(displayWidth, displayHeight);
|
||||
|
||||
return this.size.x != oldSize.x || this.size.y != oldSize.y;
|
||||
}
|
||||
|
||||
public getSize(): vec2 {
|
||||
return this.size;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import { enableExtension } from '../helper/enable-extension';
|
||||
import { FrameBuffer } from './frame-buffer';
|
||||
|
||||
export class IntermediateFrameBuffer extends FrameBuffer {
|
||||
private frameTexture: WebGLTexture;
|
||||
private floatLinearEnabled = false;
|
||||
|
||||
constructor(gl: WebGL2RenderingContext) {
|
||||
super(gl);
|
||||
|
||||
enableExtension(gl, 'EXT_color_buffer_float');
|
||||
|
||||
try {
|
||||
enableExtension(gl, 'OES_texture_float_linear');
|
||||
this.floatLinearEnabled = true;
|
||||
} catch {
|
||||
// it's okay
|
||||
}
|
||||
|
||||
this.frameTexture = this.gl.createTexture();
|
||||
this.configureTexture();
|
||||
|
||||
this.frameBuffer = this.gl.createFramebuffer();
|
||||
this.configureFrameBuffer();
|
||||
|
||||
this.setSize();
|
||||
}
|
||||
|
||||
public get colorTexture(): WebGLTexture {
|
||||
return this.frameTexture;
|
||||
}
|
||||
|
||||
public setSize(): boolean {
|
||||
const hasChanged = super.setSize();
|
||||
if (hasChanged) {
|
||||
this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
|
||||
|
||||
this.gl.texImage2D(
|
||||
this.gl.TEXTURE_2D,
|
||||
0,
|
||||
this.gl.RG16F,
|
||||
this.size.x,
|
||||
this.size.y,
|
||||
0,
|
||||
this.gl.RG,
|
||||
this.gl.FLOAT,
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
return hasChanged;
|
||||
}
|
||||
|
||||
private configureTexture() {
|
||||
this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
|
||||
this.gl.texParameteri(
|
||||
this.gl.TEXTURE_2D,
|
||||
this.gl.TEXTURE_MAG_FILTER,
|
||||
this.floatLinearEnabled ? this.gl.LINEAR : this.gl.NEAREST
|
||||
);
|
||||
this.gl.texParameteri(
|
||||
this.gl.TEXTURE_2D,
|
||||
this.gl.TEXTURE_MIN_FILTER,
|
||||
this.floatLinearEnabled ? this.gl.LINEAR : this.gl.NEAREST
|
||||
);
|
||||
this.gl.texParameteri(
|
||||
this.gl.TEXTURE_2D,
|
||||
this.gl.TEXTURE_WRAP_S,
|
||||
this.gl.CLAMP_TO_EDGE
|
||||
);
|
||||
this.gl.texParameteri(
|
||||
this.gl.TEXTURE_2D,
|
||||
this.gl.TEXTURE_WRAP_T,
|
||||
this.gl.CLAMP_TO_EDGE
|
||||
);
|
||||
}
|
||||
|
||||
private configureFrameBuffer() {
|
||||
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
|
||||
const attachmentPoint = this.gl.COLOR_ATTACHMENT0;
|
||||
this.gl.framebufferTexture2D(
|
||||
this.gl.FRAMEBUFFER,
|
||||
attachmentPoint,
|
||||
this.gl.TEXTURE_2D,
|
||||
this.frameTexture,
|
||||
0
|
||||
);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue