Leverage the power of WebGL textures in Three.js to enhance your texture mapping

Currently, I am working on a project that involves a plane with a WebGL texture used as a map for the material. The challenge I am facing is passing this texture to the ShaderMaterial with a specific uniform in order to update it every frame.

This texture is being rendered in the context of another canvas element and can be utilized like so:

var imageLocation = gl.getUniformLocation(program, "u_image");
gl.uniform1i(imageLocation, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, targetTexture1);

I have attempted the solution provided here, but it appears that THREE.Texture() does not retrieve data from raw WebGL textures.

Answer №1

Upon examining the source code, it appears that this solution will function properly as of revision 103. However, there is no assurance that it will continue to work in subsequent updates since nothing within three.js is guaranteed for future compatibility.

Begin by creating a Texture followed by calling forceTextureInitialization to compel Three.js to initialize the texture.

const forceTextureInitialization = function() {
    const material = new THREE.MeshBasicMaterial();
    const geometry = new THREE.PlaneBufferGeometry();
    const scene = new THREE.Scene();
    scene.add(new THREE.Mesh(geometry, material));
    const camera = new THREE.Camera();

    return function forceTextureInitialization(texture) {
      material.map = texture;
      renderer.render(scene, camera);
    };
}();

Subsequently, replace the WebGL texture of that Texture with your own using this approach:

const texProps = renderer.properties.get(someTexture);
texProps.__webglTexture = someGLTexture;

An example implementation:

'use strict';

/* global THREE */

function main() {
  // Implementation details included
}

main();
<canvas id="c"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>

Note that alternatively, you could manipulate the existing texture used by the Texture object through WebGL instead of introducing your custom one.

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 causes special characters to be replaced when using the 'require' function in NodeJS?

I am a beginner in JavaScript and NodeJS, so please be patient with me if this issue seems obvious. The file I have outsourced is a simple config file. Here is an abbreviated version of it: config.js: var config = {}; config.Web = {}; config.Web.Title ...

Threejs: Why is my Pointlight failing to illuminate my shapes?

I've been working on creating a scene with triangles in Threejs. While the BufferGeometry has helped me shape the triangles correctly, I'm facing an issue with lighting. I've tried different materials like standard, phong, and lambert, but n ...

Aligning HTML elements side by side

I am currently utilizing reactJS to create a form. Within this form, I am attempting to include a text field, a button for copying the text to the clipboard, and a hyperlink that redirects to a valid website. The issue I am facing is evident in the provid ...

Determining the precise mouse location within child elements regardless of zoom level, scrolling, or dimension changes

My goal is to accurately determine mouse coordinates within the page elements. To see the code in action, please visit: http://jsfiddle.net/t8w9k6gu/ $('#p1, #p2, #p3').on('click mousemove touchmove', function(ev){ var target = ...

Is there a way for me to locate a forum using a JWT Token?

I am searching for a way to retrieve forums using JWT Token. If a user has created 3 forums, I want to display them in a list. My Request is structured like this : ### http://localhost:8080/forum/getByOwnerID Authorization: Bearer {{adminToken}} Alternat ...

Having difficulty generating bcrypt password hashes in Node.js

I am facing an issue with the following code. I am attempting to hash my admin password when they register. The password is initially set to a default value via the mongoose schema. However, the hashing process seems to not be working correctly. Below ar ...

What is the solution to the problem of "Failed to execute 'json' on 'Response': body stream already read"?

enter image description here Encountered Issue: Error in processing JSON data in the Response: body stream already read The error mentioned above is a result of issues within your application's code, not due to Cypress. It occurred due to an unhandle ...

When I try to make an on-demand revalidation API call on Vercel, it takes so long that it ends up timing

Inspired by Kent C. Dodds, I have created a blog using Github as my Content Management System (CMS). All of my blog content is stored in the same repository as the code, in mdx format. To streamline the process, I set up a workflow that detects changes i ...

AngularJS - Issues with Firebase resetPassword not showing updated changes

When incorrect email addresses are entered and the form is submitted, the error message does not display for the user. However, if additional characters are appended to the existing entries, the message appears on the screen. In debugging, the variable $sc ...

Steps to create a hover effect that alters the appearance of another chosen "element"

For instance, I have two classes named A and B. I want to be able to change the appearance of B when I hover over it, such as its color or size. I am unsure if this can be achieved using CSS and the onmouseover event. I am including a snippet of code that ...

Store Button and Directory

I'm just starting to learn about Javascript. I want to create an "Add to favorites/remove from favorites" feature on multiple product pages. This function will save the product ID and store it in an array. Additionally, I need help creating a page t ...

What could be causing the malfunction of useEffect() in my script?

const [isOpen, setIsOpen] = useState(false); useEffect(() => { if (!token) { return <Navigate to="/auth/login"/> } getMe(token) }, [token, getMe]) return ( <RootStyle> <DashboardNavbar onOpenSi ...

Tips on using dual drop-down menus for sorting options

I am encountering a small issue with my two filters. When I choose the values IN and ENCODE, all the values are displayed correctly... https://i.sstatic.net/Uoido.png However, the problem arises when I click on OUT, as the status is not displayed correc ...

Is there a specific method that can be implemented in Node.js to compare two strings and identify the common words or letters?

Looking for a solution: var str1="CodingIsFun"; var str2="ProgrammingRocks"; Is there any function that can provide a true value or flag in this case? ...

How do I utilize JSON to transmit a string to my server with Tornado?

Currently, I am facing an issue with my HTML input box and a JavaScript function that is triggered upon clicking a submit button. My goal is to send the data entered by the user in the input box to my Tornado server. Despite trying various options, I have ...

Using jQuery to Iterate Through an AJAX Response

I'm working on a tagger application. When a user submits a tag, ajax sends the following response: {"returnmessage":"The Ajax operation was successful.","tagsinserted":"BLAH, BLOOOW","returncode":"0"} My goal is to extract the tags inserted and dyna ...

Using an array of JSON objects to set up a Backbone.js bootstrap-initialized application

Trying to bootstrap a backbone collection by using an array of JSON objects has led to some unexpected errors. When attempting to call reset on the collection object, an error from Backbone is thrown - Uncaught TypeError: undefined is not a function. Inte ...

Displaying specific choices depending on the previous selection made

I am facing an issue in Laravel where I have two selection options, and one depends on the other. Despite multiple attempts, I haven't been able to resolve it. The database structure is as follows: companies id title channels id company_id title I ...

Transferring values from jQuery AJAX to Node.js

Is there a way to successfully pass a variable from jQuery to nodejs without getting the [object Object] response? I want to ensure that nodejs can return a string variable instead. $('.test').click(function(){ var tsId = "Hello World"; ...

Prevent individual elements from shifting around on browser resizing within a React form

Having issues with a React form that includes an image gallery and input fields. import React, { Component } from 'react'; import ImageGallery from 'react-image-gallery'; import { Container, Row, Col, InputGroup, Button, FormControl, ...