Skip to content

Commit

Permalink
fix vr
Browse files Browse the repository at this point in the history
  • Loading branch information
@plojo
plojo committed May 2, 2024
1 parent 6b3d66d commit 6809ba9
Show file tree
Hide file tree
Showing 26 changed files with 509 additions and 426 deletions.
18 changes: 11 additions & 7 deletions Core/Build/FudgeCore.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1139,8 +1139,9 @@ declare namespace FudgeCore {
protected static ƒpicked: Pick[];
private static rectRender;
private static sizePick;
private static framebufferMain;
private static framebufferPost;
private static fboMain;
private static fboPost;
private static fboTarget;
private static texColor;
private static texPosition;
private static texNormal;
Expand Down Expand Up @@ -1183,6 +1184,11 @@ declare namespace FudgeCore {
* Clear the offscreen renderbuffer with the given {@link Color}
*/
static clear(_color?: Color): void;
/**
* Set the final framebuffer to render to. If null, the canvas default framebuffer is used.
* Used by XR to render to the XRWebGLLayer framebuffer.
*/
static setFramebufferTarget(_buffer: WebGLFramebuffer): void;
/**
* Reset the framebuffer to the main color buffer.
*/
Expand All @@ -1198,7 +1204,7 @@ declare namespace FudgeCore {
/**
* Enable / Disable WebGLs scissor test.
*/
static setScissorTest(_test: boolean, _x: number, _y: number, _width: number, _height: number): void;
static setScissorTest(_test: boolean, _x?: number, _y?: number, _width?: number, _height?: number): void;
/**
* Set WebGLs viewport.
*/
Expand Down Expand Up @@ -2769,19 +2775,17 @@ declare namespace FudgeCore {
/**
* Sets a Vector3 as Position of the reference space.
*/
set translation(_newPos: Vector3);
set translation(_translation: Vector3);
/**
* Sets Vector3 Rotation of the reference space.
* Rotation needs to be set in the Origin (0,0,0), otherwise the XR-Rig gets rotated around the origin.
*/
set rotation(_newRot: Vector3);
set rotation(_rotation: Vector3);
/**
* Adds a Vector3 in Position of the reference space.
*/
translate(_by: Vector3): void;
/**
* Adds a Vector3 in Rotation of the reference space.
* Rotation needs to be added in the Origin (0,0,0), otherwise the XR-Rig gets rotated around the origin.
*/
rotate(_by: Vector3): void;
private getMtxLocalFromCmpTransform;
Expand Down
134 changes: 80 additions & 54 deletions Core/Build/FudgeCore.js
View file

Large diffs are not rendered by default.

61 changes: 34 additions & 27 deletions Core/Source/Component/ComponentVRDevice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,60 +37,67 @@ namespace FudgeCore {
/**
* Sets a Vector3 as Position of the reference space.
*/
public set translation(_newPos: Vector3) {
let invTranslation: Vector3 = Vector3.SCALE(Vector3.DIFFERENCE(_newPos, this.#mtxLocal.translation), -1);
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(invTranslation));
this.#mtxLocal.translation = _newPos;
public set translation(_translation: Vector3) {
let translation: Vector3 = _translation.clone;
translation.subtract(this.#mtxLocal.translation);
translation.negate();
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(translation));
this.#mtxLocal.translation = _translation;
Recycler.store(translation);
}

/**
* Sets Vector3 Rotation of the reference space.
* Rotation needs to be set in the Origin (0,0,0), otherwise the XR-Rig gets rotated around the origin.
*/
public set rotation(_newRot: Vector3) {
let newRot: Vector3 = Vector3.SCALE(Vector3.SCALE(Vector3.SUM(_newRot, this.#mtxLocal.rotation), -1), Math.PI / 180);

public set rotation(_rotation: Vector3) {
let rotation: Vector3 = _rotation.clone;
rotation.subtract(this.#mtxLocal.rotation);
rotation.negate();
let orientation: Quaternion = new Quaternion();
orientation.eulerAngles = newRot;
//set xr - rig back to origin
orientation.eulerAngles = rotation;
// Rotation needs to be set in the Origin (0,0,0), otherwise the XR-Rig gets rotated around the origin.
// set xr - rig back to origin
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(Vector3.DIFFERENCE(this.#mtxLocal.translation, Vector3.ZERO())));
//rotate xr rig in origin
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(Vector3.ZERO(), <DOMPointInit><unknown>orientation));
//set xr - rig back to last position
// rotate xr rig in origin
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(Vector3.ZERO(), orientation));
// set xr - rig back to last position
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(Vector3.DIFFERENCE(Vector3.ZERO(), this.#mtxLocal.translation)));
this.#mtxLocal.rotation = Vector3.SCALE(_newRot, -1);
this.#mtxLocal.rotation = _rotation;
Recycler.store(rotation);
}

/**
* Adds a Vector3 in Position of the reference space.
*/
public translate(_by: Vector3): void {
let invTranslation: Vector3 = Vector3.SCALE(_by, -1);
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(invTranslation));
let translation: Vector3 = _by.clone;
translation.transform(this.#mtxLocal.quaternion);
translation.negate();
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(translation));
this.#mtxLocal.translate(_by);
Recycler.store(translation);
}

/**
* Adds a Vector3 in Rotation of the reference space.
* Rotation needs to be added in the Origin (0,0,0), otherwise the XR-Rig gets rotated around the origin.
*/
public rotate(_by: Vector3): void {
let rotAmount: Vector3 = Vector3.SCALE(Vector3.SCALE(_by, -1), Math.PI / 180);

let rotation: Vector3 = _by.clone.negate();
let orientation: Quaternion = new Quaternion();
orientation.eulerAngles = rotAmount;
//set xr - rig back to origin
orientation.eulerAngles = rotation;
// Rotation needs to be added in the Origin (0,0,0), otherwise the XR-Rig gets rotated around the origin.
// set xr - rig back to origin
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(Vector3.DIFFERENCE(this.#mtxLocal.translation, Vector3.ZERO())));
//rotate xr rig in origin
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(Vector3.ZERO(), <DOMPointInit><unknown>orientation));
//set xr - rig back to last position
// rotate xr rig in origin
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(Vector3.ZERO(), orientation));
// set xr - rig back to last position
XRViewport.default.referenceSpace = XRViewport.default.referenceSpace.getOffsetReferenceSpace(new XRRigidTransform(Vector3.DIFFERENCE(Vector3.ZERO(), this.#mtxLocal.translation)));
this.#mtxLocal.rotate(Vector3.SCALE(_by, -1));
this.#mtxLocal.rotate(_by);
Recycler.store(rotation);
}

private getMtxLocalFromCmpTransform(): void {
this.#mtxLocal = this.node.getComponent(ComponentTransform).mtxLocal;

this.#mtxLocal = this.node.mtxLocal;
}
}
}
Expand Down
7 changes: 6 additions & 1 deletion Core/Source/Math/Vector3.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,20 +325,23 @@ namespace FudgeCore {
*/
public add(_addend: Vector3): void {
this.data.set([_addend.x + this.x, _addend.y + this.y, _addend.z + this.z]);
// this.x += _addend.x; this.y += _addend.y; this.z += _addend.z;
}

/**
* Subtracts the given vector from this
*/
public subtract(_subtrahend: Vector3): void {
this.data.set([this.x - _subtrahend.x, this.y - _subtrahend.y, this.z - _subtrahend.z]);
// this.x -= _subtrahend.x; this.y -= _subtrahend.y; this.z -= _subtrahend.z;
}

/**
* Scales this vector by the given scalar
*/
public scale(_scalar: number): void {
this.data.set([_scalar * this.x, _scalar * this.y, _scalar * this.z]);
// this.x *= _scalar; this.y *= _scalar; this.z *= _scalar;
}

/**
Expand All @@ -352,7 +355,9 @@ namespace FudgeCore {
* Negates this vector by flipping the signs of its components
*/
public negate(): Vector3 {
this.data.set([-this.x, -this.y, -this.z]);
// this.data.set([-this.x, -this.y, -this.z]);
// TODO: check if index-access is faster than set, as set needs to create a new array
this.x = -this.x; this.y = -this.y; this.z = -this.z;
return this;
}

Expand Down
42 changes: 26 additions & 16 deletions Core/Source/Render/RenderWebGL.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,9 @@ namespace FudgeCore {
private static rectRender: Rectangle = RenderWebGL.getCanvasRect();
private static sizePick: number;

private static framebufferMain: WebGLFramebuffer; // used for forward rendering passes, e.g. opaque and transparent objects
private static framebufferPost: WebGLFramebuffer; // used for post-processing effects, attachments get swapped for different effects
private static fboMain: WebGLFramebuffer; // used for forward rendering passes, e.g. opaque and transparent objects
private static fboPost: WebGLFramebuffer; // used for post-processing effects, attachments get swapped for different effects
private static fboTarget: WebGLFramebuffer; // used to render the final image to, usually "null" to render to the canvas default framebuffer. Used by XR to render to the XRWebGLLayer framebuffer.

private static texColor: WebGLTexture; // stores the color of each pixel rendered
private static texPosition: WebGLTexture; // stores the position of each pixel in world space
Expand All @@ -91,7 +92,7 @@ namespace FudgeCore {
let contextAttributes: WebGLContextAttributes = { // TODO:
alpha: (_alpha != undefined) ? _alpha : fudgeConfig.alpha || false,
antialias: false,
premultipliedAlpha: false,
premultipliedAlpha: false,
stencil: true
};
Debug.fudge("Initialize RenderWebGL", contextAttributes);
Expand Down Expand Up @@ -175,11 +176,19 @@ namespace FudgeCore {
RenderWebGL.crc3.clear(WebGL2RenderingContext.COLOR_BUFFER_BIT | WebGL2RenderingContext.DEPTH_BUFFER_BIT | WebGL2RenderingContext.STENCIL_BUFFER_BIT);
}

/**
* Set the final framebuffer to render to. If null, the canvas default framebuffer is used.
* Used by XR to render to the XRWebGLLayer framebuffer.
*/
public static setFramebufferTarget(_buffer: WebGLFramebuffer): void {
RenderWebGL.fboTarget = _buffer;
}

/**
* Reset the framebuffer to the main color buffer.
*/
public static resetFramebuffer(): void {
RenderWebGL.crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.framebufferMain);
RenderWebGL.crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.fboMain);
}

/**
Expand All @@ -202,7 +211,7 @@ namespace FudgeCore {
/**
* Enable / Disable WebGLs scissor test.
*/
public static setScissorTest(_test: boolean, _x: number, _y: number, _width: number, _height: number): void {
public static setScissorTest(_test: boolean, _x?: number, _y?: number, _width?: number, _height?: number): void {
if (_test)
RenderWebGL.crc3.enable(WebGL2RenderingContext.SCISSOR_TEST);
else
Expand Down Expand Up @@ -257,7 +266,7 @@ namespace FudgeCore {
public static pointRenderToWorld(_render: Vector2): Vector3 {
const crc3: WebGL2RenderingContext = RenderWebGL.getRenderingContext();
const data: Float32Array = new Float32Array(4);
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.framebufferMain);
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.fboMain);
crc3.readBuffer(WebGL2RenderingContext.COLOR_ATTACHMENT1);
crc3.readPixels(_render.x, RenderWebGL.rectRender.height - _render.y, 1, 1, crc3.RGBA, crc3.FLOAT, data);
crc3.readBuffer(WebGL2RenderingContext.COLOR_ATTACHMENT0);
Expand All @@ -272,8 +281,9 @@ namespace FudgeCore {
public static initializeAttachments(): void {
RenderWebGL.crc3.getExtension("EXT_color_buffer_float"); // TODO: disable ssao if not supported

RenderWebGL.framebufferMain = RenderWebGL.assert<WebGLFramebuffer>(RenderWebGL.crc3.createFramebuffer());
RenderWebGL.framebufferPost = RenderWebGL.assert<WebGLFramebuffer>(RenderWebGL.crc3.createFramebuffer());
RenderWebGL.fboMain = RenderWebGL.assert<WebGLFramebuffer>(RenderWebGL.crc3.createFramebuffer());
RenderWebGL.fboPost = RenderWebGL.assert<WebGLFramebuffer>(RenderWebGL.crc3.createFramebuffer());
RenderWebGL.fboTarget = null;

RenderWebGL.texColor = createTexture(WebGL2RenderingContext.NEAREST, WebGL2RenderingContext.CLAMP_TO_EDGE);
RenderWebGL.texPosition = createTexture(WebGL2RenderingContext.NEAREST, WebGL2RenderingContext.CLAMP_TO_EDGE);
Expand Down Expand Up @@ -322,7 +332,7 @@ namespace FudgeCore {
crc3.bindTexture(WebGL2RenderingContext.TEXTURE_2D, RenderWebGL.texDepthStencil);
crc3.texImage2D(WebGL2RenderingContext.TEXTURE_2D, 0, WebGL2RenderingContext.DEPTH24_STENCIL8, width, height, 0, WebGL2RenderingContext.DEPTH_STENCIL, WebGL2RenderingContext.UNSIGNED_INT_24_8, null);

crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.framebufferMain);
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.fboMain);
crc3.framebufferTexture2D(WebGL2RenderingContext.FRAMEBUFFER, WebGL2RenderingContext.COLOR_ATTACHMENT0, WebGL2RenderingContext.TEXTURE_2D, RenderWebGL.texColor, 0);
crc3.framebufferTexture2D(WebGL2RenderingContext.FRAMEBUFFER, WebGL2RenderingContext.COLOR_ATTACHMENT1, WebGL2RenderingContext.TEXTURE_2D, RenderWebGL.texPosition, 0);
crc3.framebufferTexture2D(WebGL2RenderingContext.FRAMEBUFFER, WebGL2RenderingContext.COLOR_ATTACHMENT2, WebGL2RenderingContext.TEXTURE_2D, RenderWebGL.texNormal, 0);
Expand Down Expand Up @@ -588,7 +598,7 @@ namespace FudgeCore {
// opaque pass
// TODO: think about disabling blending for all opaque objects, this might improve performance
// as otherwise the 3 color attachments (color, position and normals) all need to be blended
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.framebufferMain);
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.fboMain);
crc3.drawBuffers(cmpAmbientOcclusion?.isActive ? // only use position and normal textures if ambient occlusion is active
[WebGL2RenderingContext.COLOR_ATTACHMENT0, WebGL2RenderingContext.COLOR_ATTACHMENT1, WebGL2RenderingContext.COLOR_ATTACHMENT2] :
[WebGL2RenderingContext.COLOR_ATTACHMENT0]
Expand All @@ -609,7 +619,7 @@ namespace FudgeCore {
RenderWebGL.drawBloom(cmpBloom);

// transparent pass TODO: think about disabling depth write for all transparent objects -> this might make depth mask option in component particle system obsolete
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.framebufferMain);
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.fboMain);
crc3.drawBuffers([WebGL2RenderingContext.COLOR_ATTACHMENT0]);

// crc3.depthMask(false);
Expand All @@ -618,8 +628,8 @@ namespace FudgeCore {
// crc3.depthMask(true);

// copy framebuffer to canvas
crc3.bindFramebuffer(WebGL2RenderingContext.READ_FRAMEBUFFER, RenderWebGL.framebufferMain);
crc3.bindFramebuffer(WebGL2RenderingContext.DRAW_FRAMEBUFFER, null);
crc3.bindFramebuffer(WebGL2RenderingContext.READ_FRAMEBUFFER, RenderWebGL.fboMain);
crc3.bindFramebuffer(WebGL2RenderingContext.DRAW_FRAMEBUFFER, RenderWebGL.fboTarget);
crc3.blitFramebuffer(0, 0, crc3.canvas.width, crc3.canvas.height, 0, 0, crc3.canvas.width, crc3.canvas.height, WebGL2RenderingContext.COLOR_BUFFER_BIT | WebGL2RenderingContext.DEPTH_BUFFER_BIT, WebGL2RenderingContext.NEAREST);
}

Expand All @@ -644,7 +654,7 @@ namespace FudgeCore {
crc3.uniform2f(ShaderAmbientOcclusion.uniforms["u_vctResolution"], RenderWebGL.getCanvas().width, RenderWebGL.getCanvas().height);
crc3.uniform3fv(ShaderAmbientOcclusion.uniforms["u_vctCamera"], _cmpCamera.mtxWorld.translation.get());

crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.framebufferPost);
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.fboPost);
crc3.framebufferTexture2D(WebGL2RenderingContext.FRAMEBUFFER, WebGL2RenderingContext.COLOR_ATTACHMENT0, WebGL2RenderingContext.TEXTURE_2D, RenderWebGL.texColor, 0);
RenderWebGL.setBlendMode(BLEND.SUBTRACTIVE);
crc3.drawArrays(WebGL2RenderingContext.TRIANGLES, 0, 3);
Expand All @@ -659,7 +669,7 @@ namespace FudgeCore {
ShaderBloom.useProgram();

// extract bright colors, could move this to main render pass so that individual objects can be exempt from bloom
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.framebufferPost);
crc3.bindFramebuffer(WebGL2RenderingContext.FRAMEBUFFER, RenderWebGL.fboPost);
crc3.framebufferTexture2D(WebGL2RenderingContext.FRAMEBUFFER, WebGL2RenderingContext.COLOR_ATTACHMENT0, WebGL2RenderingContext.TEXTURE_2D, RenderWebGL.texBloomSamples[0], 0);
RenderWebGL.clear();

Expand Down Expand Up @@ -705,7 +715,7 @@ namespace FudgeCore {
crc3.drawArrays(WebGL2RenderingContext.TRIANGLES, 0, 3);
}

Render.crc3.viewport(0, 0, Render.crc3.canvas.width, Render.crc3.canvas.height);
crc3.viewport(0, 0, crc3.canvas.width, crc3.canvas.height);

crc3.framebufferTexture2D(WebGL2RenderingContext.FRAMEBUFFER, WebGL2RenderingContext.COLOR_ATTACHMENT0, WebGL2RenderingContext.TEXTURE_2D, RenderWebGL.texColor, 0);
RenderWebGL.bindTexture(ShaderBloom, RenderWebGL.texBloomSamples[0], WebGL2RenderingContext.TEXTURE0, "u_texSource");
Expand Down
2 changes: 0 additions & 2 deletions Core/Source/Render/Viewport.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,6 @@ namespace FudgeCore {
public draw(_prepareBranch: boolean = true): void {
this.prepare(_prepareBranch);

Render.clear();

if (this.physicsDebugMode != PHYSICS_DEBUGMODE.PHYSIC_OBJECTS_ONLY) {
Render.draw(this.camera);

Expand Down
Loading

0 comments on commit 6809ba9

Please sign in to comment.