Skip to content

Commit

Permalink
fix: fix frameRate and camera resize
Browse files Browse the repository at this point in the history
  • Loading branch information
@lslzl3000
lslzl3000 committed Aug 28, 2024
1 parent 452d730 commit c4b8626
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 108 deletions.
2 changes: 1 addition & 1 deletion samples/compute/fluid/shader/addforce.wgsl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export class addforce {
fn kernel (position: vec3<f32>, radius: f32, direction: vec3<f32>, origin: vec3<f32>) -> f32{
var distanceToMouseRay: f32 = length(cross(direction, position - origin));
var normalizedDistance = max(0.0, distanceToMouseRay / radius);
return smoothstep(1.0, 0.9, normalizedDistance);
return smoothstep(0.9, 1.0, normalizedDistance);
}
// fn _mod (x: f32, y: f32) -> f32{
Expand Down
86 changes: 34 additions & 52 deletions src/Engine3D.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,6 @@ export class Engine3D {
public static views: View3D[];
private static _frameRateValue: number = 0;
private static _frameRate: number = 360;
private static _frameTimeCount: number = 0;
private static _deltaTime: number = 0;
private static _time: number = 0;
private static _beforeRender: Function;
private static _renderLoop: Function;
Expand All @@ -78,7 +76,7 @@ export class Engine3D {
*/
public static set frameRate(value: number) {
this._frameRate = value;
this._frameRateValue = 1.0 / value;
this._frameRateValue = 1000 / value;
if (value >= 360) {
this._frameRateValue = 0;
}
Expand Down Expand Up @@ -376,30 +374,30 @@ export class Engine3D {
return;
}

/**
* set render view and start renderer
* @param view
* @returns
*/
public static startRenderView(view: View3D) {
this.renderJobs ||= new Map<View3D, RendererJob>();
this.views = [view];
private static startRenderJob(view: View3D){
let renderJob = new ForwardRenderJob(view);
this.renderJobs.set(view, renderJob);
let presentationSize = webGPUContext.presentationSize;
// RTResourceMap.createRTTexture(RTResourceConfig.colorBufferTex_NAME, presentationSize[0], presentationSize[1], GPUTextureFormat.rgba16float, false);

if (this.setting.pick.mode == `pixel`) {
let postProcessing = view.scene.getOrAddComponent(PostProcessingComponent);
postProcessing.addPost(FXAAPost);

} else {
}

if (this.setting.pick.mode == `pixel` || this.setting.pick.mode == `bound`) {
view.enablePick = true;
}
return renderJob;
}

/**
* set render view and start renderer
* @param view
* @returns
*/
public static startRenderView(view: View3D) {
this.renderJobs ||= new Map<View3D, RendererJob>();
this.views = [view];
let renderJob = this.startRenderJob(view);
this.resume();
return renderJob;
}
Expand All @@ -414,21 +412,7 @@ export class Engine3D {
this.renderJobs ||= new Map<View3D, RendererJob>();
this.views = views;
for (let i = 0; i < views.length; i++) {
const view = views[i];
let renderJob = new ForwardRenderJob(view);
this.renderJobs.set(view, renderJob);
let presentationSize = webGPUContext.presentationSize;

if (this.setting.pick.mode == `pixel`) {
let postProcessing = view.scene.addComponent(PostProcessingComponent);
postProcessing.addPost(FXAAPost);
} else {
RTResourceMap.createRTTexture(RTResourceConfig.colorBufferTex_NAME, presentationSize[0], presentationSize[1], GPUTextureFormat.rgba16float, false);
}

if (this.setting.pick.mode == `pixel` || this.setting.pick.mode == `bound`) {
view.enablePick = true;
}
this.startRenderJob(views[i])
}
this.resume();
}
Expand All @@ -446,7 +430,7 @@ export class Engine3D {
* Pause the engine render
*/
public static pause() {
if (this._requestAnimationFrameID != 0) {
if (this._requestAnimationFrameID !== 0) {
cancelAnimationFrame(this._requestAnimationFrameID);
this._requestAnimationFrameID = 0;
}
Expand All @@ -463,23 +447,26 @@ export class Engine3D {
* start engine render
* @internal
*/
private static render(time) {
this._deltaTime = time - this._time;
this._time = time;

private static async render(time: number) {
if (this._frameRateValue > 0) {
this._frameTimeCount += this._deltaTime * 0.001;
if (this._frameTimeCount >= this._frameRateValue * 0.95) {
this._frameTimeCount = 0;
this.updateFrame(time);
let delta = time - this._time;
while(delta < this._frameRateValue){
let t = performance.now()
await Promise.resolve().then(()=>{
time += (performance.now() - t)
delta = time - this._time
})
}
this._time = time;
await this.updateFrame(time);
} else {
this.updateFrame(time);
await this.updateFrame(time);
}
this.resume();
this.resume()

}

private static updateFrame(time: number) {
private static async updateFrame(time: number) {
Time.delta = time - Time.time;
Time.time = time;
Time.frame += 1;
Expand All @@ -493,10 +480,10 @@ export class Engine3D {
view.scene.waitUpdate();
let [w, h] = webGPUContext.presentationSize;
view.camera.viewPort.setTo(0, 0, w, h);
view.camera.resetPerspective(webGPUContext.aspect);
}

if (this._beforeRender) this._beforeRender();
if (this._beforeRender)
await this._beforeRender();

/****** auto start with component list *****/
// ComponentCollect.startComponents();
Expand Down Expand Up @@ -555,14 +542,10 @@ export class Engine3D {
}

if (this._renderLoop) {
this._renderLoop();
await this._renderLoop();
}

// console.log("useCount", Matrix4.useCount);
// let t = performance.now();
WasmMatrix.updateAllContinueTransform(0, Matrix4.useCount, 16);
// this.divB.innerText = "wasm:" + (performance.now() - t).toFixed(2);

/****** auto update global matrix share buffer write to gpu *****/
let globalMatrixBindGroup = GlobalBindGroup.modelMatrixBindGroup;
globalMatrixBindGroup.writeBuffer(Matrix4.useCount * 16);
Expand All @@ -587,8 +570,7 @@ export class Engine3D {
}
}

if (this._lateRender) this._lateRender();
if (this._lateRender)
await this._lateRender();
}


}
3 changes: 1 addition & 2 deletions src/components/controller/HoverCameraController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,8 +283,7 @@ export class HoverCameraController extends ComponentBase {
this._tempPos = Vector3Ex.mulScale(this._tempDir, this._distance, this._tempPos);
this._tempPos.add(this._currentPos.transform.localPosition, this._tempPos);

this.transform.lookAt(this._tempPos, this._currentPos.transform.localPosition, Vector3.UP);
this.camera.lookTarget.copy(this._currentPos.transform.localPosition);
this.camera.lookAt(this._tempPos, this._currentPos.transform.localPosition, Vector3.UP);
}

/**
Expand Down
128 changes: 75 additions & 53 deletions src/core/Camera3D.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { CubeCamera } from './CubeCamera';
import { webGPUContext } from '../gfx/graphics/webGpu/Context3D';
import { FrustumCSM } from './csm/FrustumCSM';
import { CSM } from './csm/CSM';
import { CResizeEvent } from '../event/CResizeEvent';

/**
* Camera components
Expand All @@ -24,7 +25,7 @@ export class Camera3D extends ComponentBase {
/**
* camera Perspective
*/
public fov: number = 1;
public fov: number = 60;

/**
* camera use name
Expand All @@ -46,6 +47,31 @@ export class Camera3D extends ComponentBase {
*/
public far: number = 5000;

/**
* orth camera right plane
*/
public left: number = -100;

/**
* orth camera left plane
*/
public right: number = 100;

/**
* orth camera top plane
*/
public top: number = 100;

/**
* orth camera bottom plane
*/
public bottom: number = -100;

/**
* orth view size
*/
public frustumSize: number = 100;

/**
* camera view port size
*/
Expand Down Expand Up @@ -126,21 +152,35 @@ export class Camera3D extends ComponentBase {
this._enableCSM = value;
}
constructor() {
super();
super();
}

public init() {
super.init();
this._ray = new Ray();
this.frustum = new Frustum();
this.lookTarget = new Vector3(0, 0, 0);

// TODO: set viewport based on View3D size
this.viewPort.x = 0;
this.viewPort.y = 0;
this.viewPort.w = webGPUContext.presentationSize[0];
this.viewPort.h = webGPUContext.presentationSize[1];
this.lookTarget = new Vector3(0, 0, 0);

this.perspective(60, webGPUContext.aspect, 1, 1000.0);
this.updateProjection();
webGPUContext.addEventListener(CResizeEvent.RESIZE, this.updateProjection, this)
}

public updateProjection() {
this.aspect = webGPUContext.aspect;
if (this.type == CameraType.perspective) {
this.perspective(this.fov, this.aspect, this.near, this.far);
}else if(this.type == CameraType.ortho) {
if(this.frustumSize)
this.ortho(this.frustumSize, this.near, this.far);
else
this.orthoOffCenter(this.left, this.right, this.bottom, this.top, this.near, this.far);
}
}

public getShadowBias(depthTexSize: number): number {
Expand Down Expand Up @@ -189,54 +229,47 @@ export class Camera3D extends ComponentBase {
public perspective(fov: number, aspect: number, near: number, far: number) {
this.fov = fov;
this.aspect = aspect;
this.near = near;
this.near = Math.max(0.001, near);
this.far = far;
this._projectionMatrix.perspective(fov, aspect, near, far);
this._projectionMatrix.perspective(this.fov, this.aspect, this.near, this.far);
this.type = CameraType.perspective;
}

public resetPerspective(aspect: number) {
if (this.type == CameraType.perspective) {
this._projectionMatrix.perspective(this.fov, aspect, this.near, this.far);
}
}

/**
* Create an orthographic camera
* @param width screen width
* @param height screen height
* @param znear camera near plane
* @param zfar camera far plane
* set an orthographic camera with a frustumSize
* @param frustumSize the frustum size
* @param near camera near plane
* @param far camera far plane
*/
public ortho(width: number, height: number, znear: number, zfar: number) {
this.near = Math.max(znear, 0.1);
this.far = zfar;
this._projectionMatrix.ortho(width, height, znear, zfar);
this.type = CameraType.ortho;
public ortho(frustumSize: number, near: number, far: number) {
this.frustumSize = frustumSize;
let w = frustumSize * 0.5 * this.aspect;
let h = frustumSize * 0.5;
let left = -w / 2;
let right = w / 2;
let top = h / 2;
let bottom = -h / 2;
this.orthoOffCenter(left, right, bottom, top, near, far);
}

/**
*
* Create an orthographic camera
* @param l
* @param r
* @param b
* @param t
* @param zn camera near plane
* @param zf camera far plane
*/
public orthoOffCenter(l: number, r: number, b: number, t: number, zn: number, zf: number) {
this.near = Math.max(zn, 0.01);
this.far = zf;
this._projectionMatrix.orthoOffCenter(l, r, b, t, zn, zf);
this.type = CameraType.ortho;
}

public orthoZo(l: number, r: number, b: number, t: number, zn: number, zf: number) {
this.near = Math.max(zn, 0.01);
this.far = zf;
this._projectionMatrix.orthoZO(l, r, b, t, zn, zf);
* set an orthographic camera with specified frustum space
* @param left camera left plane
* @param right camera right plane
* @param bottom camera bottom plane
* @param top camera top plane
* @param near camera near plane
* @param far camera far plane
*/
public orthoOffCenter(left: number, right: number, bottom: number, top: number, near: number, far: number){
this.near = near;
this.far = far;
this.left = left;
this.right = right;
this.top = top;
this.bottom = bottom;
this.type = CameraType.ortho;
this._projectionMatrix.orthoOffCenter(this.left, this.right, this.bottom, this.top, this.near, this.far);
}

/**
Expand Down Expand Up @@ -451,21 +484,10 @@ export class Camera3D extends ComponentBase {
if (target) this.lookTarget.copyFrom(target);
}

/**
* @internal
*/
public resetProjectMatrix() {
this.perspective(this.fov, this.aspect, this.near, this.far);
}

/**
* @internal
*/
public onUpdate() {
if (this.type == CameraType.perspective) {
this.aspect = webGPUContext.aspect;
this.resetProjectMatrix();
}
if (this._useJitterProjection) {
this.getJitteredProjectionMatrix();
}
Expand Down

0 comments on commit c4b8626

Please sign in to comment.