Skip to content

Commit

Permalink
✨ feat: refactor material
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiangechen
xiangechen committed Dec 5, 2024
1 parent c10ecdb commit 43d668b
Show file tree
Hide file tree
Showing 15 changed files with 543 additions and 174 deletions.
21 changes: 18 additions & 3 deletions packages/chili-core/src/i18n/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,24 @@ export default {
"line.start": "Start",
"line.type.line": "Line",
"line.type.xline": "XLine",
"material.repeatU": "U repeat",
"material.repeatV": "V repeat",
"material.texture": "Texture",
"material.texture.image": "Image",
"material.texture.rotation": "Rotation",
"material.texture.wrapS": "Wrap S",
"material.texture.wrapT": "Wrap T",
"material.texture.repeat": "Repeat",
"material.texture.offset": "Offset",
"material.map": "Map",
"material.specular": "Specular",
"material.shininess": "Shininess",
"material.emissive": "Emissive",
"material.specularMap": "Specular Map",
"material.normalMap": "Normal Map",
"material.bumpMap": "BumpMap",
"material.roughnessMap": "Roughness Map",
"material.emissiveMap": "Emissive Map",
"material.metalness": "Metalness",
"material.metalnessMap": "Metalness Map",
"material.roughness": "Roughness",
"model.visible": "Visible",
"operate.pickCircleCenter": "pick center, ESC key to cancel",
"operate.pickFistPoint": "Pick first point, ESC key to cancel",
Expand Down
21 changes: 18 additions & 3 deletions packages/chili-core/src/i18n/keys.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,24 @@ const I18N_KEYS = [
"line.start",
"line.type.line",
"line.type.xline",
"material.repeatU",
"material.repeatV",
"material.texture",
"material.texture.image",
"material.texture.rotation",
"material.texture.wrapS",
"material.texture.wrapT",
"material.texture.repeat",
"material.texture.offset",
"material.map",
"material.specular",
"material.shininess",
"material.emissive",
"material.specularMap",
"material.normalMap",
"material.bumpMap",
"material.roughnessMap",
"material.emissiveMap",
"material.metalness",
"material.metalnessMap",
"material.roughness",
"model.visible",
"operate.pickCircleCenter",
"operate.pickFistPoint",
Expand Down
21 changes: 18 additions & 3 deletions packages/chili-core/src/i18n/zh-cn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,24 @@ export default {
"line.start": "起点",
"line.type.line": "直线",
"line.type.xline": "构造线",
"material.repeatU": "U 重复",
"material.repeatV": "V 重复",
"material.texture": "贴图",
"material.texture.image": "图片",
"material.texture.rotation": "旋转",
"material.texture.wrapS": "Wrap S",
"material.texture.wrapT": "Wrap T",
"material.texture.repeat": "重复",
"material.texture.offset": "偏移",
"material.map": "贴图",
"material.specular": "高光",
"material.shininess": "高光强度",
"material.emissive": "自发光",
"material.specularMap": "高光贴图",
"material.normalMap": "法线贴图",
"material.bumpMap": "凹凸贴图",
"material.roughnessMap": "粗糙度贴图",
"material.emissiveMap": "自发光贴图",
"material.metalness": "金属度",
"material.metalnessMap": "金属度贴图",
"material.roughness": "粗糙度",
"model.visible": "可见",
"operate.pickCircleCenter": "请选择圆心 按 ESC 键取消",
"operate.pickFistPoint": "请选择第一个点, 按 ESC 键取消",
Expand Down
246 changes: 214 additions & 32 deletions packages/chili-core/src/material.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,73 @@

import { IDocument } from "./document";
import { HistoryObservable, Id } from "./foundation";
import { XY } from "./math";
import { Property } from "./property";
import { Serializer } from "./serialize";

@Serializer.register(["document"])
export class Texture extends HistoryObservable {
@Serializer.serialze()
@Property.define("material.texture.image")
get image(): string {
return this.getPrivateValue("image", "");
}
set image(value: string) {
this.setProperty("image", value);
}

@Serializer.serialze()
get wrapS(): number {
return this.getPrivateValue("wrapS", 1000);
}
set wrapS(value: number) {
this.setProperty("wrapS", value);
}

@Serializer.serialze()
get wrapT(): number {
return this.getPrivateValue("wrapT", 1000);
}
set wrapT(value: number) {
this.setProperty("wrapT", value);
}

@Serializer.serialze()
@Property.define("material.texture.rotation")
get rotation(): number {
return this.getPrivateValue("rotation", 0);
}
set rotation(value: number) {
this.setProperty("rotation", value);
}

@Serializer.serialze()
@Property.define("material.texture.offset")
get offset(): XY {
return this.getPrivateValue("offset", new XY(0, 0));
}
set offset(value: XY) {
this.setProperty("offset", value);
}

@Serializer.serialze()
@Property.define("material.texture.repeat")
get repeat(): XY {
return this.getPrivateValue("repeat", new XY(1, 1));
}
set repeat(value: XY) {
this.setProperty("repeat", value);
}
}

@Serializer.register(["document", "name", "color", "id"])
export class Material extends HistoryObservable {
@Serializer.serialze()
vertexColors = false;

@Serializer.serialze()
transparent = true;

@Serializer.serialze()
readonly id: string;

Expand Down Expand Up @@ -38,55 +100,175 @@ export class Material extends HistoryObservable {
}

@Serializer.serialze()
@Property.define("material.texture")
get texture() {
return this.getPrivateValue("texture", "");
@Property.define("material.map")
get map(): Texture {
return this.getPrivateValue("map", new Texture(this.document));
}
set texture(value: string) {
this.setProperty("texture", value);
set map(value: Texture) {
this.setProperty("map", value);
}

constructor(document: IDocument, name: string, color: number, id: string = Id.generate()) {
super(document);
this.id = id;
this.setPrivateValue("name", name);
this.setPrivateValue("color", color);
}

clone(): Material {
let material = new Material(this.document, `${this.name} clone`, this.color);
material.setPrivateValue("map", this.map);

return material;
}
}

@Serializer.register(["document", "name", "color", "id"])
export class PhongMaterial extends Material {
@Serializer.serialze()
@Property.define("common.angle")
get angle(): number {
return this.getPrivateValue("angle", 0);
@Property.define("material.specular")
get specular(): number {
return this.getPrivateValue("specular", 0xffff);
}
set angle(value: number) {
this.setProperty("angle", value);
set specular(value: number) {
this.setProperty("specular", value);
}

@Serializer.serialze()
@Property.define("material.repeatU")
get repeatU(): number {
return this.getPrivateValue("repeatU", 1);
@Property.define("material.shininess")
get shininess(): number {
return this.getPrivateValue("shininess", 100);
}
set repeatU(value: number) {
this.setProperty("repeatU", value);
set shininess(value: number) {
this.setProperty("shininess", value);
}

@Serializer.serialze()
@Property.define("material.repeatV")
get repeatV(): number {
return this.getPrivateValue("repeatV", 1);
@Property.define("material.emissive")
get emissive(): number {
return this.getPrivateValue("emissive", 0x000000);
}
set repeatV(value: number) {
this.setProperty("repeatV", value);
set emissive(value: number) {
this.setProperty("emissive", value);
}

constructor(document: IDocument, name: string, color: number, id: string = Id.generate()) {
super(document);
this.id = id;
this.setPrivateValue("name", name);
this.setPrivateValue("color", color);
@Serializer.serialze()
@Property.define("material.specularMap")
get specularMap(): Texture {
return this.getPrivateValue("specularMap");
}
set specularMap(value: Texture) {
this.setProperty("specularMap", value);
}

clone(): Material {
let material = new Material(this.document, `${this.name} clone`, this.color);
material.setPrivateValue("texture", this.texture);
material.setPrivateValue("angle", this.angle);
material.setPrivateValue("repeatU", this.repeatU);
material.setPrivateValue("repeatV", this.repeatV);
@Serializer.serialze()
@Property.define("material.bumpMap")
get bumpMap(): Texture {
return this.getPrivateValue("bumpMap", new Texture(this.document));
}
set bumpMap(value: Texture) {
this.setProperty("bumpMap", value);
}

return material;
@Serializer.serialze()
@Property.define("material.normalMap")
get normalMap(): Texture {
return this.getPrivateValue("normalMap", new Texture(this.document));
}
set normalMap(value: Texture) {
this.setProperty("normalMap", value);
}

@Serializer.serialze()
@Property.define("material.emissiveMap")
get emissiveMap(): Texture {
return this.getPrivateValue("emissiveMap", new Texture(this.document));
}
set emissiveMap(value: Texture) {
this.setProperty("emissiveMap", value);
}
}

@Serializer.register(["document", "name", "color", "id"])
export class PhysicalMaterial extends Material {
@Serializer.serialze()
@Property.define("material.metalness")
get metalness(): number {
return this.getPrivateValue("metalness", 0);
}
set metalness(value: number) {
this.setProperty("metalness", value);
}

@Serializer.serialze()
@Property.define("material.metalnessMap")
get metalnessMap(): Texture {
return this.getPrivateValue("metalnessMap", new Texture(this.document));
}
set metalnessMap(value: Texture) {
this.setProperty("metalnessMap", value);
}

@Serializer.serialze()
@Property.define("material.roughness")
get roughness(): number {
return this.getPrivateValue("roughness", 1);
}
set roughness(value: number) {
this.setProperty("roughness", value);
}

@Serializer.serialze()
@Property.define("material.roughnessMap")
get roughnessMap(): Texture {
return this.getPrivateValue("roughnessMap", new Texture(this.document));
}
set roughnessMap(value: Texture) {
this.setProperty("roughnessMap", value);
}

@Serializer.serialze()
@Property.define("material.emissive")
get emissive(): number {
return this.getPrivateValue("emissive", 0x000000);
}
set emissive(value: number) {
this.setProperty("emissive", value);
}

@Serializer.serialze()
@Property.define("material.specularMap")
get specularMap(): Texture {
return this.getPrivateValue("specularMap", new Texture(this.document));
}
set specularMap(value: Texture) {
this.setProperty("specularMap", value);
}

@Serializer.serialze()
@Property.define("material.bumpMap")
get bumpMap(): Texture {
return this.getPrivateValue("bumpMap", new Texture(this.document));
}
set bumpMap(value: Texture) {
this.setProperty("bumpMap", value);
}

@Serializer.serialze()
@Property.define("material.normalMap")
get normalMap(): Texture {
return this.getPrivateValue("normalMap", new Texture(this.document));
}
set normalMap(value: Texture) {
this.setProperty("normalMap", value);
}

@Serializer.serialze()
@Property.define("material.emissiveMap")
get emissiveMap(): Texture {
return this.getPrivateValue("emissiveMap", new Texture(this.document));
}
set emissiveMap(value: Texture) {
this.setProperty("emissiveMap", value);
}
}
15 changes: 11 additions & 4 deletions packages/chili-core/src/math/xy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
// Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.

import { Precision } from "../foundation";
import { Serializer } from "../serialize";
import { MathUtils } from "./mathUtils";

@Serializer.register(["x", "y"])
export class XY {
static readonly zero = new XY(0, 0);
static readonly unitX = new XY(1, 0);
static readonly unitY = new XY(0, 1);

constructor(
readonly x: number,
readonly y: number,
) {}
@Serializer.serialze()
readonly x: number;
@Serializer.serialze()
readonly y: number;

constructor(x: number, y: number) {
this.x = x;
this.y = y;
}

cross(right: XY): number {
return this.x * right.y - this.y * right.x;
Expand Down
Loading

0 comments on commit 43d668b

Please sign in to comment.