Create a custom shader material to display a video with THREE

As I embark on loading a video onto an animated WebGL plane with a custom shader material, my approach involves using a pre-loaded video to draw an image onto a canvas and then passing it to my shader uniforms in the render loop:

// Render loop
useFrame(() => {
   // Video = video HTML element
   video.currentTime = currentTime;
   context.drawImage(video, 0, 0, canvas.width, canvas.height);

   plane.material.uniforms[
      "uTexture"
   ].value = new THREE.CanvasTexture(canvas);

   currentTime += 1 / 30;
}

While this method works, it lacks optimal performance due to the need to:

  • Draw an image in context every frame
  • Create a new instance of THREE's Canvas every frame

My ideal scenario would involve having a buffer of frames or CanvasMaterial instances ready to iterate on in my render loop. However, I'm uncertain if this pre-rendering approach is feasible within a short timeframe or if there's a more efficient way to achieve performant video rendering on a custom shader material.

Answer №1

Thanks to the suggestion from @prisoner849, I discovered that I can effortlessly apply a pre-loaded video as a texture to my shader by utilizing THREE.VideoTexture. This approach eliminates the need for any additional code within my render loop, as demonstrated in this informative example:

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

Encountering an error when attempting to access the 'path' property of undefined from a user-defined input file in Bootstrap 4

I'm currently working on a form that includes a custom input group for selecting a local image file. Unfortunately, I am having trouble retrieving the file name in my server code. Despite checking req.body and trying req.file.path, I have been unable ...

The JSON syntax contains an unexpected token

I am encountering an issue with a JavaScript variable named "text" that contains the following value: text={"text":"@RT #Olle_Carly Nuevas filtraciones del iPhone 6: así sería comparado con el Samsung Galaxy S5 y el iPhone 5S: Des... http://t.co/eRuXLS6 ...

How can you include the product price in the cart using the URL on WooCommerce?

After some exploration, I discovered that I can easily add items to my cart using a specific URL: http://yoururl.com/cart/?add-to-cart=ID Although I was able to figure out how to include quantity and attributes in the link, I have not been able to determ ...

Tips for adapting the position of a floating div according to its height and environment

Important Note: The code below utilizes the rubuxa plugin for handling JS sortables. Javascript: function querySelector(expr){return document.querySelector(expr)} var container = querySelector('.ITEST'); var sortable = Sortable.create(container, ...

Route functions cannot be hoisted in the Express framework

Can someone shed light on why my Express routes aren't hoisted? I keep encountering this error: throw new TypeError('Router.use() requires middleware functions'); The error is not present in the following file: var express = requir ...

Utilizing Dynamic Image Sources in Vue.js with the Help of APIs

Can someone help me figure out how to solve this issue? I have an API that returns a base64 image, and I want to load this image on my site. Any suggestions on where or how I should implement my function? This is the API call located in the methods: metho ...

Refresh a table using jQuery Mobile, PHP, and AJAX without having to reload the entire page by clicking a

Currently, I am working on a web app that includes a pop-up feature. When the user clicks on the pop-up to close it, I want the table data to refresh without having to reload the entire page. This pop-up allows users to modify existing data in the table. A ...

Error encountered while using Chart.js with JSON dataset

Struggling to make this work... Here are the necessary scripts: <script src="Chart.js"></script> <script src="jquery-1.11.3.min.js"></script> This is the full code I am working with: <body> <div id="chartCanvas"> &l ...

How can you use ui.router to set up one controller as the child of another controller?

To create a nested controller in html, you can simply write the child controller inside the parent controller like this: <div ng-controller="parentCtrl"> <div ng-controller="childCtrl"> When using ui.router, you can specify one state as a c ...

What is the reason for updating only one out of three charts using react-chartjs-2?

Recently, I came across an issue with a modal that includes a text field for recording numerical values. These recorded values are then passed through a loop to populate an array based on the input. Subsequently, these values get updated in 3 different gra ...

Testing Equality in Unit Tests: Comparing Objects and Arrays

Forgive me for this seemingly silly question, but I'm having trouble understanding it. I am a newcomer to both testing and JavaScript, so please bear with me. Here is the test in question: describe('initialized from copy job functionality&apos ...

I want to know how to showcase elements from a list one by one and cycle through them using a button with a nodejs server and Pug

As someone who is brand new to Web development, NodeJs servers, and Pug, this is my first time diving into any of these technologies. My goal is to create a dynamic box (in the form of a div) that changes its content based on a list from a JSON file. Initi ...

Having trouble parsing asynchronous script with cheerio parser

Utilizing cheerio for web crawling poses a challenge when encountering websites with asynchronous scripts. When attempting to extract all the scripts from such websites, they are often missed in the process. Here is an example of the code I am currently us ...

Utilizing classes as types in TypeScript

Why is it possible to use a class as a type in TypeScript, like word: Word in the provided code snippet? class Dict { private words: Words = {}; // I am curious about this specific line add(word: Word) { if (!this.words[word.term]) { this.wor ...

Customize dynamically loaded data via AJAX

I have a webpage that is loading a table from another source. The CSS is working fine, but I am facing an issue editing the table using jQuery when it's loaded dynamically through a script. It seems like my changes are not getting applied because they ...

Capturing attention within react-bootstrap drop-downs and pop-ups

Currently, I'm focused on enhancing accessibility features and I have a specific goal in mind: to confine the focus within a popover/dropdown whenever it is opened. Working with react-bootstrap, my inquiry revolves around finding out if there's ...

Running PHP scripts from JavaScript

Currently working on a PHP project that involves a dropdown select button in a webpage. The goal is to call a JavaScript function whenever the value of the dropdown changes, and then pass this selected value to retrieve additional details from a MySQL da ...

The window.load() function seems to be malfunctioning as the event is not being triggered. There are no error

I'm struggling with getting the window.load() event to trigger on this specific website. The issue arose last night and despite there being no visible js or php errors, pinpointing the root cause has proven to be quite challenging. In syrp.home.main ...

Rating of displaying an undefined value (NaN)

I'm having issues with creating a currency conversion calculator, as the result is showing as NaN. Can anyone offer assistance? I've tried multiple solutions but have been unable to resolve it. Check out the following JavaScript code snippet: c ...

Interactive tooltip feature in Apexchart

I need to include % in my Apexcharts tooltip after the Y value. Working with vue.js and without official documentation from apexchart, I managed to make it function correctly. This is what I have accomplished so far: data: function () { return { ...