renati/oktaeder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update readme, example project, fix runtime errors

Browse Source
This commit is contained in:
Szymon Nowakowski
2023-08-15 22:18:08 +02:00
parent 5002138070
commit e26be8ee09
23 changed files with 441 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/_BinaryWriter.ts
View File

@@ -53,18 +53,20 @@ export class _BinaryWriter {
}
ensureUnusedCapacity(desiredUnusedCapacity: number): _BinaryWriter {
return this.ensureCapacity(this._buffer.byteLength + desiredUnusedCapacity);
return this.ensureCapacity(this._length + desiredUnusedCapacity);
}
writeU32(value: number): _BinaryWriter {
this.ensureUnusedCapacity(4);
this._dataView.setUint32(this._length, value, true);
this._length += 4;
return this;
}
writeF32(value: number): _BinaryWriter {
this.ensureUnusedCapacity(4);
this._dataView.setFloat32(this._length, value, true);
this._length += 4;
return this;
}
@@ -116,6 +118,19 @@ export class _BinaryWriter {
return this;
}
padToAlign(alignment: number): _BinaryWriter {
const alignedLength = (this._length + alignment - 1) & ~(alignment - 1);
const padding = alignedLength - this._length;
if (padding === 0) {
return this;
}
this.ensureUnusedCapacity(padding);
this._typedArray.fill(0, this._length, alignedLength);
this._length = alignedLength;
return this;
}
alloc(byteLength: number): DataView {
this.ensureUnusedCapacity(byteLength);
const dataView = new DataView(this._buffer, this._length, byteLength);

4
src/data/Camera.ts
View File

@@ -26,7 +26,7 @@ export interface PerspectiveCameraProps {
export class OrthographicCamera {
readonly type!: "OrthographicCamera";
declare readonly type: "OrthographicCamera";
_name: string;
@@ -101,7 +101,7 @@ export class OrthographicCamera {
export class PerspectiveCamera {
readonly type!: "PerspectiveCamera";
declare readonly type: "PerspectiveCamera";
_name: string;

2
src/data/Color.ts
View File

@@ -56,7 +56,7 @@ export type ColorTuple = readonly [r: number, g: number, b: number];
export class Color {
readonly type!: "Color";
declare readonly type: "Color";
r: number;
g: number;

4
src/data/Light.ts
View File

@@ -22,7 +22,7 @@ export interface PointLightProps {
export class DirectionalLight {
readonly type!: "DirectionalLight";
get type(): "DirectionalLight" {};
_name: string;
@@ -81,7 +81,7 @@ export class DirectionalLight {
export class PointLight {
readonly type!: "PointLight";
declare readonly type: "PointLight";
_name: string;

2
src/data/Material.ts
View File

@@ -34,7 +34,7 @@ export interface MaterialProps {
export class Material {
readonly type!: "Material";
declare readonly type: "Material";
_name: string;

2
src/data/Matrix4x4.ts
View File

@@ -34,7 +34,7 @@ export type Matrix4x4Tuple = readonly [
export class Matrix4x4 {
readonly type!: "Matrix4x4";
declare readonly type: "Matrix4x4";
ix: number;
iy: number;

2
src/data/Node.ts
View File

@@ -23,7 +23,7 @@ export interface NodeProps {
export class Node {
readonly type!: "Node";
declare readonly type: "Node";
_name: string;

2
src/data/Quaternion.ts
View File

@@ -15,7 +15,7 @@ export type QuaternionTuple = readonly [x: number, y: number, z: number, w: numb
export class Quaternion {
readonly type!: "Quaternion";
declare readonly type: "Quaternion";
x: number;
y: number;

2
src/data/Scene.ts
View File

@@ -16,7 +16,7 @@ export interface SceneProps {
export class Scene {
readonly type!: "Scene";
declare readonly type: "Scene";
_name: string;

2
src/data/Vector2.ts
View File

@@ -13,7 +13,7 @@ export type Vector2Tuple = readonly [x: number, y: number];
export class Vector2 {
readonly type!: "Vector2";
declare readonly type: "Vector2";
x: number;
y: number;

2
src/data/Vector3.ts
View File

@@ -14,7 +14,7 @@ export type Vector3Tuple = readonly [x: number, y: number, z: number];
export class Vector3 {
readonly type!: "Vector3";
declare readonly type: "Vector3";
x: number;
y: number;

2
src/data/Vector4.ts
View File

@@ -15,7 +15,7 @@ export type Vector4Tuple = readonly [x: number, y: number, z: number, w: number]
export class Vector4 {
readonly type!: "Vector4";
declare readonly type: "Vector4";
x: number;
y: number;

34
src/oktaeder.ts
View File

@@ -11,7 +11,7 @@ import { _BinaryWriter as BinaryWriter } from "./_BinaryWriter";
import { _Mapping as Mapping } from "./_Mapping";
import { Camera, Material, Matrix4x4, Node, Scene, Vector3, isDirectionalLight, isPointLight, preOrder } from "./data";
import { IndexBuffer, IndexBufferProps, Texture2D, Texture2DProps, VertexBuffer, VertexBufferProps } from "./resources";
import { ShaderFlagKey, ShaderFlags, createPipeline, shaderFlagsKey } from "./shader";
import { GLOBAL_UNIFORMS_SIZE, MATERIAL_UNIFORMS_SIZE, OBJECT_UNIFORMS_SIZE, ShaderFlagKey, ShaderFlags, _createPipeline, _shaderFlagsKey } from "./shader";
const _matrixOStoWSNormal = new Matrix4x4(
NaN, NaN, NaN, NaN,
@@ -117,6 +117,7 @@ export class Renderer {
width: framebufferTexture.width,
height: framebufferTexture.height,
format: "depth",
usage: GPUTextureUsage.RENDER_ATTACHMENT,
});
this._globalBindGroupLayout = device.createBindGroupLayout({
@@ -266,7 +267,7 @@ export class Renderer {
this._globalBindGroup = device.createBindGroup({
layout: this._globalBindGroupLayout,
entries: [
{ binding: 0, resource: { buffer: this._uniformBuffer } },
{ binding: 0, resource: { buffer: this._uniformBuffer, size: GLOBAL_UNIFORMS_SIZE } },
{ binding: 1, resource: { buffer: this._pointLightBuffer } },
{ binding: 2, resource: { buffer: this._directionalLightBuffer } },
],
@@ -275,7 +276,7 @@ export class Renderer {
this._objectBindGroup = device.createBindGroup({
layout: this._objectBindGroupLayout,
entries: [
{ binding: 0, resource: { buffer: this._uniformBuffer } },
{ binding: 0, resource: { buffer: this._uniformBuffer, size: OBJECT_UNIFORMS_SIZE } },
],
label: "Object",
});
@@ -336,14 +337,14 @@ export class Renderer {
}
_getOrCreatePipeline(flags: ShaderFlags): GPURenderPipeline {
const key = shaderFlagsKey(flags);
const key = _shaderFlagsKey(flags);
let pipeline = this._pipelineCache.get(key);
if (pipeline !== undefined) {
return pipeline;
}
pipeline = createPipeline(this, flags);
pipeline = _createPipeline(this, flags);
this._pipelineCache.set(key, pipeline);
return pipeline;
}
@@ -401,11 +402,12 @@ export class Renderer {
this._uniformWriter.writeF32(material._normalScale);
this._uniformWriter.writeColorF32(material._emissive);
this._uniformWriter.writeF32(material._ior);
this._uniformWriter.padToAlign(256);
const bindGroup = this._device.createBindGroup({
layout: this._materialBindGroupLayout,
entries: [
{ binding: 0, resource: { buffer: this._uniformBuffer } },
{ binding: 0, resource: { buffer: this._uniformBuffer, size: MATERIAL_UNIFORMS_SIZE } },
{ binding: 1, resource: this._sampler },
{ binding: 2, resource: material._baseColorPartialCoverageTexture?._textureView ?? this._textureWhite._textureView },
{ binding: 3, resource: material._occlusionTexture?._textureView ?? this._textureWhite._textureView },
@@ -433,6 +435,7 @@ export class Renderer {
object._updateWorldMatrix();
this._uniformWriter.writeMatrix4x4(object._worldMatrix);
this._uniformWriter.writeMatrix4x4(_matrixOStoWSNormal.setObject(object._worldMatrix).inverseTransposeAffine());
this._uniformWriter.padToAlign(256);
return offset;
});
@@ -491,9 +494,7 @@ export class Renderer {
this._uniformWriter.writeColorF32(scene._ambientLight);
this._uniformWriter.writeU32(pointLightCount);
this._uniformWriter.writeU32(directionalLightCount);
this._uniformWriter.writeU32(0);
this._uniformWriter.writeU32(0);
this._uniformWriter.writeU32(0);
this._uniformWriter.padToAlign(256);
// upload uniforms
@@ -520,11 +521,18 @@ export class Renderer {
pass.setPipeline(renderPipeline);
/* WORKAROUND
*
* As of writing, Chrome doesn't support passing null as the second
* argument. We could (and should) bind the buffers unconditionally
* for increased safety. For now, we only do this when they are not
* null.
*/
pass.setVertexBuffer(0, vertexBuffer._positionBuffer);
pass.setVertexBuffer(1, vertexBuffer._texCoordBuffer);
pass.setVertexBuffer(2, vertexBuffer._lightTexCoordBuffer);
pass.setVertexBuffer(3, vertexBuffer._normalBuffer);
pass.setVertexBuffer(4, vertexBuffer._tangentBuffer);
if (vertexBuffer._texCoordBuffer !== null) pass.setVertexBuffer(1, vertexBuffer._texCoordBuffer);
if (vertexBuffer._lightTexCoordBuffer !== null) pass.setVertexBuffer(2, vertexBuffer._lightTexCoordBuffer);
if (vertexBuffer._normalBuffer !== null) pass.setVertexBuffer(3, vertexBuffer._normalBuffer);
if (vertexBuffer._tangentBuffer !== null) pass.setVertexBuffer(4, vertexBuffer._tangentBuffer);
pass.setIndexBuffer(indexBuffer._buffer, indexBuffer._indexFormat);
pass.setBindGroup(2, this._objectBindGroup, [objectOffset]);

2
src/resources/IndexBuffer.ts
View File

@@ -20,7 +20,7 @@ export interface IndexBufferResizeProps {
export class IndexBuffer {
readonly type!: "IndexBuffer";
declare readonly type: "IndexBuffer";
_renderer: Renderer;
_name: string;

11
src/resources/Texture2D.ts
View File

@@ -21,12 +21,15 @@ export interface Texture2DProps {
readonly height: number;
readonly format: Texture2DFormat;
readonly usage?: GPUTextureUsageFlags;
}
export interface Texture2DResizeProps {
readonly width?: number;
readonly height?: number;
readonly format?: Texture2DFormat;
readonly usage?: GPUTextureUsageFlags;
}
export interface Texture2DAdvancedWriteProps {
@@ -39,7 +42,7 @@ export interface Texture2DAdvancedWriteProps {
export class Texture2D {
readonly type!: "Texture2D";
declare readonly type: "Texture2D";
_renderer: Renderer;
_name: string;
@@ -53,6 +56,7 @@ export class Texture2D {
width,
height,
format,
usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
}: Texture2DProps) {
this._renderer = renderer;
@@ -62,7 +66,7 @@ export class Texture2D {
this._renderer = renderer;
this._texture = renderer._device.createTexture({
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
usage,
size: { width, height },
format: gpuFormat,
label: name
@@ -147,13 +151,14 @@ export class Texture2D {
width = this._texture.width,
height = this._texture.height,
format = this._format,
usage = this._texture.usage,
}: Texture2DResizeProps): Texture2D {
this._texture.destroy();
const gpuFormat = gpuTextureFormat(format);
this._texture = this._renderer._device.createTexture({
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
usage,
size: { width, height },
format: gpuFormat,
label: this._name

2
src/resources/VertexBuffer.ts
View File

@@ -51,7 +51,7 @@ export interface VertexBufferWriteTypedArrayProps {
export class VertexBuffer {
readonly type!: "VertexBuffer";
declare readonly type: "VertexBuffer";
_renderer: Renderer;
_name: string;

28
src/shader.ts
View File

@@ -6,6 +6,13 @@
import { Renderer } from "./oktaeder";
// 152 bytes padded to 256
export const GLOBAL_UNIFORMS_SIZE = 256;
// 64 bytes padded to 256
export const MATERIAL_UNIFORMS_SIZE = 256;
// 128 bytes padded to 256
export const OBJECT_UNIFORMS_SIZE = 256;
export type ShaderFlagKey = number;
export interface ShaderFlags {
@@ -15,7 +22,7 @@ export interface ShaderFlags {
readonly tangent: boolean;
}
export function shaderFlagsKey({
export function _shaderFlagsKey({
texCoord,
lightTexCoord,
normal,
@@ -29,13 +36,13 @@ export function shaderFlagsKey({
return key;
}
export function createPipeline(renderer: Renderer, {
export function _createPipeline(renderer: Renderer, {
texCoord,
lightTexCoord,
normal,
tangent,
}: ShaderFlags): GPURenderPipeline {
const shaderCode = createShaderCode({ texCoord, lightTexCoord, normal, tangent });
const shaderCode = _createShaderCode({ texCoord, lightTexCoord, normal, tangent });
const shaderModule = renderer._device.createShaderModule({
code: shaderCode,
@@ -130,7 +137,7 @@ export function createPipeline(renderer: Renderer, {
return pipeline;
}
export function createShaderCode({
export function _createShaderCode({
texCoord,
lightTexCoord,
normal,
@@ -147,7 +154,7 @@ struct Vertex {
struct Varyings {
@builtin(position) positionCS: vec4<f32>,
@location(0) positionVS: vec4<f32>,
@location(0) positionVS: vec3<f32>,
${texCoord ? `@location(1) texCoord: vec2<f32>,` : ""}
${lightTexCoord ? `@location(2) lightTexCoord: vec2<f32>,` : ""}
${normal ? `@location(3) normalVS: vec3<f32>,` : ""}
@@ -219,7 +226,7 @@ fn visibilityGGX(dotNL: f32, dotNV: f32, alpha: f32) -> f32 {
let vGGX = dotNL * sqrt(dotNV * dotNV * (1.0 - alphaSquared) + alphaSquared);
let lGGX = dotNV * sqrt(dotNL * dotNL * (1.0 - alphaSquared) + alphaSquared);
let GGX = vGGX + lGGX;
return GGX > 0.0 ? 0.5 / GGX : 0.0;
return select(0.0, 0.5 / GGX, GGX > 0.0);
}
fn distributionGGX(dotNH: f32, alpha: f32) -> f32 {
@@ -270,7 +277,7 @@ fn screenSpaceMatrixTStoVS(positionVS: vec3<f32>, normalVS: vec3<f32>, texCoord:
let bitangentVS = q1perp * uv0.y + q0perp * uv1.y;
let det = max(dot(tangentVS, tangentVS), dot(bitangentVS, bitangentVS));
let scale = (det == 0.0) ? 0.0 : inserseSqrt(det);
let scale = select(0.0, inverseSqrt(det), det != 0.0);
return mat3x3(tangentVS * scale, bitangentVS * scale, normalVS);
}
@@ -297,10 +304,11 @@ fn vert(vertex: Vertex) -> Varyings {
` : ""}
${texCoord ? "output.texCoord = vertex.texCoord;" : ""}
${lightTexCoord ? "output.lightTexCoord = vertex.lightTexCoord;" : ""}
return output;
}
@fragment
fn frag(fragment: Varyings) -> @location(0) vec2<f32> {
fn frag(fragment: Varyings) -> @location(0) vec4<f32> {
var baseColor = _Material.baseColor;
var partialCoverage = _Material.partialCoverage;
var occlusion = 1.0;
@@ -357,7 +365,7 @@ fn frag(fragment: Varyings) -> @location(0) vec2<f32> {
var outgoingRadiance = vec3(0.0);
for (var i: u32 = 0; i < _Global.pointLightCount; ++i) {
for (var i: u32 = 0; i < _Global.pointLightCount; i++) {
let light = _PointLights[i];
let lightPositionVS = (_Global.matrixWStoVS * vec4(light.positionWS, 1.0)).xyz;
@@ -373,7 +381,7 @@ fn frag(fragment: Varyings) -> @location(0) vec2<f32> {
);
}
for (var i: u32 = 0; i < _Global.directionalLightCount; ++i) {
for (var i: u32 = 0; i < _Global.directionalLightCount; i++) {
let light = _DirectionalLights[i];
let lightDirectionVS = normalize((_Global.matrixWStoVS * vec4(light.directionWS, 0.0)).xyz);