How to draw graphics smoothly and some usage issues.

[fenggy]

I am currently using Magnum to write a 3D editor, but I am encountering a problem that is quite tricky for me. I have tried many times but have not been able to solve it. I hope to receive help.

I used PickingExample as the basis, rotated the x-axis by -90 degrees, and used planeSolid and grid3DWireframe as the ground and scale lines. However, I found that the scale lines had severe jagged edges, especially after adding the ground, the effect was even worse. I have tried the following but have not been able to solve it. What should I do?

1.Enable anti aliasing, but it has no effect

`

GL::Renderer::enable(GL::Renderer::Feature::DepthTest);
GL::Renderer::enable(GL::Renderer::Feature::FaceCulling);
GL::Renderer::enable(GL::Renderer::Feature::Multisampling);
GL::Renderer::enable(GL::Renderer::Feature::Blending);
GL::Renderer::setBlendFunction(
	GL::Renderer::BlendFunction::SourceAlpha,
	GL::Renderer::BlendFunction::OneMinusSourceAlpha
);

`
2.Change the buffer type, t it has no effect too.

`

_colorTexture.setStorage(1,GL::TextureFormat::RGBA8, viewportSize);
_objectIdTexture.setStorage(1, GL::TextureFormat::R16UI, viewportSize);
_color.setStorage(GL::RenderbufferFormat::RGBA8, viewportSize);
_objectId.setStorage(GL::RenderbufferFormat::R16UI, viewportSize);
_depth.setStorage(GL::RenderbufferFormat::DepthComponent24, viewportSize);  
_framebuffer = GL::Framebuffer{ viewportRect };
_framebuffer
	.attachTexture(GL::Framebuffer::ColorAttachment{ 0 }, _colorTexture,0)    //not use _color 
	.attachTexture(GL::Framebuffer::ColorAttachment{ 1 }, _objectIdTexture,0)//not use _objectId ,
	.attachRenderbuffer(GL::Framebuffer::BufferAttachment::Depth, _depth);

`
In addition, I also have a problem that the ground is not displayed. Because FaceCulling is enabled, sometimes the ground is not displayed when rotating. I query the Internet and get two solutions. One is to dynamically control the FaceCulling state, and the other is to add a copy of data to the back. I don't know if there is a better solution, because I found that there is a side in Threejs: THREE. DoubleSide, configured. What is the most reasonable solution in Magnum? thank you.

I will draw it in the following way.

`

class GroundPanelObject : public Object3D, SceneGraph::Drawable3D {
public:
	explicit GroundPanelObject(UnsignedInt id, Shaders::FlatGL3D& shader, const Color3& color, GL::Mesh& mesh, Object3D& parent, SceneGraph::DrawableGroup3D& drawables)
		: Object3D{ &parent }, SceneGraph::Drawable3D{ *this, &drawables }, _id{ id }, _selected{ false }, _shader(shader), _color{ color }, _mesh(mesh) {
	}
	void setSelected(bool selected) { _selected = selected; }
private:
	virtual void draw(const Matrix4& transformationMatrix, SceneGraph::Camera3D& camera) {
		GL::Renderer::enable(GL::Renderer::Feature::Multisampling);
		GL::Renderer::enable(GL::Renderer::Feature::Blending);
		GL::Renderer::setBlendFunction(
			GL::Renderer::BlendFunction::SourceAlpha,
			GL::Renderer::BlendFunction::OneMinusSourceAlpha
		);
		_shader
			.setColor(_color)
			.setTransformationProjectionMatrix(camera.projectionMatrix() * transformationMatrix)
			.draw(_mesh);
	}
	UnsignedInt _id;
	bool _selected;
	Shaders::FlatGL3D& _shader;
	Color3 _color;
	GL::Mesh& _mesh;
};`

At the same time, I want to use the following code to draw the main and auxiliary scale lines, but the effect does not meet expectations. Can you give me some ideas? Thank you
`

_gridMain = MeshTools::compile(Primitives::grid3DWireframe({ 20,20 }));
_gridMinor = MeshTools::compile(Primitives::grid3DWireframe({ 200,200 }));

`
The following only displays the mainline effect

