Having trouble rendering to the framebuffer due to issues with the texture

In the process of incorporating shadow maps for shadows, I am attempting to render a scene to a separate framebuffer (texture). Despite my efforts, I have not been able to achieve the desired outcome. After simplifying my codebase, I am left with a set of basic instructions aimed at rendering a scene to a texture and then displaying it.

The program is comprised of two components:

  1. Ground program
  2. Teapot program

The first component is responsible for rendering a rectangle with a specific texture, while the second one renders a colorful teapot based on its position. The rendering steps are as follows:

  1. Switch to the framebuffer
  2. Render the teapot
  3. Switch back to the normal buffer
  4. Render the teapot again
  5. Render the ground

The fragment shader for the ground looks like this:

gl_FragColor = texture2D(shadowMap, fTexCoord);

The 'shadowMap' represents the texture rendered in step 2. As expected, I can see a floating teapot with a rectangle drawn beneath it. However, I also anticipate the 'ground' to feature a teapot since we rendered the scene without the ground to the framebuffer/texture.

Functions in the Code:

  1. setup2(): sets up all the buffers and uniforms.
  2. render(): renders the scene.

Note: This code has been modified and simplified for an assignment purpose, deviating significantly from the original task :).

javascriptwebglrender-to-texture

Answer №1

Upon closer inspection, a number of issues become apparent.

  1. An issue with texture bindings being global arises when the texture unbound in setup2 is never utilized.

    Prior to each draw call, it is essential to bind all necessary textures. For instance, when drawing the ground, the teapot texture must be bound using:

    gl.bindTexture(gl.TEXTURE_2D, fBuffer.texture);

    Note: This explanation simplifies the actual requirements. It is imperative to

    1. Select a specific unit for binding the texture

      var unit = 5;
gl.activeTexture(gl.TEXTURE0 + unit);

    2. Bind the texture to that designated unit

      gl.bindTexture(gl.TEXTURE_2D, fBuffer.texture);

    3. Adjust the uniform sampler to reflect the assigned texture unit

      gl.uniform1i(groundProgram.shadowMap, unit);

    The reason these additional steps are unnecessary is due to (a) the utilization of only one texture, thereby defaulting to texture unit #0 and (b) uniforms defaulting to 0, causing shadowMap to reference texture unit #0.

  2. Rendering solely to level 0 will not update the mipmaps in a mipmapped texture.

    After rendering the teapot, its image will appear at mip level 0 while subsequent levels remain empty. To rectify this, invoke

    gl.generateMipmap(gl.TEXTURE_2D)

    for the texture after rendering the teapot, or discontinue the use of mipmaps altogether.

  3. Reconfigure the viewport whenever gl.bindFramebuffer is called.

    Almost always pair gl.bindFramebuffer with gl.viewport to ensure the viewport corresponds to the size of the entity being rendered onto

    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// set to size of fb
gl.viewport(0, 0, widthOfFb, heightOfFb);

renderSomething();

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
// set to size of canvas's drawingBuffer
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

  4. Attribute settings also have global scope.

    Attributes of the teapot are configured, then the teapot is drawn onto the texture. Subsequently drawing the ground still utilizes the teapot attributes.

    Similar to textures, attributes need to be reconfigured before each draw call.

It appears calling makeTeapot within the render function may not be optimal; instead, consider calling it during setup.

You might find this article helpful

Moreover, reconsider avoiding placement of properties on WebGL objects as it could be deemed an anti-pattern.

Additionally, synchronous XHR requests are discouraged. A message regarding this is visible in the JavaScript console:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing nested objects within a JavaScript array for an Express API

