What are the steps to create a distorted effect on HTML using webGL?

Recently, I was experimenting with an interesting example from this link: .

In my local environment, I tweaked the Three.js renderer to become an overlay by adjusting the z-index to 999 and setting {alpha: true} to make it transparent. Then, underneath the canvas, I added a standard HTML webpage with multiple h1 elements styled with a red background color. However, I encountered an issue where the glitch effects appeared as horizontal white lines instead of distorting the content beneath it.

This led me to wonder - is it feasible for webGL to distort the underlying HTML view in this setup?

javascriptcanvasthree.jswebgl

Answer №1

Simply put, WebGL does not have the capability to access the underlying or overlaying frame buffers. While you can create a transparent overlay with WebGL, you are limited to obscuring what is behind it rather than manipulating the pixels directly.

We can only hope that one day webGL will be able to interact with the underlying buffers, allowing for the creation of true 3D HTML UIs that can be used in virtual reality environments.

The closest I've come to achieving this is by embedding css3d objects within a webGL scene, using a transparent object in THREE.js to allow HTML elements to show through the background via alpha punching in the framebuffer.

If your goal is simply to draw glitchy, semi-transparent rectangles on top of your HTML, that is feasible.

Answer №2

It has been pointed out by others that accessing anything rendered by the browser is not possible for security reasons.

One workaround is to render the HTML into a canvas (utilizing an interesting SVG trick) and then use that canvas as a texture in WebGL. There is even a project named html-gl that offers a complete implementation based on this technique.

Answer №3

A deeper grasp of how HTML rendering works is essential. The canvas element where three.js operates is confined within its own rendering context.

You have the ability to distort any HTML Element, but this requires a good understanding of CSS Custom filters (CSS Shaders), which is unrelated to Three.js.

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

Define the position of a scrolled area within an HTML document to create a

In my current project, I have a scrollable area that highlights the selected div in gray. The HTML is written using Ember (hbs) and includes code to handle this functionality. Below is an example of how the div looks: https://i.sstatic.net/T2Lur.png Here ...

javascripthtmlcssember.js

Having trouble binding component property in VueJS with TypeScript?

Why is my component property not binding when I set the related component attribute to a value? Even when inspecting with Vue devtools or outputting the value into the HTML, it remains at the default value set on the component. I tried setting a string at ...

javascripttypescriptvue.jsvue-component

File upload failed with the Easy Upload Adapter in ckeditor

I am experiencing an issue when trying to upload an image. Despite researching the error, I have not been able to find a solution that works. My code is written in Express.js with ejs and specifically relates to the addPost.ejs file. <!DOCTYPE html& ...

javascriptnode.jsexpressckeditor

What's the trick to efficiently managing multiple checkboxes in an array state?

I have a lengthy collection of checkboxes that is not well optimized. I am trying to obtain the checked ones and store them in an array state. However, I am uncertain about how to handle this situation and I would appreciate some assistance. It should also ...

javascriptreactjscheckboxjsx

Changing the main domain of links with a specific class attribute during an onmousedown event - is it possible?

We are facing a situation where we have numerous webpages on our blog that contain links from one domain (domain1.com) to another domain (domain2.com). In order to avoid manual changes, we are attempting to achieve this without altering the link (href). Th ...

javascripthtml

Having difficulty managing asynchronous Node JS API requests

I'm a beginner in Node.js and I've taken on a project that involves querying both the Factual API and Google Maps API. As I put together code from various sources, it's starting to get messy with callbacks. Currently, I'm facing an issu ...

javascriptnode.jsgoogle-maps-api-3asynchronousexpress

Issues with React Native imports not functioning properly following recent upgrade

Hey there, I’ve been tasked with updating an old React-Native iOS project from version 0.25.1 to 0.48.0. However, I’m encountering several compiler issues and struggling to navigate through the code updates. The project includes an index.ios.js file s ...

javascriptiosreactjsreact-nativereact-native-ios

