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>
Orillusion · Jan 26, 2024 · 9f856bb · 9f856bb
1 parent b0319d9
commit 9f856bb
Show file tree

Hide file tree

Showing 81 changed files with 6,336 additions and 373 deletions.
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
         "typedoc-plugin-markdown": "^3.15.3",
         "typescript": "^5.0.4",
         "vite": "^4.3.9",
-        "xvfb-maybe": "^0.2.1"
+        "xvfb-maybe": "^0.2.1",
+        "earcut": "^2.2.4"
     }
 }
diff --git a/packages/effect/grass/shader/GrassBaseShader.ts b/packages/effect/grass/shader/GrassBaseShader.ts
@@ -4,17 +4,22 @@ export let GrassBaseShader = /*wgsl*/ `
     #include "ShadingInput"
  
     struct FragmentVarying {
-        @location(0) fragUV0: vec2<f32>,
-        @location(1) fragUV1: vec2<f32>,
-        @location(2) viewPosition: vec4<f32>,
-        @location(3) fragPosition: vec4<f32>,
-        @location(4) vWorldPos: vec4<f32>,
-        @location(5) vWorldNormal: vec3<f32>,
-        @location(6) vColor: vec4<f32>,
-        @location(7) vShadowPos: vec4<f32>,
-      #if USE_TANGENT
-          @location(8) TANGENT: vec4<f32>,
-      #endif
+        @location(auto) fragUV0: vec2<f32>,
+        @location(auto) fragUV1: vec2<f32>,
+        @location(auto) viewPosition: vec4<f32>,
+        @location(auto) fragPosition: vec4<f32>,
+        @location(auto) vWorldPos: vec4<f32>,
+        @location(auto) vWorldNormal: vec3<f32>,
+        @location(auto) vColor: vec4<f32>,
+
+        #if USE_SHADOWMAPING
+            @location(auto) vShadowPos: vec4<f32>,
+        #endif
+
+        #if USE_TANGENT
+            @location(auto) TANGENT: vec4<f32>,
+        #endif
+        
         @builtin(front_facing) face: bool,
         @builtin(position) fragCoord : vec4<f32>
     };

diff --git a/packages/effect/grass/shader/GrassVertexAttributeShader.ts b/packages/effect/grass/shader/GrassVertexAttributeShader.ts
@@ -4,24 +4,26 @@ export let GrassVertexAttributeShader: string = /*wgsl*/ `
     struct VertexAttributes{
         @builtin(instance_index) index : u32,
 
-        @location(0) position: vec3<f32>,
-        @location(1) normal: vec3<f32>,
-        @location(2) uv: vec2<f32>,
-        @location(3) TEXCOORD_1: vec2<f32>,
-        @location(4) vIndex: f32,
-        @location(5) weights0: vec4<f32>, 
+        @location(auto) position: vec3<f32>,
+        @location(auto) normal: vec3<f32>,
+        @location(auto) uv: vec2<f32>,
+        @location(auto) TEXCOORD_1: vec2<f32>,
+        @location(auto) vIndex: f32,
+        @location(auto) weights0: vec4<f32>, 
     }
 
     struct VertexOutput {
-        @location(0) index: f32,
-        @location(1) varying_UV0: vec2<f32>,
-        @location(2) varying_UV1: vec2<f32>,
-        @location(3) varying_ViewPos: vec4<f32>,
-        @location(4) varying_Clip: vec4<f32>,
-        @location(5) varying_WPos: vec4<f32>,
-        @location(6) varying_WNormal: vec3<f32>,
-        @location(7) varying_Color: vec4<f32>,
-        @location(8) varying_ShadowPos: vec4<f32>,
+        @location(auto) index: f32,
+        @location(auto) varying_UV0: vec2<f32>,
+        @location(auto) varying_UV1: vec2<f32>,
+        @location(auto) varying_ViewPos: vec4<f32>,
+        @location(auto) varying_Clip: vec4<f32>,
+        @location(auto) varying_WPos: vec4<f32>,
+        @location(auto) varying_WNormal: vec3<f32>,
+        @location(auto) varying_Color: vec4<f32>,
+        #if USE_SHADOWMAPING
+            @location(auto) varying_ShadowPos: vec4<f32>,
+        #endif
         @builtin(position) member: vec4<f32>
     };
 

