Skip to content

Commit

Permalink
fix: fix gltf sample (#321)
Browse files Browse the repository at this point in the history 
add graphic mesh material data
fix gltf sample
fix emissive color
fix image material
fix chromaKey material
  • Loading branch information
@X-OldGentleMan
X-OldGentleMan committed Nov 1, 2023
1 parent 934c42d commit 4ca35b5
Show file tree
Hide file tree
Showing 19 changed files with 562 additions and 112 deletions.
79 changes: 42 additions & 37 deletions packages/media-extention/ChromaKeyMaterial.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Engine3D, ShaderLib, Vector4, Color, BlendMode, registerMaterial, Material, RenderShaderPass, Texture } from "@orillusion/core";
import { Engine3D, ShaderLib, Vector4, Color, BlendMode, registerMaterial, Material, RenderShaderPass, Texture, Shader, PassType } from "@orillusion/core";
import { ChromaKeyShader } from "./ChromaKeyShader";

/**
Expand All @@ -14,33 +14,38 @@ export class ChromaKeyMaterial extends Material {
super();

ShaderLib.register("ChromaKeyShader", ChromaKeyShader);
this.defaultPass = new RenderShaderPass(
let newShader = new Shader();

let colorPass = new RenderShaderPass(
`ChromaKeyShader`,
`ChromaKeyShader`
);
this.defaultPass.setShaderEntry(`VertMain`, `FragMain`);
colorPass.setShaderEntry(`VertMain`, `FragMain`);
colorPass.passType = PassType.COLOR;

this.defaultPass.setUniformVector4(
colorPass.setUniformVector4(
`transformUV1`,
new Vector4(0, 0, 1, 1)
);
this.defaultPass.setUniformVector4(
colorPass.setUniformVector4(
`transformUV2`,
new Vector4(0, 0, 1, 1)
);
this.defaultPass.setUniformColor(`baseColor`, new Color());
this.defaultPass.setUniformVector4(`rectClip`, new Vector4(0, 0, 0, 0));
this.defaultPass.setUniformFloat(`alphaCutoff`, 0.5);

this.defaultPass.setUniformColor(`keyColor`, new Color(0, 1, 0, 0));
this.defaultPass.setUniformFloat(`colorCutoff`, 0.4);
this.defaultPass.setUniformFloat(`colorFeathering`, 0.5);
this.defaultPass.setUniformFloat(`maskFeathering`, 1);
this.defaultPass.setUniformFloat(`sharpening`, 0.5);
this.defaultPass.setUniformFloat(`despoil`, 0.6);
this.defaultPass.setUniformFloat(`despoilLuminanceAdd`, 0);

let shaderState = this.defaultPass.shaderState;
colorPass.setUniformColor(`baseColor`, new Color());
colorPass.setUniformVector4(`rectClip`, new Vector4(0, 0, 0, 0));
colorPass.setUniformFloat(`alphaCutoff`, 0.5);

colorPass.setUniformColor(`keyColor`, new Color(0, 1, 0, 0));
colorPass.setUniformFloat(`colorCutoff`, 0.4);
colorPass.setUniformFloat(`colorFeathering`, 0.5);
colorPass.setUniformFloat(`maskFeathering`, 1);
colorPass.setUniformFloat(`sharpening`, 0.5);
colorPass.setUniformFloat(`despoil`, 0.6);
colorPass.setUniformFloat(`despoilLuminanceAdd`, 0);

newShader.addRenderPass(colorPass);

let shaderState = colorPass.shaderState;
shaderState.acceptShadow = false;
shaderState.receiveEnv = false;
shaderState.acceptGI = false;
Expand All @@ -50,127 +55,127 @@ export class ChromaKeyMaterial extends Material {
shaderState.blendMode = BlendMode.ALPHA;

// default value
this.defaultPass.setTexture(`baseMap`, Engine3D.res.whiteTexture);
this.shader.setTexture(`baseMap`, Engine3D.res.whiteTexture);
}

public set baseMap(value: Texture) {
this.defaultPass.setTexture(`baseMap`, value);
this.shader.setTexture(`baseMap`, value);
}

public get baseMap() {
return this.defaultPass.getTexture(`baseMap`);
return this.shader.getTexture(`baseMap`);
}

/**
* Set the clip rect area
*/
public set rectClip(value: Vector4) {
this.defaultPass.uniforms[`rectClip`].vector4 = value;
this.shader.setUniformVector4(`rectClip`, value);
}

/**
* Get current clip rect area
*/
public get rectClip(): Vector4 {
return this.defaultPass.uniforms[`rectClip`].vector4;
return this.shader.getUniformVector4(`rectClip`);
}

/**
* Set the chromakey color
*/
public set keyColor(value: Color) {
this.defaultPass.uniforms[`keyColor`].color = value;
this.shader.setUniformColor(`keyColor`, value);
}

