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 :).

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

I am looking for a specific task to be carried out, without any need for returning a value or any additional items

I am trying to remove an element from the canvas using Selenium. The command I am currently using is "window.app.design.internalLayer().find('.deletebutton').fire('click')". Despite my efforts, this command does not seem to be working a ...

What is the process for sending an HTTP request within the Dialogflow -> Fulfillment environment?

When it comes to interacting with the API of my website to rectify the response for Google Assistant, I am facing some difficulties. 'use strict'; var requestNode = require('request'); const functions = require('firebase-function ...

Changing the Value of an Input Element Dynamically in React: A Step-by-Step Guide

In a scenario where I have a component that takes an element, such as <input />, and I need to update its value programmatically after 15 seconds. Initially, I had the following approach in mind: const MyComponent = (myInput: JSX.Element) => { ...

Error: Failed to decode audio content due to a DOMException that was caught in the promise

Encountering an issue with the decodeAudioData method while utilizing the Web Audio API for playback in Chrome (works seamlessly in Firefox)- Sending the audio buffer, which has been recorded by the media recorder, back from the server. Server-side wss ...

When attempting to compress JavaScript with uglify-js, an unexpected token error occurs with the symbol ($)

When attempting to compress Bootstrap 4 js file using uglify-js, I encountered an error. The error message reads as follows: "Parse error at src\bootstrap\alert.js:1,7 import $ from 'jquery' ERROR: Unexpected token: name ($)". Now I am ...

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

Having trouble changing the state within React's useEffect() when using an empty dependencies array? Socket.io is the cause

I have a question regarding the access of allUserMessages from my state within useEffect without anything in its dependency array. Let me provide more details below. Thank you. My goal is to append data to an array in my state using useEffect similar to c ...

Is npm bundled with node-gyp?

I am currently experiencing an issue where running npm install locally does not produce much output when using npm v6.14.9. However, when I deploy to the server, it generates some incomprehensible messages like: gyp info spawn args ['some properties a ...

Firebase Firestore is returning the dreaded [object Object] rather than the expected plain object

I've created a custom hook called useDocument.js that retrieves data from a firestore collection using a specific ID. However, I'm encountering an issue where it returns [object Object] instead of a plain object. When I attempt to access the nam ...

Ways to utilize jquery to limit the length of an editable div and prevent it from exceeding our specified restriction

Imagine a scenario where you have the following code snippet: <div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div> In this situation, let's say you want to impose a r ...

Error encountered while attempting to save a Mongoose post on Heroku, although it is successful

My aim is to post to my MongoDB Atlas database using node, express, mongoose, and Heroku. While a Postman POST request with Raw JSON body: { "title": "heroku post", "description": "post me plsssss" } works f ...

Unable to transform dynamically loaded text area into CKEditor

Executing the get_content function upon a link click. function get_content(n) { var hr=new XMLHttpRequest(); var url="./updatecontent.php"; var vars="id="+n; hr.open("POST",url,true); hr.setRequestHeader("Content-type","application/x-w ...

Deliver integers using Express.js

When I try to send a response with Express using the code below, it doesn't work: res.send(13245) An error message is displayed: express deprecated res.send(status): Use res.sendStatus(status) instead src/x.js:38:9 (node:25549) UnhandledPromise ...

What impact does rotation have on an orthographic camera within the Three.js framework?

I am working in Three.js with a scene that includes a plane and an orthographic camera. Orthographic camera at -90deg: When the camera is rotated to -90 deg on the x-axis (looking straight down from above), only the plane is visible in the view. Scene s ...

Using React Router useHistory to navigate to different routes programmatically

Currently, I'm working on creating a wizard interface and running into some issues with the buttons. Right now, I have next and back buttons for each route, but I am aiming to create a button component that can handle navigation both forward and backw ...

Error not identified in ajax function for form submission

For some reason, in IE8 specifically, the alert function is not firing and the ajax part of my code is not running when I try to submit a form. Even though I have included a return false, the form still gets submitted. Why is this issue only occurring in ...

Eliminate specific content from within a div tag

Looking for a solution with the following HTML. <div id="textDiv"> <p> MonkeyDonkey is not a bird. Monkey is an animal. </p> </div> In this case, I am trying to delete the word "Donkey". I attempted the code below but it did no ...

Concealing an element from a separate module

In the angularjs single page application project that I'm working on, there are two modules: module-'A' and module-'B'. Each module has its own view templates. The view template of module-'B' contains a div with id="sit ...

Don't forget to keep track of when the user has closed

How can I ensure that the cache retains the user's action of closing the div? Currently, when I close the div and refresh the page, it reverts back to its original state. Is there a way to make this change persistent? Experience it live: Here is the ...

Initiate the command with given parameters

Currently, I am utilizing a combination of React, Redux, Rxjs, typesafe-actions, and TypeScript to invoke an action with parameters. Here is my current code: Actions: import { createAsyncAction } from 'typesafe-actions'; import {ICats} from &ap ...