To change the z-up mode, I used the following code to adjust the camera. The example of an arcball is good, but it cannot be freely scaled according to the mouse position. Is there a directly available solution there?
`

Vector3 center(0.0f, 0.0f, 0.0f);
Vector3 direction = (center - m_cameraPosition).normalized();
Vector3 up = Vector3::zAxis(); // Z-Up
Vector3 right = Math::cross(direction, up).normalized();
up = Math::cross(right, direction).normalized();

Matrix4 transform;
transform[0] = Vector4(right, 0.0f);
transform[1] = Vector4(up, 0.0f);
transform[2] = Vector4(-direction, 0.0f);
transform[3] = Vector4(m_cameraPosition, 1.0f);
_cameraObject->setTransformation(transform);

`

My development environment is
environment
window11 vs2022

[fenggy]

Forgetting to configure wxwidgets also has no effect, as shown below
`

wxGLAttributes attributes;
attributes.PlatformDefaults()
	.BufferSize(24)
	.MinRGBA(8, 8, 8, 0)
	.Depth(24)
	.Stencil(0)
	.DoubleBuffer()
	.SampleBuffers(1) 
	.Samplers(4) 
	.EndList();

`

[fenggy]

Add a zoom effect image, the zoom effect is not very good when there is ground, How to achieve smoothing effect? thanks

[fenggy]

The following code solves some smoothing problems, but the picking function is malfunctioning. I have tried many times but currently have no solution. Can you give me some suggestions?
`

_colorTexture = GL::MultisampleTexture2D{};
_objectIdTexture = GL::MultisampleTexture2D{};
_depthTexture = GL::MultisampleTexture2D{};

_colorTexture.setStorage(4, GL::TextureFormat::RGBA8, viewportSize);
_objectIdTexture.setStorage(4, GL::TextureFormat::R32UI, viewportSize);
_depthTexture.setStorage(4, GL::TextureFormat::DepthComponent24, viewportSize);

_framebuffer
.attachTexture(GL::Framebuffer::ColorAttachment{ 0 }, _colorTexture)
.attachTexture(GL::Framebuffer::ColorAttachment{ 1 }, _objectIdTexture)
.attachTexture(GL::Framebuffer::BufferAttachment::Depth, _depthTexture)
.mapForDraw({
	{Shaders::PhongGL::ColorOutput, GL::Framebuffer::ColorAttachment{0}},
	{Shaders::PhongGL::ObjectIdOutput, GL::Framebuffer::ColorAttachment{1}}
	});

The following logic is not working, and other solutions have been tried but did not meet expectations. Can you provide some ideas? Thank you

_framebuffer.mapForRead(GL::Framebuffer::ColorAttachment{ 1 });
Image2D data = _framebuffer.read(
	Range2Di::fromSize(fbPosition, { 1, 1 }),
	{ PixelFormat::R32UI });
_framebuffer.mapForRead(GL::Framebuffer::ColorAttachment{ 0 });
for (auto* o : _objects) o->setSelected(false);
UnsignedInt id = data.pixels<UnsignedInt>()[0][0];
if (id > 0 && id < ObjectCount + 1)
	_objects[id - 1]->setSelected(true);

`

[mosra]

Hi, sorry that I wasn't able to reply earlier.

Multisampling + object picking is kind of tricky, unfortunately. You managed to solve the multisampling part with the above it seems, that's great. But reading from a multisampled framebuffer will likely give you a GL error, you have to blit (a part of) it to a non-multisampled framebuffer first, and then read that. So, something like this:

/* Create just once, perhaps even in a smaller size and then use different  
   input and output rectangle in blit() */
GL::Texture2D resolvedObjectIdTexture;
GL::Framebuffer resolve{{{}, viewportSize}};
resolvedObjectIdTexture.setStorage(GL::TextureFormat::R32UI, viewportSize);
resolve.attachTexture(GL::Framebuffer::ColorAttachment{1}, _resolvedObjectIdTexture);

