At what point is a Three.js Texture transferred to the GPU?

Currently, I am in the process of developing an application that dynamically retrieves images from a server to use as textures within the scene. However, my focus is now on understanding the correct method for loading and unloading these textures.

My specific query revolves around the Three.js call graph: At what point does the GPU load and update textures? Does this occur when initializing a texture (var tex = new THREE.Texture()), or when applying it to a mesh (

var mesh = new THREE.Mesh(geom, mat)
)? Examining the Texture class in Three.js indicates that textures are not loaded during texture creation. Yet, I cannot seem to locate relevant information within the Mesh component.

Could it be possible that I am overlooking a crucial detail? Are textures actually loaded during the render loop rather than upon object initialization? This could potentially align with the expected behavior.

I appreciate any insights you may offer!

javascriptthree.jstexturesgpu

Answer №1

The WebGLRenderer abstracts all GPU instructions related to three.js.

When creating objects in three.js, they do not interact with the GPU until you use the command:

renderer.render(scene, camera);

This command sets up all necessary WebGL components like buffers, shaders, attributes, uniforms, and textures. So, before this point, three.js meshes are just abstracted objects independent of their rendering (which may not happen at all).

This separation is vital because other renderers like CanvasRenderer have different APIs.

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

What is the best way to organize and sort mysql data without disrupting operations?

I've been searching for information on this topic but haven't been able to find a tutorial that explains exactly what program to use. I have a MySQL database with expenses data. What I need is for the system to automatically categorize a new ex ...

javascriptphpjquerymysqlajax

Expanding the size of an array list item in React

I have an array containing various currencies: const currencies =['USD','EUR','AUD','CNY','AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'A ...

javascriptarraysreactjs

What is the method for incorporating choices into a schema field in Mongoose?

If my Schema is like this: var fooSchema = new Schema({ foo: String }); and I'm looking to implement select: false for foo, how can I achieve this without altering the initial structure? var fooSchema = new Schema({ foo: { type: String, select: ...

javascriptmongoose

How can I display base64 image data in a new window without triggering a block?

Currently experiencing challenges with Javascript. Utilizing html2canvas to convert a div to a canvas and then using .toDataURL to convert the canvas to a base64 data stream. Attempting to open base64 image data in a new window, but facing blocks from va ...

javascriptjquerybase64

Tips for fixing the $injector problem in AngularJS

Recently, I started learning AngularJS and attempted to build a simple web page based on some tutorials. The page consists of two parts: one for user input using HTML and the other with JavaScript containing an if-else statement. However, I kept encounteri ...

javascriptangularjs

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...

javascripthtmlcss

In the v-bind:Style statement, check the condition

<div> <figure :style="{ 'background': 'url(' + item.main_featured + ') center no-repeat' }"> </div> I need the background style attribute to display a color if the URL fetched from the API is und ...

javascriptvue.jsvuejs2

Conceal an absolutely positioned element outside its relatively positioned parent

I have a relative position parent element, <div style="position:relative" id="a"> and within that div, I'm creating some absolute positioned elements using jQuery, <div style="position:absolute;right:0" id="b"> These elements are anima ...

javascriptjqueryhtmlcss

The impact of THREE.OrbitControls on the rotation of objects in the scene

Recently started diving into THREE.js and I've put together a simple scene with the basics: http://codepen.io/inspiral/full/Lewgj Overall, everything is running smoothly aside from an odd glitch that's been happening due to the new mouse event h ...

javascriptthree.js

Transforming a point from 3D space to 2D screen coordinates can be challenging, as some

I'm facing a challenge in positioning an HTML div element over a three.js object. Most solutions on various forums suggest a method that looks something like this: // var camera = ... function toScreenXY(pos, canvas) { var width = canvas.wi ...

three.js

Error: Unable to Navigate to Present Location ("/search") as It is Duplicated

I keep encountering the error message NavigationDuplicated when I attempt to perform multiple searches. My search function is located in the navbar, and it's configured to capture the input value using a model. Subsequently, this value is passed as a ...

javascriptvue.jsvuejs2

Exploring the process of sending JSON responses through Express

I recently started working with node/express. My express app has a single post route ('/'), which is designed to retrieve information about GitHub users based on their usernames. For instance, when I make a post request like this { "develop ...

javascriptnode.jsexpress

Is it advisable to clear the bootstrap tooltips array in order to conserve browser memory once I have finished rendering new tooltips?

My apologies if this question has been asked before, but I searched online first and couldn't find a helpful answer. Beautiful Views Recently, I was working on a project where I needed to display search results, each accompanied by a button that trig ...

javascripttwitter-bootstrapbootstrap-5

Apply the "ng-class" attribute to the parent of the chosen element

Another question arises in relation to the usage of ng-class... How can we dynamically add a class to the <ul> element when a <button> within its <li> is clicked? Check out the demo here Here is the HTML code snippet: <div ng-app=" ...

javascriptangularjs

Retrieving data from a child component that has been added in React

One of the challenges I am facing is dealing with a main react component that dynamically appends child components, like <Child />, on button click The structure of my Child component looks something like this: <form> <input .... /> ...

javascriptreactjs

Place an IconButton component next to each Material UI TableRow

I am trying to include an icon next to the material UI table row component. Similar to the hint icon shown in the screenshot below Here is my attempt so far, but it's not functioning as expected: Check out the code on CodeSandbox https://i.stack.i ...

javascripthtmlcssreactjsmaterial-ui

React - Issues with setTimeout() method not triggering following Promise.all execution

I am facing an issue with my arrow function that is called from the `componentDidMount` lifecycle method to fetch updated status of schedules every 20 seconds using a `setTimeout()`. The problem is that the `setTimeout()` method does not trigger another re ...

javascriptreactjspromise

Guide on sending a sizable item as a string utilizing Axios

In order to efficiently save a large and complex object as a JSON file on the server without needing to map it to an object in C# first, I am facing some challenges. Sometimes, when posting the object as a string, the data gets corrupted leading to errors ...

javascriptc#jsonaxios

Changing Underscores in ES6 Techniques

My current project is built using AngularJS, Redux, and Underscore. Within this project, I have the following code snippet: const selectedBroker = _.findWhere(state.brokers, { brokerId: action.payload }); return state.merge({ selectedBroker, sel ...

javascriptangularjsecmascript-6reduxunderscore.js

Attempting to update state on a component that is no longer mounted

There are many instances in my components where I find myself needing to execute the following code: function handleFormSubmit() { this.setState({loading: true}) someAsyncFunction() .then(() => { return this.props.onSuccess() }) . ...

javascriptreactjspromise