Creating custom shaders for YouTube videos within a Three.js userscript

I want to add a shader effect to YouTube videos.

My current approach involves using Three.js to implement a shader on a video. Specifically, I am trying to adapt this example of applying a shader to a video (code available here) into a Tampermonkey userscript for use on youtube.com.

Are the @require statements accurately converted from the original import statements? How can I address the issues with 

eslint: no-undef - 'THREE' is not defined
, 
eslint: no-undef - 'PerspectiveCamera' is not defined
(if I remove THREE. assuming direct import from three.module.js), and 
eslint: no-undef - 'RenderPass' is not defined
?

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net
// @grant        none
// @require      https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.module.js
// @require      https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/EffectComposer.js
// @require      https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/RenderPass.js
// @require      https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/ShaderPass.js
// @require      https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/BloomPass.js
// @require      https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/shaders/CopyShader.js
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    // Code goes here...

})();

Displayed below is a screenshot of the encountered errors: https://i.sstatic.net/Zk3uI.png

javascriptthree.jsshadertampermonkeyuserscripts

Answer №1

eslint: no-undef - 'THREE' is not defined
doesn't have to be a problem.

Opt for traditional versions of Three.js scripts instead of module versions:

// @require      https://threejs.org/build/three.min.js
// @require      https://threejs.org/examples/js/postprocessing/EffectComposer.js
// @require      https://threejs.org/examples/js/postprocessing/RenderPass.js
// @require      https://threejs.org/examples/js/postprocessing/ShaderPass.js
// @require      https://threejs.org/examples/js/postprocessing/BloomPass.js
// @require      https://threejs.org/examples/js/shaders/CopyShader.js

Include ConvolutionShader as BloomPass will throw an error if it's missing:

// @require      https://threejs.org/examples/js/shaders/ConvolutionShader.js

Prefix THREE. before RenderPass, CopyShader, and so forth.

Move let h, counter = 1; up, else h will be recognized as undefined.

Use 

container = document.getElementsByClassName( 'video-stream html5-main-video' )[0].parentElement;
instead of 
container = document.createElement( 'div' );
since the latter is not visible on YouTube.

Here's the final Tampermonkey userscript:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net
// @grant        none
// @require      https://threejs.org/build/three.js
// @require      https://threejs.org/examples/js/postprocessing/EffectComposer.js
// @require      https://threejs.org/examples/js/postprocessing/RenderPass.js
// @require      https://threejs.org/examples/js/postprocessing/ShaderPass.js
// @require      https://threejs.org/examples/js/postprocessing/BloomPass.js
// @require      https://threejs.org/examples/js/shaders/CopyShader.js

// @require      https://threejs.org/examples/js/shaders/ConvolutionShader.js

// ==/UserScript==
//debugger;

(function() {
    'use strict';
    // Your code here...
    
    // Remaining code omitted for brevity...
})();

Result:

https://i.sstatic.net/inJQn.png

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

The success method in the observable is failing to trigger

Could someone explain why the () success method is not triggering? It seems to be working fine when using forkjoin(). Shouldn't the success method fire every time, similar to a final method in a try-catch block? Note: Inline comments should also be c ...

javascriptangularobservable

Achieving intellisense functionality in TypeScript without the use of classes

Just dipped my toes into TypeScript, attempting to convert this basic JavaScript code to TypeScript. Here is the JavaScript code snippet: Item = {} Item.buy = function (id) {} Item.sell = function (id) {} I prefer not to use classes and would like to ut ...

javascripttypescriptintellisense

Preventing navigation without using the <Prompt> component in React Router DOM V6

I have recently discovered that in react-router-dom v5, it was possible to utilize the <Prompt> component to prompt the user before a page transition occurs, allowing them to prevent it. However, this feature has been removed in v6 with plans for a m ...

javascriptreactjsreact-router-dompage-transition

Vue.js parent component sending new data: prop mutation detected

Encountering an issue in the console with the following error message: Instead, use a data or computed property based on the prop's value. Prop being mutated: "sortType" Within my root file, I have an API and filter function sending data to comp ...

javascriptvue.jsvuejs2

What is the proper way to mention JavaScript packages when including them as parameters in Angular elements within HTML?

I was looking to enhance the command to be more authoritative. <div (click)="lastCall(999)">click me</div> My attempt to utilize Number.MAX_SAFE_INTEGER resulted in an error from my computer stating that it wasn't recognized. As a result ...

javascripthtmlangulartypescript

Navigating the world of cryptocurrency can be daunting, but with the right tools

