Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Fix screenCoordinates outline rendering in WebGL #1492

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

fix: Fix screenCoordinates outline rendering in WebGL #1492

wants to merge 2 commits into from

Conversation

0b5vr
Copy link
Contributor

@0b5vr 0b5vr commented Sep 13, 2024

Description

  • ea1e946: This commit adds new materials with outline to feature-test.html and webgpu-feature-test.html.
    • I suspect that we will have an issue that outline does not appear in r169 (next) WebGPURenderer. This commitment is to prepare to fix the issue.
    • I planned to just do this change in this PR but I spotted an issue I described below,,,
  • cd6c501: This commit fixes the screenCoordinates outline in WebGL.

The screenshot of the new feature-test.html:

image

@0b5vr
examples: MToon, Add materials with outline to feature-test.html
ea1e946 
I suspect that we will have an issue that outline does not appear in r169 WebGPURenderer

Also I spotted a bug in WebGL outline when the mode is screenCoordinates
@0b5vr
fix: Fix screenCoordinates outline rendering in WebGL
cd6c501 
Ref, the same logic in WebGPU: https://github.com/pixiv/three-vrm/blob/c30792c30865de5af7408fd8d0145cc7bc06c716/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts#L370
@0b5vr 0b5vr added bug Something isn't working examples Good examples helps people a lot labels Sep 13, 2024
@0b5vr 0b5vr added this to the next milestone Sep 13, 2024
@0b5vr 0b5vr requested a review from yue4u September 13, 2024 10:44
@0b5vr 0b5vr self-assigned this Sep 13, 2024
@0b5vr
Copy link
Contributor Author

0b5vr commented Sep 13, 2024 •
edited
Loading

I suspect that we will have an issue that outline does not appear in r169 (next) WebGPURenderer. This commitment is to prepare to fix the issue.

This was because this line fails if we load both three.module.js and three.webgpu.js in a catastrophic way.

three-vrm/packages/three-vrm-materials-mtoon/src/MToonMaterialLoaderPlugin.ts

Line 315 in cd6c501

if (!(surfaceMaterial instanceof THREE.Material)) {

And this easily happens when we write our importmap in this way:

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js",
      "three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.webgpu.js",
      // ...
    }
  }
</script>

maybe we should consider changing the instanceof line to more unsophisticated way? I think the Three.js codebase actually doesn't use instanceof against any Three.js classes.

yue4u
yue4u reviewed Sep 18, 2024
View reviewed changes
packages/three-vrm-materials-mtoon/src/shaders/mtoon.vert
outlineTex = texture2D( outlineWidthMultiplyTexture, outlineWidthMultiplyTextureUv ).g;
#endif

#ifdef OUTLINE_WIDTH_WORLD
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so OUTLINE_WIDTH_WORLD in no longer needed?

Copy link
Contributor Author

@0b5vr 0b5vr Sep 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, while I agree that it is too implicit to acknowledge that OUTLINE && !OUTLINE_WIDTH_SCREEN == OUTLINE_WIDTH_WORLD.

packages/three-vrm-materials-mtoon/src/shaders/mtoon.vert
vec2 projectedNormal = normalize( clipNormal.xy );
projectedNormal.x *= projectionMatrix[ 0 ].x / projectionMatrix[ 1 ].y;
gl_Position.xy += 2.0 * outlineWidthFactor * outlineTex * projectedNormal.xy;
outlineOffset *= vViewPosition.z / projectionMatrix[ 1 ].y;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

outlineOffset has been fixed and using the same logic in tsl

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yue4u yue4u yue4u left review comments

Assignees

@0b5vr 0b5vr

Labels
bug Something isn't working examples Good examples helps people a lot
Projects
None yet
Milestone
next
Development

Successfully merging this pull request may close these issues.
2 participants
@0b5vr @yue4u