/* Blit just the part you want to read */
GL::AbstractFramebuffer::blit(_framebuffer, resolve, 
    Range2Di::fromSize(fbPosition, { 1, 1 }), GL::FramebufferBlitMask:Color);

/* Like before */
resolve.read(
    Range2Di::fromSize(fbPosition, { 1, 1 }),
    {PixelFormat::R32UI});
...

Regarding the strangely missing lines in the grid I'm not sure. Isn't it possible that some Z fighting is going on? Or the other grid being drawn white and thus making it look like some lines disappear?

There's also the Mouse Interaction example which draws a grid, uses multisampling (in the default framebuffer) for smooth lines and implements controls for depth-aware panning and zooming with a mouse. So maybe there are some ideas you could reuse?

[fenggy]

The material part can be processed transparently through GLSL code, which can achieve the Threejs effect. as follows

`

gl_FragColor = vec4(color, opacity * grid);

`

This can achieve both transparent display of materials and opaque display of line segments. Perfect, thank you for your help, boss.

[fenggy]

Thank you for providing ideas and direction. After trying, the problem should be solved, and the cause of the grid line flicker issue has also been identified, which was caused by Z-fighting. The current gridline effect does not meet expectations, and I am trying to customize shaders to achieve it. Currently, there are still issues with transparency, and I am still researching. The overall effect is very good.
The rendering logic is adjusted as follows
`

_wxGlCanvas->SetCurrent(*_wxGlContext);

_framebuffer.bind();
_framebuffer.setViewport(_framebuffer.viewport()); 
_framebuffer
.clearColor(0, Color3{ 0.125f })
.clearColor(1, Vector4ui{})
.clearDepth(1.0f)
.bind();

GL::Renderer::enable(GL::Renderer::Feature::DepthTest);
GL::Renderer::enable(GL::Renderer::Feature::Multisampling);

_camera->draw(_drawables);
_framebuffer.bind();
_framebuffer.mapForRead(GL::Framebuffer::ColorAttachment{ 1 });
_pickingFramebuffer.bind();
_pickingFramebuffer.mapForDraw({ GL::Framebuffer::ColorAttachment{0} });

GL::AbstractFramebuffer::blit(
	_framebuffer, _pickingFramebuffer,
	Range2Di::fromSize({}, _framebuffer.viewport().size()),
	Range2Di::fromSize({}, _pickingFramebuffer.viewport().size()),
	GL::FramebufferBlit::Color,
	GL::FramebufferBlitFilter::Nearest
);
_framebuffer.bind(); 

_framebuffer.mapForRead(GL::Framebuffer::ColorAttachment{ 0 });

GL::defaultFramebuffer.bind();
GL::defaultFramebuffer.setViewport(
	Range2Di{ {0, 0}, {static_cast<Int>(_wxGlCanvas->GetSize().x), static_cast<Int>(_wxGlCanvas->GetSize().y)} });

GL::AbstractFramebuffer::blit(
	_framebuffer, GL::defaultFramebuffer,
	Range2Di::fromSize({}, _framebuffer.viewport().size()),
	Range2Di::fromSize({}, GL::defaultFramebuffer.viewport().size()),
	GL::FramebufferBlit::Color,
	GL::FramebufferBlitFilter::Linear 
);

_wxGlCanvas->SwapBuffers();

`

Resolve the issue of grid flicker ( Z-fighting)
`

GL::Renderer::enable(GL::Renderer::Feature::PolygonOffsetFill);
GL::Renderer::setPolygonOffset(1.f, 1.f);
_shader->draw(_mesh);
GL::Renderer::disable(GL::Renderer::Feature::PolygonOffsetFill);

`
At present, the implementation effect can be said to be very cool, but the shader code is too difficult to be realistic, and I still can't improve it.

[fenggy]

Boss, describe my problem. The gridlines are implemented through custom shaders, as shown in the above picture. The core code is as follows

I want to implement a function similar to drawing lines on a transparent canvas, that is, making the planeSolid transparent, but the grid lines implemented by shaders are opaque. I have tried various methods recently but have not received an answer. I also tried planWireframe, although it has transparency function, the shader code cannot work. Now only setOpacity (. 5f) is available; But it resulted in unclear images.

