Skip to content

Commit 9f856bb

Browse files
hellmorX-OldGentleManlslzl3000Codeboy-cn
authored
feat: Renderer of Shape3D (#360)
* fix: fix gltf sample fix gltf sample fix emissive color * chore: fix type * fix: fix chromaKey material fix image material fix chromaKey material * chore: fix VideoMateial * fix: fix grass sample fix grass sample * fix: fix resize fix resize * fix: fix canvas resize change gpu attachments texture fix canvas resize change gpu attachments texture * fix: fix resize events fix resize events * fix: fix sample grass fix sample grass * fix: resize by ResizeObserver * add post test * fix: fix post sample resize bug fix post sample resize bug * change model url * feat: Fix csm shadow. Fix csm shadow. * chore: add sample add sample * fix: Cancel automatic resizing of rendertexture in GI Cancel automatic resizing of rendertexture in GI * feat: add graphic ribbon add graphic ribbon * fix: Wrong offset for bloom. Fix wrong offset for bloom. * perf: reduce texture sample times. Reduce texture sample times in GI lightingPass. * feat: fix issues #304 fix: texture Count Exceeded the maximum limit of 7 * chore: move GodRay setting from post file to engine setting Move GodRay setting from post file to engine setting. * chore: get param from setting. Get param from setting. * feat: add new graphic face add new graphic face * fix index.ts * chore: Hide light debug line * chore: Remove sample GraphicTrailing * update physics car sample * chore: modify error information * fix: Sample LoadGLB * chore: Remove sample GraphicPath * update public assets * fix index import * fix: class name register error * fix: Auto sort transparent renderers. (#318) * perf: Reduce computational complexity Reduce computational complexity * feat(graphic3d): add compute graphic add compute graphic * feat: add compute face atomic auto add faceIndex add compute face atomic auto add faceIndex * feat(shader): add attribute auto location * feat: add compute graphic add compute graphic * feat: Implement basic Shape3D graphics rendering capabilities Cirlce/Rect/RoundRect/Ellipse * feat: add LineShape3D Add line drawing capabilities that support lineJoin types of bevel/miter/round... * feat: new feature of CurveShape3D . new feature of CurveShape3D . * feat: shape order Support dynamic adjustment of shape order. * fix: pointIndex in shapeData. Change the global pointIndex to local pointIndex. * feat: seperate line and fill area. Seperate line and fill area of shape3d. * feat: Implement the startAngle and endAngle capabilities for circles and ellipses Implement the startAngle and endAngle capabilities for circles and ellipses * feat: Add Path3D API. Add Path3D API. * fix: Error of moveTo api. Error of moveTo api. * feat: Implement a 3D path renderer Implement a 3D path renderer * feat: Add annotation. Add annotation. * Squashed commit of the following: commit 68e6f56 Author: ShuangLiu <liu.shuang@huasheng.io> Date: Thu Jan 11 16:22:25 2024 +0800 * chore: update pnpm-lock.yaml * docs:Add annotation. Add annotation. * fix: Set isClosed for Path2D and Path3D to always be false Set isClosed for Path2D and Path3D to always be false * fix: Remove grass graphic renderer. Remove some samples. * chore: Update import path. Update import path. * fix: Auto bind location block. Auto bind location block. * feat: Enable Shape3D to support FillRotation Enable Shape3D to support FillRotation * upd: Delete some samples. Delete some samples. * perf: Simplified path calculation. Simplify the calculation of the orientation of each line segment. --------- Co-authored-by: OldGentleMan <blackswanxn@gmail.com> Co-authored-by: ShuangLiu <liu.shuang@huasheng.io> Co-authored-by: Codeboy-cn <zhangcanbo@outlook.com>
1 parent b0319d9 commit 9f856bb

File tree

81 files changed

+6336
-373
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+6336
-373
lines changed

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"typedoc-plugin-markdown": "^3.15.3",
5353
"typescript": "^5.0.4",
5454
"vite": "^4.3.9",
55-
"xvfb-maybe": "^0.2.1"
55+
"xvfb-maybe": "^0.2.1",
56+
"earcut": "^2.2.4"
5657
}
5758
}