/**
* Get the chromakey color
*/
public get keyColor(): Color {
return this.defaultPass.uniforms[`keyColor`].color;
return this.shader.getUniformColor(`keyColor`);
}

/**
* Set the color cutoff factor
*/
public set colorCutoff(value: number) {
this.defaultPass.uniforms[`colorCutoff`].value = value;
this.shader.setUniformFloat(`colorCutoff`, value);
}

/**
* Get the color cutoff factor
*/
public get colorCutoff(): number {
return this.defaultPass.uniforms[`colorCutoff`].value;
return this.shader.getUniformFloat(`colorCutoff`);
}

/**
* Set the color feather factor
*/
public set colorFeathering(value: number) {
this.defaultPass.uniforms[`colorFeathering`].value = value;
this.shader.setUniformFloat(`colorFeathering`, value);
}

/**
* Get the color feather factor
*/
public get colorFeathering(): number {
return this.defaultPass.uniforms[`colorFeathering`].value;
return this.shader.getUniformFloat(`colorFeathering`);
}

/**
* Set the mask feather factor
*/
public set maskFeathering(value: number) {
this.defaultPass.uniforms[`maskFeathering`].value = value;
this.shader.setUniformFloat(`maskFeathering`, value);
}

/**
* Get the mask feather factor
*/
public get maskFeathering(): number {
return this.defaultPass.uniforms[`maskFeathering`].value;
return this.shader.getUniformFloat(`maskFeathering`);
}

/**
* Set the sharpen factor
*/
public set sharpening(value: number) {
this.defaultPass.uniforms[`sharpening`].value = value;
this.shader.setUniformFloat(`sharpening`, value);
}

/**
* Get the sharpen factor
*/
public get sharpening(): number {
return this.defaultPass.uniforms[`sharpening`].value;
return this.shader.getUniformFloat(`sharpening`);
}

/**
* Set the despoil factor
*/
public set despoil(value: number) {
this.defaultPass.uniforms[`despoil`].value = value;
this.shader.setUniformFloat(`despoil`, value);
}

/**
* Get the despoil factor
*/
public get despoil(): number {
return this.defaultPass.uniforms[`despoil`].value;
return this.shader.getUniformFloat(`despoil`);
}

/**
* Set the despoil luminance factor
*/
public set despoilLuminanceAdd(value: number) {
this.defaultPass.uniforms[`despoilLuminanceAdd`].value = value;
this.shader.setUniformFloat(`despoilLuminanceAdd`, value);
}

/**
* Get the despoil luminance factor
*/
public get despoilLuminanceAdd(): number {
return this.defaultPass.uniforms[`despoilLuminanceAdd`].value;
return this.shader.getUniformFloat(`despoilLuminanceAdd`);
}

/**
Expand Down
37 changes: 21 additions & 16 deletions packages/media-extention/ImageMaterial.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Engine3D, ShaderLib, Vector4, Color, Texture, Material, RenderShaderPass } from "@orillusion/core";
import { Engine3D, ShaderLib, Vector4, Color, Texture, Material, RenderShaderPass, Shader, PassType } from "@orillusion/core";
import ImageMaterialShader from "./ImageMaterialShader.wgsl?raw";


Expand All @@ -15,60 +15,65 @@ export class ImageMaterial extends Material {
constructor() {
super();
ShaderLib.register("ImageMaterialShader", ImageMaterialShader);
this.defaultPass = new RenderShaderPass(`ImageMaterialShader`, `ImageMaterialShader`);
this.defaultPass.setShaderEntry(`VertMain`, `FragMain`)
this.defaultPass.setUniformVector4(`transformUV1`, new Vector4(0, 0, 1, 1));
this.defaultPass.setUniformVector4(`transformUV2`, new Vector4(0, 0, 1, 1));
this.defaultPass.setUniformColor(`baseColor`, new Color());
this.defaultPass.setUniformVector4(`rectClip`, new Vector4(0, 0, 0, 0));
this.defaultPass.setUniformFloat(`alphaCutoff`, 0.5);
let newShader = new Shader();

let shaderState = this.defaultPass.shaderState;
let defaultPass = new RenderShaderPass(`ImageMaterialShader`, `ImageMaterialShader`);
defaultPass.passType = PassType.COLOR;
defaultPass.setShaderEntry(`VertMain`, `FragMain`)
defaultPass.setUniformVector4(`transformUV1`, new Vector4(0, 0, 1, 1));
defaultPass.setUniformVector4(`transformUV2`, new Vector4(0, 0, 1, 1));
defaultPass.setUniformColor(`baseColor`, new Color());
defaultPass.setUniformVector4(`rectClip`, new Vector4(0, 0, 0, 0));
defaultPass.setUniformFloat(`alphaCutoff`, 0.5);
newShader.addRenderPass(defaultPass);

let shaderState = defaultPass.shaderState;
shaderState.acceptShadow = false;
shaderState.receiveEnv = false;
shaderState.acceptGI = false;
shaderState.useLight = false;
shaderState.castShadow = false;
shaderState.useZ = false;
this.shader = newShader;

// default value
this.defaultPass.setTexture(`baseMap`, Engine3D.res.whiteTexture);
this.shader.setTexture(`baseMap`, Engine3D.res.whiteTexture);
}

public set baseMap(value: Texture) {
this.defaultPass.setTexture(`baseMap`, value);
this.shader.setTexture(`baseMap`, value);
}

public get baseMap() {
return this.defaultPass.getTexture(`baseMap`);
return this.shader.getTexture(`baseMap`);
}

/**
* set base color (tint color)
*/
public set baseColor(color: Color) {
this.defaultPass.setUniformColor(`baseColor`, color);
this.shader.setUniformColor(`baseColor`, color);
}