My current data sample looks like this: var data = [{ articles : [{ id : '0', url : 'foo', title : 'Foo', body : 'some foo bar', category : 'foo', tags : ...

javascriptjsonnode.jsapiexpress

execute the command only if all ava tests succeed

I'm working on creating an npm script that will execute Ava, and if it is successful, will then run another deploy command. Is there a way to obtain the result of an Ava test in JavaScript, or to save it to a file or pass it to a subsequent command? ...

javascriptnode.jsnpmava

Unable to retrieve the API key in Nuxt framework

I am fairly new to NuxtJS and have been following tutorials on it. I am having trouble displaying the {{planet.title}} on my page. However, when I use {{$data}}, I can see all the planets. I want the title of the planet's name that I have in the slug ...

javascriptvue.jsnuxt.js

Determine the central x and y coordinates of elements depending on the specified screen dimensions

Is it possible to determine the center position of an element at a specific screen size using jQuery? I am looking to calculate the center position of an element based on provided height and width dimensions. For instance, if I provide the screen size (1 ...

javascriptjquery

Ways to eliminate the top space in the background image

After implementing a basic HTML code to add a background image to my webpage, I noticed there is still some empty space at the top of the page. I attempted to adjust the position of the background image using the following code, but it only lifted it upwar ...

javascripthtmlcss

Encountering an issue with a class component stating that "this.setState is not a function

I am currently learning React JS and encountered an error when calling my first API in React. I keep getting the message "Unhandled Rejection (TypeError): this.setState is not a function." I have been trying to troubleshoot this issue on my own but haven ...

javascriptreactjsajaxecmascript-6fetch

Guide to logging in using REST/API with a Next.js application

Issue: I am facing a challenge integrating with an existing repository that was created using Next.js. The task at hand is to enable users to sign in to the application through a specific endpoint or URL. To achieve this, I have been attempting to utilize ...

javascriptauthenticationnext.jsserver-side-rendering

JavaScript keydown event for rotating images

I am experiencing an issue with JavaScript animation. I have incorporated code from this particular link into my keydown function. However, the code is not functioning as expected. While the code from the provided link works fine on its own, within the key ...

javascriptjquerybox2dkeydown

My component reference seems to have gone missing in angular2

Trying to load my Angular 2 app, I encountered this error: https://i.stack.imgur.com/FmgZE.png Despite having all the necessary files in place. https://i.stack.imgur.com/kj9cP.png Any suggestions on how to resolve this issue? Here is a snippet from ap ...

javascripthtmlintellij-ideaangular

Determine the cost for every individual line

I need help figuring out how to calculate the price for each row. Whenever I choose a quantity, it's showing the same price for both rows. Check out my demo here: https://jsfiddle.net/keyro/fw8t3ehs/2/ Thank you in advance! HTML: <table class=" ...

javascriptjquery

What is the optimal method for organizing MongoClient and express: Should the Client be within the routes or should the routes be within the client?

Which is the optimal way to utilize MongoClient in Express: placing the client inside routes or embedding routes within the client? There are tutorials showcasing both methods, leaving me uncertain about which one to adopt. app.get('/',(req,res) ...

javascriptnode.jsmongodbexpress

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ... Your e ...

javascripthtmlcssbootstrap-4

Transforming button properties into a JSON format

I am currently in the process of developing a web application using node.js and mongodb. Within my app, there is a table that dynamically populates data from the database using a loop. I encountered an issue with a delete function that I implemented base ...

javascriptjsonnode.jsmongodbmean-stack

Creating a sticky v-stepper-header while scrolling in VuetifyJS

Can anyone help me figure out how to make the <v-stepper-header> component stay sticky when scrolling? I attempted to create custom CSS for this but was unsuccessful. Below is a snippet of code that I tried: <v-stepper v-model="step"&g ...

javascriptvue.jsvuetify.jsv-stepper

Resetting the Angular provider configuration whenever the service is injected into a different location

Trying to wrap my head around a rather complex issue here. I have a service set up as a provider in order to configure it. Initially, this service has an empty array of APIs which can be dynamically added to by various configuration blocks. When adding API ...

javascriptangularjsangular-providers

Firestore TimeStamp.fromDate is not based on UTC timing

Does anyone have a solution for persisting UTC Timestamps in Firestore? In my Angular application, when I convert today's date to a Timestamp using the code below, it stores as UTC+2 (due to summer time in Switzerland). import {firebase} from ' ...

javascriptangulardatetimegoogle-cloud-firestore

Learn the process of sending code to a database using AJAX

I am facing a challenge in saving HTML and Javascript codes to a Database using Ajax. I am unsure about the optimal way to do this. Writing all the codes as Strings for the variable seems cumbersome. Do you have any suggestions to simplify this process? & ...

javascriptphpsqlajaxdatabase

Delivering a Captivating JavaScript Pop-Up upon Page Loading

I have a simple pop up window (with no content) that triggers with the 'onclick' event. How can I modify the code below to make the popup appear automatically when the page loads? <head> <title>Popup Display</title> < ...

javascriptjqueryhtmlpopuppopupwindow

Using HTML and C# to Deliver Emails

I've encountered a challenge with my HTML page that includes a textbox for users to input their email. When the submit button is clicked, an email should be sent to a specific email address defined in the code, and a pop-up box indicating "Email Sent" ...

c#javascripthtmlemail

What is the best way to conceal a dropdown menu when the page first loads?

I have a dropdown menu that is displaying like this: <ul> <li class="dropdown open"> <a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"> <spa ...

javascriptjqueryhtmlcssdrop-down-menu