fix(graphic): fix depth test for graphic lines

Orillusion · Dec 5, 2024 · e8257bc · e8257bc
1 parent 67b52e4
commit e8257bc
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 17 deletions.
diff --git a/packages/graphic/compute/graphic3d/Graphic3DShader.ts b/packages/graphic/compute/graphic3d/Graphic3DShader.ts
@@ -39,7 +39,7 @@ export let Graphic3DShader: string = /*wgsl*/ `
             @location(auto) worldNormal: vec4<f32>,
             @location(auto) material: vec4<f32>,
         // #endif
-        @builtin(frag_depth) out_depth: f32
+        // @builtin(frag_depth) out_depth: f32
     };
 
     @fragment

diff --git a/packages/graphic/package.json b/packages/graphic/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@orillusion/graphic",
-    "version": "0.2.4",
+    "version": "0.2.5",
     "author": "Orillusion",
     "description": "Orillusion Graphic Plugin",
     "main": "./dist/graphic.umd.js",

diff --git a/packages/graphic/renderer/Graphic3DRender.ts b/packages/graphic/renderer/Graphic3DRender.ts
@@ -4,8 +4,8 @@ import { Graphic3DFillRenderer } from "./Graphic3DFillRenderer";
 import { Graphic3DLineRenderer } from "./Graphic3DLineBatchRenderer";
 
 export class Graphic3D extends Object3D {
-    protected mLineRender: Graphic3DLineRenderer;
-    protected mFillRender: Graphic3DFillRenderer;
+    public mLineRender: Graphic3DLineRenderer;
+    public mFillRender: Graphic3DFillRenderer;
 
     constructor() {
         super();

diff --git a/packages/graphic/renderer/Graphics3DShape.ts b/packages/graphic/renderer/Graphics3DShape.ts
@@ -71,7 +71,7 @@ export class Graphics3DShape {
         this.fillShapeData(points, color);
     }
 
-    public fillShapeData(points: Vector3[], colors: Color | Color[], forceUpdate: boolean = false) {
+    public fillShapeData(points: Vector3[], colors: Color | Color[], forceUpdate: boolean = true) {
         if (!this.pointData) {
             this.pointData = new Float32Array(4 * points.length);
             this.colorData = new Float32Array(4 * points.length);

diff --git a/samples/graphic/Sample_GraphicLine.ts b/samples/graphic/Sample_GraphicLine.ts
@@ -1,8 +1,7 @@
 import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene";
-import { Scene3D, Engine3D, Vector3, Color, AnimationCurve, Keyframe, View3D } from "@orillusion/core";
-import { GUIUtil } from "@samples/utils/GUIUtil";
+import { Scene3D, Engine3D, Vector3, Color, AnimationCurve, Keyframe, View3D, BoxGeometry, LitMaterial, MeshRenderer, Object3D } from "@orillusion/core";
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Graphic3D } from '@orillusion/graphic'
+import { Graphic3D, Graphic3DLineRenderer } from '@orillusion/graphic'
 
 class Sample_GraphicLine {
     scene: Scene3D;
@@ -28,8 +27,6 @@ class Sample_GraphicLine {
         Engine3D.startRenderViews([exampleScene.view]);
         let job = Engine3D.getRenderJob(exampleScene.view);
         await this.initScene();
-        // GUIUtil.renderAtomosphericSky(exampleScene.atmosphericSky);
-        GUIUtil.renderDirLight(exampleScene.light);
     }
 
     async initScene() {
@@ -45,20 +42,29 @@ class Sample_GraphicLine {
         let lines = [];
         for (let i = 0; i < 100; i++) {
             let y = animCurve.getValue(i / (100 - 1)) * 10;
-            lines.push(
-                new Vector3(
-                    i,
-                    y,
-                    0
-                )
-            );
+            lines.push(new Vector3(i, y, 0));
         }
         this.graphic3D.drawLines('line2', lines, new Color().hexToRGB(Color.RED));
         this.graphic3D.drawBox('box1', new Vector3(-5, -5, -5), new Vector3(5, 5, 5), new Color().hexToRGB(Color.GREEN));
         this.graphic3D.drawCircle('Circle1', new Vector3(-15, -5, -5), 5, 15, Vector3.X_AXIS, new Color().hexToRGB(Color.GREEN));
         this.graphic3D.drawCircle('Circle2', new Vector3(-15, -5, -5), 5, 15, Vector3.Y_AXIS, new Color().hexToRGB(Color.GREEN));
         this.graphic3D.drawCircle('Circle3', new Vector3(-15, -5, -5), 5, 15, Vector3.Z_AXIS, new Color().hexToRGB(Color.GREEN));
         this.graphic3D.drawCircle('Circle4', new Vector3(-15, -5, -5), 5, 15, new Vector3(1, 1, 0), new Color().hexToRGB(Color.GREEN));
+
+        {
+            let obj = new Object3D();
+            let mr = obj.addComponent(MeshRenderer);
+            mr.geometry = new BoxGeometry(5, 5, 5);
+            mr.material = new LitMaterial();
+            this.scene.addChild(obj);
+        }
+        let btn = {'depthTest': true}
+        GUIHelp.add(btn, 'depthTest').onChange(v=>{
+            this.graphic3D.getComponents(Graphic3DLineRenderer).forEach(mr=>{
+                mr.materials[0].depthCompare = v ? 'less' : 'always'
+            })
+        })
+        GUIHelp.open()
     }
 }