packages/effect/grass/shader/GrassBaseShader.ts

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,22 @@ export let GrassBaseShader = /*wgsl*/ `
44
#include "ShadingInput"
55
66
struct FragmentVarying {
7-
@location(0) fragUV0: vec2<f32>,
8-
@location(1) fragUV1: vec2<f32>,
9-
@location(2) viewPosition: vec4<f32>,
10-
@location(3) fragPosition: vec4<f32>,
11-
@location(4) vWorldPos: vec4<f32>,
12-
@location(5) vWorldNormal: vec3<f32>,
13-
@location(6) vColor: vec4<f32>,
14-
@location(7) vShadowPos: vec4<f32>,
15-
#if USE_TANGENT
16-
@location(8) TANGENT: vec4<f32>,
17-
#endif
7+
@location(auto) fragUV0: vec2<f32>,
8+
@location(auto) fragUV1: vec2<f32>,
9+
@location(auto) viewPosition: vec4<f32>,
10+
@location(auto) fragPosition: vec4<f32>,
11+
@location(auto) vWorldPos: vec4<f32>,
12+
@location(auto) vWorldNormal: vec3<f32>,
13+
@location(auto) vColor: vec4<f32>,
14+
15+
#if USE_SHADOWMAPING
16+
@location(auto) vShadowPos: vec4<f32>,
17+
#endif
18+
19+
#if USE_TANGENT
20+
@location(auto) TANGENT: vec4<f32>,
21+
#endif
22+
1823
@builtin(front_facing) face: bool,
1924
@builtin(position) fragCoord : vec4<f32>
2025
};

packages/effect/grass/shader/GrassVertexAttributeShader.ts

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,26 @@ export let GrassVertexAttributeShader: string = /*wgsl*/ `
44
struct VertexAttributes{
55
@builtin(instance_index) index : u32,
66
7-
@location(0) position: vec3<f32>,
8-
@location(1) normal: vec3<f32>,
9-
@location(2) uv: vec2<f32>,
10-
@location(3) TEXCOORD_1: vec2<f32>,
11-
@location(4) vIndex: f32,
12-
@location(5) weights0: vec4<f32>,
7+
@location(auto) position: vec3<f32>,
8+
@location(auto) normal: vec3<f32>,
9+
@location(auto) uv: vec2<f32>,
10+
@location(auto) TEXCOORD_1: vec2<f32>,
11+
@location(auto) vIndex: f32,
12+
@location(auto) weights0: vec4<f32>,
1313
}
1414
1515
struct VertexOutput {
16-
@location(0) index: f32,
17-
@location(1) varying_UV0: vec2<f32>,
18-
@location(2) varying_UV1: vec2<f32>,
19-
@location(3) varying_ViewPos: vec4<f32>,
20-
@location(4) varying_Clip: vec4<f32>,
21-
@location(5) varying_WPos: vec4<f32>,
22-
@location(6) varying_WNormal: vec3<f32>,
23-
@location(7) varying_Color: vec4<f32>,
24-
@location(8) varying_ShadowPos: vec4<f32>,
16+
@location(auto) index: f32,
17+
@location(auto) varying_UV0: vec2<f32>,
18+
@location(auto) varying_UV1: vec2<f32>,
19+
@location(auto) varying_ViewPos: vec4<f32>,
20+
@location(auto) varying_Clip: vec4<f32>,
21+
@location(auto) varying_WPos: vec4<f32>,
22+
@location(auto) varying_WNormal: vec3<f32>,
23+
@location(auto) varying_Color: vec4<f32>,
24+
#if USE_SHADOWMAPING
25+
@location(auto) varying_ShadowPos: vec4<f32>,
26+
#endif
2527
@builtin(position) member: vec4<f32>
2628
};
2729
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
export let CircleShape3DCode_cs = /*wgsl*/`
2+
3+
struct CircleShape3D {
4+
base:ShapeDataBase,
5+
6+
radius: f32,
7+
segment: f32,
8+
startAngle: f32,
9+
endAngle: f32,
10+
11+
arcType:f32,
12+
a:f32,
13+
b:f32,
14+
c:f32,
15+
}
16+
17+
fn getCircleShape3D(node:ShapeData) -> CircleShape3D{
18+
return CircleShape3D(
19+
node.base,
20+
node.xa, node.xb, node.xc, node.xd,
21+
node.xe, node.xf, node.xg, node.xh);
22+
}
23+
24+
fn drawCircleFace(nodeData:ShapeData, keyPoint:Path3DKeyPoint){
25+
let shapeData:CircleShape3D = getCircleShape3D(nodeData);
26+
var radius = max(0.0, shapeData.radius);
27+
let baseData = nodeData.base;
28+
var lineWidth = min(baseData.lineWidth, radius * 2.0);
29+
let needDraw = round(baseData.destPointCount) > round(keyPoint.pointIndex + 1.0);
30+
if(needDraw){
31+
var cPoint:vec3f = zero_pos;
32+
if(u32(round(shapeData.arcType)) == 1u){
33+
let destStart = u32(round(baseData.destPointStart));
34+
let destEnd = destStart + u32(round(baseData.destPointCount)) - 1u;
35+
let startPoint:Path3DKeyPoint = destPathBuffer[destStart];
36+
let endPoint:Path3DKeyPoint = destPathBuffer[destEnd];
37+
cPoint = (startPoint.pos + endPoint.pos) * 0.5;
38+
}
39+
drawShapeFace(nodeData, keyPoint, lineWidth, cPoint);
40+
}
41+
}
42+
43+
fn writeCirclePath(nodeData:ShapeData){
44+
let shapeData:CircleShape3D = getCircleShape3D(nodeData);
45+
let baseData = shapeData.base;
46+
let destPointCount = baseData.destPointCount;
47+
let destPointStart = baseData.destPointStart;
48+
var radius = max(0.0, shapeData.radius);
49+
var lineWidth = min(nodeData.base.lineWidth, radius * 2.0);
50+
if(baseData.line > 0.5){
51+
radius -= lineWidth * 0.5;
52+
}
53+
var lastPoint:vec4<f32>;
54+
for(var i = 0.0; i < destPointCount; i += 1.0)
55+
{
56+
lastPoint = writeCirclePoint(i + destPointStart, shapeData, radius, i, lastPoint);
57+
}
58+
}
59+
60+
fn writeCirclePoint(pointIndex:f32, shapeData:CircleShape3D, radius:f32, localPointIndex:f32, lastPoint:vec4<f32>) -> vec4<f32>
61+
{
62+
let pathIndex = u32(round(pointIndex));
63+
let t = (pointIndex - shapeData.base.destPointStart) / shapeData.segment;
64+
let angle = pi_2 * mix(shapeData.startAngle, shapeData.endAngle, t) / 360.0;
65+
66+
let right = vec3<f32>(cos(angle), 0.0, sin(angle));
67+
let pos = right * radius;
68+
var newOverallLength = lastPoint.w;
69+
if(localPointIndex > 0.0){
70+
newOverallLength += length(pos - lastPoint.xyz);
71+
}
72+
destPathBuffer[pathIndex].pos = pos;
73+
destPathBuffer[pathIndex].right = right;
74+
destPathBuffer[pathIndex].shapeIndex = f32(shapeIndex);
75+
destPathBuffer[pathIndex].pointIndex = localPointIndex;
76+
destPathBuffer[pathIndex].overallLength = newOverallLength;
77+
return vec4<f32>(pos, newOverallLength);
78+
}
79+
80+
`
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
export let EllipseShape3DCode_cs = /*wgsl*/`
2+
3+
struct EllipseShape3D {
4+
base:ShapeDataBase,
5+
6+
rx: f32,
7+
ry: f32,
8+
segment: f32,
9+
rotation: f32,
10+
11+
startAngle: f32,
12+
endAngle: f32,
13+
arcType:f32,
14+
a:f32,
15+
}
16+
17+
fn getEllipseShape3D(node:ShapeData) -> EllipseShape3D{
18+
return EllipseShape3D(
19+
node.base,
20+
node.xa, node.xb, node.xc, node.xd,
21+
node.xe, node.xf, node.xg, node.xh);
22+
}
23+
24+
fn drawEllipseFace(nodeData:ShapeData, keyPoint:Path3DKeyPoint){
25+
let shapeData:EllipseShape3D = getEllipseShape3D(nodeData);
26+
let baseData = nodeData.base;
27+
var radius = max(0.0, min(shapeData.rx, shapeData.ry));
28+
var lineWidth = min(nodeData.base.lineWidth, radius * 2.0);
29+
let needDraw = round(baseData.destPointCount) > round(keyPoint.pointIndex + 1.0);
30+
31+
if(needDraw){
32+
var cPoint:vec3f = zero_pos;
33+
if(u32(round(shapeData.arcType)) == 1u){
34+
let destStart = u32(round(baseData.destPointStart));
35+
let destEnd = destStart + u32(round(baseData.destPointCount)) - 1u;
36+
let startPoint:Path3DKeyPoint = destPathBuffer[destStart];
37+
let endPoint:Path3DKeyPoint = destPathBuffer[destEnd];
38+
39+
cPoint = (startPoint.pos + endPoint.pos) * 0.5;
40+
}
41+
drawShapeFace(nodeData, keyPoint, lineWidth, cPoint);
42+
}
43+
}
44+
45+
fn writeEllipsePath(nodeData:ShapeData){
46+
let shapeData:EllipseShape3D = getEllipseShape3D(nodeData);
47+
let baseData = shapeData.base;
48+
let destPointCount = baseData.destPointCount;
49+
let destPointStart = baseData.destPointStart;
50+
var radius = max(0.0, min(shapeData.rx, shapeData.ry));
51+
var lineWidth = min(nodeData.base.lineWidth, radius * 2.0);
52+
var rx = shapeData.rx;
53+
var ry = shapeData.ry;
54+
if(baseData.line > 0.5){
55+
rx -= lineWidth * 0.5;
56+
ry -= lineWidth * 0.5;
57+
}
58+
var rotateMat:mat3x3<f32> = buildRotateYMat3(shapeData.rotation);
59+
var lastPoint:vec4<f32>;
60+
for(var i = 0.0; i < destPointCount; i += 1.0)
61+
{
62+
lastPoint = writeEllipsePoint(i + destPointStart, shapeData, rx, ry, rotateMat, i, lastPoint);
63+
}
64+
}
65+
66+
fn writeEllipsePoint(pointIndex:f32, shapeData:EllipseShape3D, rx:f32, ry:f32, rotation:mat3x3<f32>, localPointIndex:f32, lastPoint:vec4<f32>) -> vec4<f32>
67+
{
68+
let pathIndex = u32(round(pointIndex));
69+
// let angle = pi_2 * (pointIndex - shapeData.base.destPointStart) / shapeData.segment;
70+
let t = (pointIndex - shapeData.base.destPointStart) / shapeData.segment;
71+
let angle = pi_2 * mix(shapeData.startAngle, shapeData.endAngle, t) / 360.0;
72+
73+
74+
let pos = rotation * vec3<f32>(cos(angle) * rx, 0.0, sin(angle) * ry);
75+
let deltaPos = rotation * vec3<f32>(cos(angle + 0.01) * rx, 0.0, sin(angle + 0.01) * ry);
76+
let up = vec3<f32>(0.0, 1.0, 0.0);
77+
78+
var newOverallLength = lastPoint.w;
79+
if(localPointIndex > 0.0){
80+
newOverallLength += length(pos - lastPoint.xyz);
81+
}
82+
destPathBuffer[pathIndex].pos = pos;
83+
destPathBuffer[pathIndex].right = normalize(cross(up, normalize(deltaPos - pos)));
84+
destPathBuffer[pathIndex].shapeIndex = f32(shapeIndex);
85+
destPathBuffer[pathIndex].pointIndex = localPointIndex;
86+
destPathBuffer[pathIndex].overallLength = newOverallLength;
87+
88+
return vec4<f32>(pos, newOverallLength);
89+
}
90+
91+
`

0 commit comments

Comments
 (0)