diff --git a/packages/graphic/compute/shape3d/CircleShape3DCode_cs.ts b/packages/graphic/compute/shape3d/CircleShape3DCode_cs.ts
@@ -0,0 +1,80 @@
+export let CircleShape3DCode_cs = /*wgsl*/`
+
+struct CircleShape3D {
+    base:ShapeDataBase,
+    
+    radius: f32,
+    segment: f32,
+    startAngle: f32,
+    endAngle: f32,
+    
+    arcType:f32,
+    a:f32,
+    b:f32,
+    c:f32,
+ }
+
+fn getCircleShape3D(node:ShapeData) -> CircleShape3D{
+    return CircleShape3D(
+         node.base,
+         node.xa, node.xb, node.xc, node.xd,
+         node.xe, node.xf, node.xg, node.xh);
+ }
+ 
+fn drawCircleFace(nodeData:ShapeData, keyPoint:Path3DKeyPoint){
+    let shapeData:CircleShape3D = getCircleShape3D(nodeData);
+    var radius = max(0.0, shapeData.radius);
+    let baseData = nodeData.base;
+    var lineWidth = min(baseData.lineWidth, radius * 2.0);
+    let needDraw = round(baseData.destPointCount) > round(keyPoint.pointIndex + 1.0);
+    if(needDraw){
+        var cPoint:vec3f = zero_pos;
+        if(u32(round(shapeData.arcType)) == 1u){
+            let destStart = u32(round(baseData.destPointStart));
+            let destEnd = destStart + u32(round(baseData.destPointCount)) - 1u;
+            let startPoint:Path3DKeyPoint = destPathBuffer[destStart];
+            let endPoint:Path3DKeyPoint = destPathBuffer[destEnd];
+            cPoint = (startPoint.pos + endPoint.pos) * 0.5;
+        }
+        drawShapeFace(nodeData, keyPoint, lineWidth, cPoint);
+    }
+}
+
+fn writeCirclePath(nodeData:ShapeData){
+    let shapeData:CircleShape3D = getCircleShape3D(nodeData);
+    let baseData = shapeData.base;
+    let destPointCount = baseData.destPointCount;
+    let destPointStart = baseData.destPointStart;
+    var radius = max(0.0, shapeData.radius);
+    var lineWidth = min(nodeData.base.lineWidth, radius * 2.0);
+    if(baseData.line > 0.5){
+        radius -= lineWidth * 0.5;
+    }
+    var lastPoint:vec4<f32>;
+    for(var i = 0.0; i < destPointCount; i += 1.0)
+    {
+        lastPoint = writeCirclePoint(i + destPointStart, shapeData, radius, i, lastPoint);
+    }
+}
+
+fn writeCirclePoint(pointIndex:f32, shapeData:CircleShape3D, radius:f32, localPointIndex:f32, lastPoint:vec4<f32>) -> vec4<f32>
+{
+    let pathIndex = u32(round(pointIndex));
+    let t = (pointIndex - shapeData.base.destPointStart) / shapeData.segment;
+    let angle = pi_2 * mix(shapeData.startAngle, shapeData.endAngle, t) / 360.0;
+    
+    let right = vec3<f32>(cos(angle), 0.0, sin(angle));
+    let pos = right * radius;
+    var newOverallLength = lastPoint.w;
+    if(localPointIndex > 0.0){
+        newOverallLength += length(pos - lastPoint.xyz);
+    }
+    destPathBuffer[pathIndex].pos = pos;
+    destPathBuffer[pathIndex].right = right;
+    destPathBuffer[pathIndex].shapeIndex = f32(shapeIndex);
+    destPathBuffer[pathIndex].pointIndex = localPointIndex;
+    destPathBuffer[pathIndex].overallLength = newOverallLength;
+    return vec4<f32>(pos, newOverallLength);
+}
+
+`
diff --git a/packages/graphic/compute/shape3d/EllipseShape3DCode_cs.ts b/packages/graphic/compute/shape3d/EllipseShape3DCode_cs.ts
@@ -0,0 +1,91 @@
+export let EllipseShape3DCode_cs = /*wgsl*/`
+
+struct EllipseShape3D {
+    base:ShapeDataBase,
+    
+    rx: f32,
+    ry: f32,
+    segment: f32,
+    rotation: f32,
+    
+    startAngle: f32,
+    endAngle: f32,
+    arcType:f32,
+    a:f32,
+ }
+
+fn getEllipseShape3D(node:ShapeData) -> EllipseShape3D{
+    return EllipseShape3D(
+         node.base,
+         node.xa, node.xb, node.xc, node.xd,
+         node.xe, node.xf, node.xg, node.xh);
+ }
+ 
+fn drawEllipseFace(nodeData:ShapeData, keyPoint:Path3DKeyPoint){
+    let shapeData:EllipseShape3D = getEllipseShape3D(nodeData);
+    let baseData = nodeData.base;
+    var radius = max(0.0, min(shapeData.rx, shapeData.ry));
+    var lineWidth = min(nodeData.base.lineWidth, radius * 2.0);
+    let needDraw = round(baseData.destPointCount) > round(keyPoint.pointIndex + 1.0);
+
+    if(needDraw){
+        var cPoint:vec3f = zero_pos;
+        if(u32(round(shapeData.arcType)) == 1u){
+            let destStart = u32(round(baseData.destPointStart));
+            let destEnd = destStart + u32(round(baseData.destPointCount)) - 1u;
+            let startPoint:Path3DKeyPoint = destPathBuffer[destStart];
+            let endPoint:Path3DKeyPoint = destPathBuffer[destEnd];
+
+            cPoint = (startPoint.pos + endPoint.pos) * 0.5;
+        }
+        drawShapeFace(nodeData, keyPoint, lineWidth, cPoint);
+    }
+}
+
+fn writeEllipsePath(nodeData:ShapeData){
+    let shapeData:EllipseShape3D = getEllipseShape3D(nodeData);
+    let baseData = shapeData.base;
+    let destPointCount = baseData.destPointCount;
+    let destPointStart = baseData.destPointStart;
+    var radius = max(0.0, min(shapeData.rx, shapeData.ry));
+    var lineWidth = min(nodeData.base.lineWidth, radius * 2.0);
+    var rx = shapeData.rx;
+    var ry = shapeData.ry;
+    if(baseData.line > 0.5){
+        rx -= lineWidth * 0.5;
+        ry -= lineWidth * 0.5;
+    }
+    var rotateMat:mat3x3<f32> = buildRotateYMat3(shapeData.rotation);
+    var lastPoint:vec4<f32>;
+    for(var i = 0.0; i < destPointCount; i += 1.0)
+    {
+        lastPoint = writeEllipsePoint(i + destPointStart, shapeData, rx, ry, rotateMat, i, lastPoint);
+    }
+}
+
+fn writeEllipsePoint(pointIndex:f32, shapeData:EllipseShape3D, rx:f32, ry:f32, rotation:mat3x3<f32>, localPointIndex:f32, lastPoint:vec4<f32>) -> vec4<f32>
+{
+    let pathIndex = u32(round(pointIndex));
+    // let angle = pi_2 * (pointIndex - shapeData.base.destPointStart) / shapeData.segment;
+    let t = (pointIndex - shapeData.base.destPointStart) / shapeData.segment;
+    let angle = pi_2 * mix(shapeData.startAngle, shapeData.endAngle, t) / 360.0;
+    
+
+    let pos = rotation * vec3<f32>(cos(angle) * rx, 0.0, sin(angle) * ry);
+    let deltaPos = rotation * vec3<f32>(cos(angle + 0.01) * rx, 0.0, sin(angle + 0.01) * ry);
+    let up = vec3<f32>(0.0, 1.0, 0.0);
+
+    var newOverallLength = lastPoint.w;
+    if(localPointIndex > 0.0){
+        newOverallLength += length(pos - lastPoint.xyz);
+    }
+    destPathBuffer[pathIndex].pos = pos;
+    destPathBuffer[pathIndex].right = normalize(cross(up, normalize(deltaPos - pos)));
+    destPathBuffer[pathIndex].shapeIndex = f32(shapeIndex);
+    destPathBuffer[pathIndex].pointIndex = localPointIndex;
+    destPathBuffer[pathIndex].overallLength = newOverallLength;
+
+    return vec4<f32>(pos, newOverallLength);
+}
+
+`