bevyengine / bevy

A refreshingly simple data-driven game engine built in Rust
https://bevyengine.org
Apache License 2.0
35.54k stars 3.52k forks source link

wireframe not shown on the back of a surface #4819

Open jack1232 opened 2 years ago

jack1232 commented 2 years ago

Bevy version

bevy = { git = "https://github.com/bevyengine/bevy", rev="7cb4d3c"}

Operating system & version

Windows 11, Nvidia GeForce RTX 3060 with a Vulkan backend.

What you did

I created a simple 3D surface using a Sinc function. This is an open surface and needs to display both the front-facing and back-facing sides, so I set the double_sided field to true and cull_mode to None when creating material:

        material: materials.add(StandardMaterial{
            base_color: Color::rgba(1., 1., 1., 0.).into(),
            double_sided:true,
            cull_mode: None,
            ..default()
        }),

I then inserted the wireframe to this surface and got unexpected results: the wireframe is displayed only on the front face, as shown in this image:

bevy01_gif

What you expected to happen

The wireframe should be on both sides. I recreated this surface using the WebGPU and wgpu directly. Both the WebGPU and wgpu give the same results, as shown in this image:

bevy02_gif

You can see that the wireframe is on both sides. Since the bevy engine is based on wgpu, I don't understand why the wireframe is only on the front face in bevy.

Additional information

It is good to see that bevy is trying to improve wireframe with a specified color. #3677. I would like to suggest bevy to develop a wireframe similar to that in a Python version wgpu render engine called pygfx. pygfx not only creates a wireframe on both sides of a surface, but also allows the wireframe to have different colors on each side of itself, as shown here:

bevy04_gif

In addition, the pygfx engine lets change the thickness of the wireframe, which is hard to do in the original WebGPU and wgpu where the line width is fixed to 1px. Here shows the Sinc surface-wireframe with a yellow color and a thickness of 4px, which I created using pygfx.

bevy03_gif

This link shows the approach used in pygfx to implement wireframe with a specified thickness.

alice-i-cecile commented 2 years ago

I think these are all fantastic suggestions, and would welcome PRs to implement this.