Skip to content

Commit

Permalink
fix shadow map
Browse files Browse the repository at this point in the history
  • Loading branch information
@hikipuro
hikipuro committed Sep 16, 2018
1 parent 575af61 commit 3eab611
Show file tree
Hide file tree
Showing 13 changed files with 286 additions and 152 deletions.
46 changes: 26 additions & 20 deletions src/Main.ts
View file
Expand Up @@ -144,8 +144,9 @@ export class Main {
//light.getComponent(Tea.Light).type = Tea.LightType.Point;
//light.getComponent(Tea.Light).intensity = 0.5;
//light.getComponent(Tea.Light).range = 1;
light.localPosition.set(0, 3, 0);
light.localRotation = Tea.Quaternion.euler(30, 60, 0);
light.localRotation = Tea.Quaternion.euler(90, 0, 0);
light.localPosition = light.localRotation.mul(new Tea.Vector3(0,0,-1)).mul(10);
console.log("light", light.localPosition);
//light.addComponent(Rotate);
scene.appendChild(light);

Expand All @@ -156,7 +157,7 @@ export class Main {
//light2.getComponent(Tea.Light).range = 10;
light2.localPosition.set(3, 5, 0);
//light2.localRotation = Tea.Quaternion.euler(90, 0, 0);
scene.appendChild(light2);
//scene.appendChild(light2);

/*
var light3 = this.app.createLight();
Expand All @@ -179,6 +180,8 @@ export class Main {
*/

var camera = this.app.createCamera();
//camera.getComponent(Tea.Camera).orthographic = true;
//camera.getComponent(Tea.Camera).orthographicSize = 5;
//camera.localPosition = new Tea.Vector3(0, 4, 0);
//camera.localRotation = Tea.Quaternion.euler(90, 0, 0);
scene.appendChild(camera);
Expand All @@ -192,10 +195,10 @@ export class Main {
*/

var camera2 = this.app.createLightCamera();
camera2.localPosition = new Tea.Vector3(0, 5, 0);
camera2.localRotation = Tea.Quaternion.euler(90, 0, 0);
camera2.localPosition = light.localPosition.clone();
camera2.localRotation = light.localRotation.clone();
//var cam = camera2.getComponent(Tea.LightCamera);
//scene.appendChild(camera2);
scene.appendChild(camera2);

setTimeout(() => {
//console.log("ray", scene.camera.screenPointToRay(new Tea.Vector3(100, 100)).toString());
Expand All @@ -214,27 +217,28 @@ export class Main {
cube.position.set(0, 2, 0);
//cube.position.z = 5;
//cube.scale.y = -1;
cube.scale.x = 1.4;
cube.localRotation = Tea.Quaternion.euler(45, 0, 0);
//cube.scale.x = 1.4;
//cube.localRotation = Tea.Quaternion.euler(45, 0, 0);
//cube.rotation.y = Tea.radians(20);
//cube.addScript(new Rotate());
cube.addComponent(Rotate);
//cube.getComponent(Tea.Renderer).material.mainTexture = renderTexture;
var box2 = cube.addComponent(Tea.BoxCollider);
box2.size = cube.getComponent(Tea.MeshFilter).mesh.bounds.size.clone();
scene.appendChild(cube);

var cube2 = Tea.Object3D.createPrimitive(this.app, Tea.PrimitiveType.Cube);
cube2.position.x = 2;
cube2.position.y = 2;
cube2.position.y = 3;
cube2.rotation.rotateEuler(40,0,0);
cube2.scale.set(2,1,1);
//cube2.name = "cube2";
//scene.appendChild(cube2);
scene.appendChild(cube2);
//scene.appendChild(cube2);
cube2.getComponent(Tea.MeshRenderer).receiveShadows = true;
cube2.parent = cube;
cube.translate(-4,0,0);
cube.rotate(0, 45, 0);
cube.scale.set(1,1,1);
//cube.translate(-4,0,0);
//cube.rotate(0, 45, 0);
//cube.scale.set(1,1,1);
console.log(cube2.localPosition);
console.log(cube2.localEulerAngles);
console.log(cube2.localScale);
Expand All @@ -251,7 +255,7 @@ export class Main {
var cube3 = Tea.Object3D.createPrimitive(this.app, Tea.PrimitiveType.Cube);
cube3.position.x = 4;
cube3.position.y = 2;
cube3.parent = cube2;
//cube3.parent = cube2;

//cube2.position = new Tea.Vector3(2, 0, 0);
//cube.localScale = new Tea.Vector3(2, 1, 1);
Expand Down Expand Up @@ -291,7 +295,7 @@ export class Main {
quad.addComponent(Rotate);
scene.appendChild(quad);
//this.plain = quad;
cube2.parent = quad;
//cube2.parent = quad;
console.log(cube2.localPosition);
console.log(cube2.localEulerAngles);
console.log(cube2.localScale);
Expand All @@ -313,7 +317,7 @@ export class Main {
//var plane = this.app.createQuad();
var plane = Tea.Object3D.createPrimitive(this.app, Tea.PrimitiveType.Plane);
//plane.renderer.wireframe = true;
//plane.position.z = -9;
//plane.position.z = 1;
//plane.position.y = -2;
//plane.rotation.eulerAngles = new Tea.Vector3(-20, 0, 0);
plane.rotation.eulerAngles = new Tea.Vector3(20, 180, 0);
Expand All @@ -324,16 +328,18 @@ export class Main {
console.log("plane", plane.forward);
console.log("plane", plane.up);
console.log("plane", plane.right);
plane.getComponent(Tea.MeshRenderer).receiveShadows = true;
//plane.getComponent(Tea.Renderer).material.mainTexture = cam.targetTexture;
//plane.getComponent(Tea.MeshRenderer).receiveShadows = true;
//plane.getComponent(Tea.MeshRenderer).material.mainTexture = camera2.getComponent(Tea.LightCamera).targetTexture;
//plane.scale.x = -1;
/*
var ps = plane.getComponent(Tea.Renderer).material.shader;
ps.settings.enableStencilTest = true;
ps.settings.stencil.func = Tea.ShaderTestFunc.Always;
ps.settings.stencil.ref = 1;
ps.settings.stencil.fail = Tea.ShaderStencilOp.Keep;
ps.settings.stencil.zfail = Tea.ShaderStencilOp.Replace;
ps.settings.stencil.zpass = Tea.ShaderStencilOp.Replace;
*/

plane.addComponent(HitTest);
var box = plane.addComponent(Tea.BoxCollider);
Expand Down Expand Up @@ -490,7 +496,7 @@ export class Main {
r = cylinder.getComponent(Tea.Renderer);
r.material.mainTexture = texture;
r = plane.getComponent(Tea.Renderer);
r.material.mainTexture = texture;
//r.material.mainTexture = texture;
r = capsule.getComponent(Tea.Renderer);
r.material.mainTexture = texture;
});
Expand Down
2 changes: 1 addition & 1 deletion src/tea/App.ts
View file
Expand Up @@ -294,7 +294,7 @@ export class App {
gl.cullFace(gl.BACK);

gl.enable(gl.SCISSOR_TEST);
gl.scissor(0, 0, this.width, this.height);
gl.scissor(0.0, 0.0, this.width, this.height);

if (this._canvasAttributes.stencil) {
gl.clearStencil(0);
Expand Down
1 change: 1 addition & 0 deletions src/tea/Tea.ts
View file
Expand Up @@ -76,6 +76,7 @@ export * from "./shaders/ShaderColorMask";
export * from "./shaders/ShaderFace";
export * from "./shaders/ShaderHint";
export * from "./shaders/ShaderSettings";
export * from "./shaders/ShaderSources";
export * from "./shaders/ShaderStencil";
export * from "./shaders/ShaderStencilMask";
export * from "./shaders/ShaderStencilOp";
Expand Down
45 changes: 34 additions & 11 deletions src/tea/components/Camera.ts
View file
Expand Up @@ -9,6 +9,7 @@ class Prev {
aspect: number;
nearClipPlane: number;
farClipPlane: number;
orthographicSize: number;

constructor() {
this.position = new Tea.Vector3(0.0001, 0.0002, 0.0003);
Expand All @@ -18,6 +19,7 @@ class Prev {
this.aspect = 0;
this.nearClipPlane = 0;
this.farClipPlane = 0;
this.orthographicSize = 0;
}

isViewChanged(object3d: Tea.Object3D): boolean {
Expand All @@ -31,6 +33,13 @@ class Prev {
|| this.nearClipPlane != camera.nearClipPlane
|| this.farClipPlane != camera.farClipPlane;
}

isOrthoChanged(camera: Tea.Camera, aspect: number): boolean {
return this.aspect != aspect
|| this.orthographicSize != camera.orthographicSize
|| this.nearClipPlane != camera.nearClipPlane
|| this.farClipPlane != camera.farClipPlane;
}
}

export class Camera extends Component {
Expand All @@ -49,6 +58,7 @@ export class Camera extends Component {
frustumPlanes: Array<Tea.Plane>;

protected gl: WebGLRenderingContext;
protected _aspect: number;
protected _cameraToWorldMatrix: Tea.Matrix4x4;
protected _worldToCameraMatrix: Tea.Matrix4x4;
protected _projectionMatrix: Tea.Matrix4x4;
Expand All @@ -61,13 +71,13 @@ export class Camera extends Component {
constructor(app: Tea.App) {
super(app);
this.gl = app.gl;
this.fieldOfView = 60;
this.fieldOfView = 60.0;
this.nearClipPlane = 0.3;
this.farClipPlane = 1000;
this.farClipPlane = 1000.0;
this.backgroundColor = Tea.Color.background;
this.orthographic = false;
this.orthographicSize = 5;
this.rect = new Tea.Rect(0, 0, 1, 1);
this.rect = new Tea.Rect(0.0, 0.0, 1.0, 1.0);
this.enableStereo = false;
this.stereoDistance = 0.1;
this.stereoMode = Tea.CameraStereoMode.SideBySide;
Expand All @@ -83,11 +93,17 @@ export class Camera extends Component {
}

get aspect(): number {
if (this._aspect != null) {
return this._aspect;
}
var rect = this.getViewportRect();
var width = this.app.width;
var height = this.app.height;
return (width * rect.width) / (height * rect.height);
}
set aspect(value: number) {
this._aspect = value;
}

get cameraToWorldMatrix(): Tea.Matrix4x4 {
return this._cameraToWorldMatrix;
Expand Down Expand Up @@ -125,14 +141,21 @@ export class Camera extends Component {
}

if (this.orthographic) {
var h = this.orthographicSize;
var w = h * this.aspect;
this._projectionMatrix = Tea.Matrix4x4.ortho(
-w, w, -h, h,
this.nearClipPlane,
this.farClipPlane
);
isChanged = true;
var aspect = this.aspect;
if (this._prev.isOrthoChanged(this, aspect)) {
var h = this.orthographicSize;
var w = h * aspect;
this._projectionMatrix.ortho(
-w, w, -h, h,
this.nearClipPlane,
this.farClipPlane
);
this._prev.aspect = aspect;
this._prev.orthographicSize = this.orthographicSize;
this._prev.nearClipPlane = this.nearClipPlane;
this._prev.farClipPlane = this.farClipPlane;
isChanged = true;
}
} else {
var aspect = this.aspect;
if (this._prev.isPerspectiveChanged(this, aspect)) {
Expand Down
6 changes: 5 additions & 1 deletion src/tea/components/LightCamera.ts
View file
Expand Up @@ -6,7 +6,11 @@ export class LightCamera extends Camera {

constructor(app: Tea.App) {
super(app);
this.backgroundColor = Tea.Color.white;
this.backgroundColor = Tea.Color.white.clone();
//this.fieldOfView = 90;
this.aspect = 1.0;
this.orthographic = true;
//this.orthographicSize = 14;
var renderTexture = new Tea.RenderTexture(app);
this.targetTexture = renderTexture;

Expand Down

0 comments on commit 3eab611

Please sign in to comment.