Arrangement of 'const' variables within React Stateless Components

Consider a scenario where I have a straightforward React stateless component: const myComponent = () => { const doStuff = () => { let number = 4; return doubleNumber(number); }; const doubleNumber = number => { ...

javascriptreactjsecmascript-6constantsreact-16

What is the best way to customize column width in AG-Grid?

I am looking for a way to dynamically set column width in my table. I have provided a stackblitz example which demonstrates that when changing the screen size, only the table border adjusts, but not the column widths. Is there a way to also change the col ...

javascripthtmlcssangular

How to display an unordered list horizontally in HTML

I'm working on a screen that has filters displayed vertically, but I want to align them horizontally and have the filter options arranged in two columns. I've tried using CSS properties like spacing, clear, and display block, but the checkboxes/l ...

javascriptjqueryhtmlcss

Dispatch prop within useEffect

App.js -> <Lobbies inGame={inGame} setLobby={setLobby} userName={userName} userKey={userKey}/> Lobbies.js -> import React, { useState, useEffect } from 'react'; import firebase from 'firebase'; const Lobby = ({userKey, ...

javascriptreactjsreact-native

The ambiguity surrounding the timing of decorator invocation in TypeScript

My understanding was that decorators in TypeScript are invoked after the constructor of a class. However, I recently learned otherwise. For example, the primary response on this thread suggests that Decorators are called when the class is declared—not wh ...

javascriptangulartypescriptdecorator

Issue with SVG on tainted canvas causes IE security error when using toDataURL

In my Angular JS directive, I have implemented a feature to export SVGs to PNG. While this functionality works seamlessly in most browsers, it encounters a security error in IE. Despite my numerous attempts to troubleshoot the issue, I have been unable to ...

javascriptangularjshtmlcanvassvg

Uploading images using the Drag and Drop feature in HTML

Hello, I'm having an issue with the drag and drop functionality. I want to expand the size of the input to cover the entire parent div, but for some reason, the input is appearing below the drag and drop div. Can anyone assist me with this? https://i. ...

javascriptjqueryhtmlcss

Basics of refactoring with Jquery and JavaScript

As someone who is still learning JavaScript/JQuery, I am trying to figure out how to refactor this code into a reusable method or function. $.getJSON('@Url.Action("GetLabNames", "Micro")', null, function(j) { var options = ''; ...

javascriptjqueryasp.net-mvcmodel-view-controller

The directive binding value is accurate, however it is failing to return a true result

The behavior of a custom directive is puzzling me. When I directly pass in a value, it works fine. However, if I bind the value to a variable, it doesn't work as expected. Interestingly, when I use console.log to show the value, it appears to be corre ...

javascriptangularjsangularjs-directive

What causes errors with Bootstrap's Carousel left arrow but not the right arrow?

I recently finished designing this webpage The page is static and was built using Bootstrap's framework. The carousel functions properly, except for when you try to navigate to the left using the arrow button, it throws errors. Any suggestions on how ...

javascriptjquerytwitter-bootstrapcarousel

Choose a specific element based on the content of its href attribute

Hello and thank you for your assistance! In the past, I have used JavaScript to add an active class to an element based on the URL being displayed. Now, I am looking to modify this behavior. My goal is to add an active class to an element if the href att ...

javascripthtmljquerybootstrap-4megamenu

Linux web server blocking requests across different domains, even with correct Access-Control-Allow-Origin headers set

I am facing an issue with my Ubuntu web server running a React app. There are two files on the server that handle requests made by the website, but for some reason, clients are unable to make requests to the server. Server.js: const express = require(&apos ...

javascriptnode.jscorsweb-development-serverubuntu-server

Changing the rotation of an object in THREE.js to match Canvas rotation

Hello amazing minds of stackoverflow. I am in the process of converting three js mesh positions to html5 canvas positions. While I have successfully converted vector3 position to canvas position, I am facing difficulties with converting mesh rotation to ca ...

javascriptcanvasthree.jshtml5-canvas