Hello fellow developers, I've encountered some difficulties with cryptocurrency in my Nativescript project. I am attempting to incorporate the NPM package ripple-lib into my code, but I have been unsuccessful using nativescript-nodeify. How can I suc ...

javascriptvue.jsnativescript

Tips for adjusting the Material UI Tabs indicator's position with react-scroller

My customized MaterialUI Tabs component stacks all tab content for scrolling using react-scroller. The tabs work smoothly except the indicator does not update its position. The react scroller has props like onSetActive, onSetInactive, and activeClass whic ...

javascriptreactjsmaterial-ui

Express Module Employs Promises for Returns

I have a JavaScript file for elasticsearch (could be any other database as well) that performs a simple query and uses a promise to return the data. I am using this module in my Express server (server.js) with the hope of retrieving the data, as I ultimat ...

javascriptnode.jsexpress

Removing API request in React.js

My approach: deleteSample = () => { this.sampleService .deleteCall(this.props.id) .then((response) => { window.location.reload(false); }) .catch((error) => { console.log ...

javascriptreactjstypescript

Error encountered: Attempting to upgrade Intel App Framework 2.1 resulted in TypeError: o.promise is not a function

During the process of updating Intel App Framework from version 2.0 to 2.1, I encountered a jQuery error stating 'TypeError: o.promise is not a function in jQuery'. The current setup includes jq.appframework.min.js alongside jquery-1.11.0.min.js. ...

javascriptjqueryintelappframework

Can we achieve live map updates in real time using Google API with Node.js technology?

Can Google Maps API in conjunction with Node.js provide truly real-time updates on a map without any callback limits, or does Google enforce restrictions such as a 5 second or 30 second time frame? Node.js is known for its ability to handle almost real-ti ...

javascriptnode.jsgoogle-mapsmeteorjavascript-framework

Tips on resolving JavaScript's failure to adjust to the latest HTML inputs

I'm working on a homepage where users can choose their preferred search engine. The issue I'm facing is that even if they switch between search engines, the result remains the same. I've experimented with if-then statements, but the selecti ...

javascripthtml

What is causing the failure of the serial reader in NodeJS?

I have successfully installed serialport using npm, but for some reason it is encountering connection issues. $ ls /dev/tty.* /dev/tty.Bluetooth-Incoming-Port /dev/tty.usbserial-AI0255BX $ cat /var/tmp/test.js var SerialPort = require('serialport ...

javascriptnode.jsmacosnpmserial-port

Can anyone provide a method for obtaining a date that is x days earlier through date arithmetic?

Is there a method to obtain the date from 63 days ago with only day, month, and year information needed, excluding hours, minutes, and seconds? I am aware that one can calculate Date object - Date object, but I am curious if it is feasible to derive a dat ...

javascriptjquerynode.jsreactjs

Assigning the Style property to an element using a string that includes HTML tags

My HTML string is populated with elements such as button, li, span, and more. I am looking to add specific styles to buttons based on their class name. For example, if button.btn { some styles } and button.btn-success { some other styles } O ...

javascriptjquerycss

Do we need to utilize a server folder in Nuxt 3 if we have API endpoints?

In Nuxt 3, there is a dedicated server folder containing an api subfolder. Why should we utilize this when we already have API endpoints built with a server-side programming language like Laravel? Are they linked in any way? For instance, consider these ...

javascriptvue.jsvuejs3nuxt.jsnuxt3

Having trouble with JQuery toggle()? Need some assistance with fixing it?

My attempts to utilize JQuery toggle functionality have been unsuccessful. The sliding up and down animation is not smooth and instead happens very quickly. I aim to achieve a sliding effect in my code similar to this example (Please refer to Website Des ...

javascriptjqueryajax

What is the maximum number of requests that Node-Express can send simultaneously?

Currently, I am facing a challenge with my script that involves fetching 25,000 records from AWS Athena, a PrestoDB Relational SQL Database. For each of these records, I need to make a request to Athena and then another request to my Redis Cluster once the ...

javascriptnode.jsexpressnode-redisamazon-athena

Tips for concealing the check mark within a checkbox upon selection

I have checkboxes arranged in a table with 23 columns and 7 rows. My goal is to style the checkboxes in a way that hides the check mark when selected. I also want to change the background image of the checkbox to fill it with color when marked. Can someone ...

javascriptjqueryhtmlcss

Webpack 4 Failing to Properly Render Select Tag

I am encountering an issue with a basic select element that is not displaying correctly due to Webpack. The screenshot below illustrates the final rendered page source, where the closing tag for the select element has been incorrectly positioned before the ...

javascripthtmlformswebpackwebpack-4