Add renderer shape parameter

This commit is contained in:
MrKBear 2022-04-09 17:48:26 +08:00
parent a31bb73faa
commit a0cf289bb5
6 changed files with 98 additions and 20 deletions

View File

@ -44,6 +44,11 @@ class BasicGroup extends DisplayObject<GroupShader> {
*/
public color = [1, 1, 1];
/**
*
*/
public shape: number = 0;
/**
*
*/
@ -66,6 +71,9 @@ class BasicGroup extends DisplayObject<GroupShader> {
// 半径传递
this.shader.radius(this.size);
// 形状传递
this.shader.shape(this.shape);
// 指定颜色
this.shader.color(this.color);

View File

@ -18,7 +18,8 @@ type IClassicRendererParameter = {
renderer: {};
points: {
color: "color",
size: "number"
size: "number",
shape: "option"
};
cube: {
color: "color"
@ -30,7 +31,15 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
public override rendererParameterOption = {};
public override pointsParameterOption = {
color: { type: "color", name: "", defaultValue: [0, 0, 0] },
size: { type: "number", name: "Common.Attr.Key.Size", defaultValue: 60, numberStep: 10, numberMin: 0 }
size: { type: "number", name: "Common.Attr.Key.Size", defaultValue: 60, numberStep: 10, numberMin: 0 },
shape: { type: "option", name: "Common.Render.Attr.Key.Display.Shape", defaultValue: "0", allOption: [
{ key: "0", name: "Common.Render.Attr.Key.Display.Shape.Square" },
{ key: "1", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Square" },
{ key: "2", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Plus" },
{ key: "3", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Reduce" },
{ key: "4", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Cross" },
{ key: "5", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard" }
]}
};
public override cubeParameterOption = {
color: { type: "color", name: "", defaultValue: [0, 0, 0] },
@ -244,6 +253,11 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
if (param.size) {
group.size = param.size;
}
// 半径数据
if (param.shape) {
group.shape = parseInt(param.shape);
}
}
return this;

View File

@ -10,6 +10,7 @@ interface IGroupShaderAttribute {
interface IGroupShaderUniform {
uRadius: number,
uShape: number,
uMvp: ObjectData,
uColor: ObjectData,
uFogColor: ObjectData,
@ -50,10 +51,42 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
uniform vec3 uColor;
uniform vec3 uFogColor;
uniform int uShape;
varying float vFogPower;
void main(){
float dist = distance(gl_PointCoord, vec2(0.5, 0.5));
vec2 normalPos = (gl_PointCoord - vec2(0.5, 0.5)) * 2.;
if ( uShape == 1 && abs(normalPos.x) < .6 && abs(normalPos.y) < .6) {
discard;
}
if ( uShape == 2 && abs(normalPos.x) > .3 && abs(normalPos.y) > .3) {
discard;
}
if ( uShape == 3 && abs(normalPos.y) > .3) {
discard;
}
if ( uShape == 4 &&
(abs(normalPos.x) < .4 || abs(normalPos.y) < .4) &&
(abs(normalPos.x) > .4 || abs(normalPos.y) > .4)
) {
discard;
}
if ( uShape == 5 &&
(abs(normalPos.x) < .75 && abs(normalPos.y) < .75) &&
(abs(normalPos.x) < .28 || abs(normalPos.y) < .28) &&
(abs(normalPos.x) > .28 || abs(normalPos.y) > .28)
) {
discard;
}
gl_FragColor = vec4(mix(uColor, uFogColor, vFogPower), 1.);
}
`;
@ -111,4 +144,13 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
this.uniformLocate("uFogDensity"), rgb
)
}
/**
*
*/
public shape(shape: number) {
this.gl.uniform1i(
this.uniformLocate("uShape"), shape
)
}
}

View File

@ -107,6 +107,13 @@ const EN_US = {
"Common.Attr.Key.Generation.Error.Invalid.Label": "The specified label has expired",
"Common.Attr.Key.Kill.Random": "Random kill",
"Common.Attr.Key.Kill.Count": "Kill count",
"Common.Render.Attr.Key.Display.Shape": "Display Shape",
"Common.Render.Attr.Key.Display.Shape.Square": "Square",
"Common.Render.Attr.Key.Display.Shape.Hollow.Square": "Hollow square",
"Common.Render.Attr.Key.Display.Shape.Hollow.Plus": "Plus",
"Common.Render.Attr.Key.Display.Shape.Hollow.Reduce": "Reduce",
"Common.Render.Attr.Key.Display.Shape.Hollow.Cross": "Cross",
"Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard": "Checkerboard",
"Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
"Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
"Panel.Info.Group.Details.Attr.Error.Not.Group": "Object is not a Group",

View File

@ -107,6 +107,13 @@ const ZH_CN = {
"Common.Attr.Key.Generation.Error.Invalid.Label": "指定的标签已失效",
"Common.Attr.Key.Kill.Random": "随机消除",
"Common.Attr.Key.Kill.Count": "消除数量",
"Common.Render.Attr.Key.Display.Shape": "显示形状",
"Common.Render.Attr.Key.Display.Shape.Square": "方形",
"Common.Render.Attr.Key.Display.Shape.Hollow.Square": "空心方形",
"Common.Render.Attr.Key.Display.Shape.Hollow.Plus": "加号",
"Common.Render.Attr.Key.Display.Shape.Hollow.Reduce": "减号",
"Common.Render.Attr.Key.Display.Shape.Hollow.Cross": "叉号",
"Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard": "棋盘",
"Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
"Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
"Panel.Info.Group.Details.Attr.Error.Not.Group": "对象不是一个群",

View File

@ -39,24 +39,24 @@ class Laboratory extends Component {
// 测试渲染器
if (false) {
renderer.points("0");
renderer.points("1", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2));
renderer.points("2", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2), {
size: 100,
color: [1, 0, 1]
});
renderer.points("3", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2), {
size: 80,
color: [0, 1, 1]
});
renderer.points("2");
renderer.cube("4");
renderer.cube("5",
new Array(3).fill(0).map(() => (Math.random() - .5) * 2),
new Array(3).fill(0).map(() => Math.random() * 1.2), {
color: [1, 1, 0]
}
)
// renderer.points("0");
// renderer.points("1", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2));
// renderer.points("2", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2), {
// size: 100,
// color: [1, 0, 1]
// });
// renderer.points("3", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2), {
// size: 80,
// color: [0, 1, 1]
// });
// renderer.points("2");
// renderer.cube("4");
// renderer.cube("5",
// new Array(3).fill(0).map(() => (Math.random() - .5) * 2),
// new Array(3).fill(0).map(() => Math.random() * 1.2), {
// color: [1, 1, 0]
// }
// )
}
(window as any).renderer = renderer;