`

// create a plane  range(-100 ,100)
_gridMain = MeshTools::compile(planeSolid());
_gridMinor = MeshTools::compile(planeSolid());

//drawable
GridDrawable* main = new GridDrawable{ .1f,10.f, _gridShader.get(),0x2f83cc_rgbf,_gridMain,_scene,_drawables };
GridDrawable* minor = new GridDrawable{ .1f,1.f,_gridShader.get(),0xCAF3EB_rgbf,_gridMinor,_scene,_drawables };


class GridDrawable : public Object3D, SceneGraph::Drawable3D {
public:
    explicit GridDrawable(Float lineWidth, Float division, GridShader* shader, const Color3& color, GL::Mesh& mesh, Object3D& parent, SceneGraph::DrawableGroup3D& drawables)
	    : _lineWidth(lineWidth), _division(division), Object3D{ &parent }, SceneGraph::Drawable3D{ *this, &drawables }, _shader(shader), _color{ color }, _mesh(mesh) {
    }
private:
    virtual void draw(const Matrix4& transformationMatrix, SceneGraph::Camera3D& camera) {

	    GL::Renderer::enable(GL::Renderer::Feature::PolygonOffsetFill);
	    GL::Renderer::setPolygonOffset(1.f, 1.f);
	    GL::Renderer::enable(GL::Renderer::Feature::Blending);
	    GL::Renderer::setBlendEquation(GL::Renderer::BlendEquation::Add);
	    GL::Renderer::setBlendFunction(GL::Renderer::BlendFunction::SourceAlpha, GL::Renderer::BlendFunction::OneMinusSourceAlpha);

	    GL::Renderer::setDepthMask(false);
	    _shader->setProjectionMatrix(camera.projectionMatrix());
	    _shader->setModelViewMatrix(transformationMatrix);
	    _shader->setColor(_color);
	    _shader->setLineWidth(_lineWidth);
	    _shader->setDivision(_division);
	    _shader->setOpacity(.5f);

	    _shader->draw(_mesh);
	    GL::Renderer::disable(GL::Renderer::Feature::PolygonOffsetFill);

	    GL::Renderer::setDepthMask(true);
	    GL::Renderer::disable(GL::Renderer::Feature::Blending);
    }
    GridShader* _shader;
    Color3 _color;
    GL::Mesh& _mesh;
    Float _lineWidth;
    Float _division;
};
//sharder
class GridShader : public GL::AbstractShaderProgram {
public:
    typedef Magnum::GL::Attribute<0, Magnum::Vector3> Position;
    typedef Magnum::GL::Attribute<1, Magnum::Vector2> TextureCoordinates;


    explicit GridShader() {
	    vert.addSource(R"(...)");
	    frag.addSource(R"(... )");

	    if (!vert.compile()) {
		    //Debug{} << "Vertex shader compilation failed:" << vert.log();
		    CORRADE_ASSERT(false, "Vertex shader compilation failed", );
	    }
	    if (!frag.compile()) {
		    //Debug{} << "Fragment shader compilation failed:" << frag.log();
		    CORRADE_ASSERT(false, "Fragment shader compilation failed", );
	    }


	    attachShaders({ vert, frag });
	    //....
}

`

This is the configuration for JS, similar to this configuration. How should I proceed and provide some suggestions,
`

this.material = new THREE.ShaderMaterial({
    color:color,
    side : THREE.DoubleSide,
    extensions : { derivatives: true },
    transparent : true,    // Material transparent    ~~~~~~~
    uniforms : {
    color: { type: 'c', value : color },
    division : this.division,
    lineWidth : { type: 'f', value : 0.1 },
    opacity // but opacity is 1 ~~~~~~~~~
    },
    vertexShader : dataShader.vertexShader,
    fragmentShader : dataShader.fragmentShader
});

`

[fenggy]

The material part can be processed transparently through GLSL code, which can achieve the Threejs effect. as follows

gl_FragColor = vec4(color, opacity * grid);