/**
* get base color (tint color)
*/
public get baseColor() {
return this.defaultPass.uniforms[`baseColor`].color;
return this.shader.getUniformColor(`baseColor`);
}

/**
* Set the clip rect area
*/
public set rectClip(value: Vector4) {
this.defaultPass.uniforms[`rectClip`].vector4 = value;
this.shader.setUniformVector4(`rectClip`, value);
}

/**
* Get the clip rect area
*/
public get rectClip(): Vector4 {
return this.defaultPass.uniforms[`rectClip`].vector4;
return this.shader.getUniformVector4(`rectClip`);
}

/**
Expand Down
1 change: 0 additions & 1 deletion packages/media-extention/VideoMaterial.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export class VideoMaterial extends Material {
colorPass.passType = PassType.COLOR;
colorPass.setShaderEntry(`VertMain`, `FragMain`)

colorPass.setShaderEntry(`VertMain`, `FragMain`)
colorPass.setUniformVector4(`transformUV1`, new Vector4(0, 0, 1, 1));
colorPass.setUniformVector4(`transformUV2`, new Vector4(0, 0, 1, 1));
colorPass.setUniformColor(`baseColor`, new Color());
Expand Down
23 changes: 3 additions & 20 deletions samples/graphic/Sample_GraphicMesh_7.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,6 @@ export class Sample_GraphicMesh_7 {

await this.initScene();



sky.relativeTransform = this.lightObj3D.transform;
}

Expand Down Expand Up @@ -91,32 +89,21 @@ export class Sample_GraphicMesh_7 {
{
this.width = 15;
this.height = 15;
// let geometry = new BoxGeometry(1, 1, 1);
let geometry = new PlaneGeometry(1, 1, 1, 1, Vector3.Z_AXIS);
let mr = Graphic3DMesh.draw(this.scene, geometry, bitmapTexture2DArray, this.width * this.height);
this.parts = mr.object3Ds;

mr.material.blendMode = BlendMode.ADD;
// mr.material.doubleSide = true;
mr.material.transparent = true;
mr.material.depthWriteEnabled = false;
mr.material.useBillboard = true;

for (let i = 0; i < this.width * this.height; i++) {
const element = this.parts[i];
// mr.setTextureID(i, i % texts.length);
// mr.setTextureID(i, 52);
mr.setTextureID(i, 0);
// mr.setTextureID(i, 39);
// mr.setTextureID(i, 18);

element.transform.scaleX = 5.5;
element.transform.scaleY = 5.5;
element.transform.scaleZ = 5.5;

// let c = Color.random();
// c.a = 0.55;
// this.colors.push(c);
}

let c1 = new Color(0.65, 0.1, 0.2, 0.15);
Expand All @@ -142,25 +129,21 @@ export class Sample_GraphicMesh_7 {
this.tmpArray.length = 0;
for (let i = 0; i < this.parts.length; i++) {
const element = this.parts[i];

let tmp = this.sphericalFibonacci(i, this.parts.length);
tmp.scaleBy(this.cafe);

element.transform.localPosition = tmp;

// if (sc > this.cafe * 0.95) {
this.tmpArray.push(element);
// }
}

for (let i = 0; i < this.tmpArray.length / 3; i++) {
this.view.graphic3D.Clear(i.toString());
this.view.graphic3D.drawLines(i.toString(), [
this.view.graphic3D.drawLines(i.toString(),
[
this.tmpArray[i * 3 + 0].transform.worldPosition,
this.tmpArray[i * 3 + 1].transform.worldPosition,
this.tmpArray[i * 3 + 2].transform.worldPosition,
],
this.colors);
this.colors);
}
}
}
Expand Down

0 comments on commit 4ca35b5

Please sign in to comment.