#Access FBO or WebGLTexture from WebGLRenderTarget

17 messages · Page 1 of 1 (latest)

violet parcel
#

Hello, I'm rendering a threejs scene onto a texture that I'm using in ImGui as part of my interface system. I need a way to access the underlying WebGLTexture or FBO to easily add the texture onto a pure WebGL interface (ImGui). Here is roughly what the code looks like that I'm dealing with:

        // Setting and rendering to the target...
        this.renderTarget.setSize(this.size.x, this.size.y);
        render.setRenderTarget(this.renderTarget);
        render.render(this.scene, this.camera);
        render.setRenderTarget(null);
        // Usage of the texture (API I want to call)
        function Image(user_texture_id: WebGLTexture, size: Bind.interface_ImVec2);

So, the WebGL API I'm using takes a WebGLTexture, but renderTarget.texture is a threejs object that does not appear to expose the WebGLTexture or FBO, what's the suggested way to convert this? Thanks : )

violet parcel
#

Some ideas so far are to render to a dom element and then try going from there to a glcontext, but that would require a bunch of unnecessary actions each frame...

violet parcel
#

For anyone interested, the solution was:

let tp = this.ui.renderer.properties.get(this.renderTarget.texture);
this.targetTexture = tp.__webglTexture;

ImGui.Image(this.targetTexture, new ImGui.ImVec2(this.size.x, this.size.y));
#

Now just need to solve this causing it to be upside down and have other issues....

violet parcel
#

If I change the height and width to 100, the errors go away. But other multiples of two don't seem to work.

#

I'm trying to match a sub-window size, so I'm rounding down to the nearest multiple of two for height and width

violet parcel
#

Ok well the errors still persist when it's not a power of 2.... but I did manage to render the frame onto the texture like so:

#

However, the result is much darker and has less quality and antialiasing than the original scene. Does anyone have a better way to do this? I'd prefer to render the scene to a canvas so I can use offscreen canvas for performance, then somehow use the canvas's picture as a webgltexture in ImGui (like above)

spice fossil
# violet parcel Hello, I'm rendering a threejs scene onto a texture that I'm using in ImGui as p...

I want to make something similiar, but vice versa - render imgui window into texture, then create material and apply it to mesh. Here is example of making texture based on html elements and rendering it in 3d space.
I neved did low level graphics stuff, so I'm competely newbie in this question. I'd appreciate any help
https://threejs.org/examples/?q=vr#webxr_vr_sandbox
https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_sandbox.html#L191

GitHub

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

violet parcel
#

Yeah you saw my other thread too right?

spice fossil
#

Propably its better to create separate thread for my question

violet parcel
#

Yeah make a new one but I think I know what we can do to accomplish it

#

We can continue there

violet parcel
#

@spice fossil So did you ask your question ? What are you working on?