I am looking to enhance a WordPress theme by dynamically generating glsl shaders using the three.js library for JavaScript, and then incorporating those shaders into various HTML elements, such as using them as backgrounds for text content.
My current challenge involves a partially functional code that uses a shader as a background for text. However, the white pixels of the shader program are blocking parts of the text that should be displayed in front of it, despite having a lower z-index. I have been unable to resolve this issue on my own and would greatly appreciate any viable solutions.
To provide a visual depiction of the problem, you can observe it here: shader blocking text
Upon inspecting the document, it appears that the div with id "text-container" should be positioned in front of the canvas based on its z-index. Here is a screenshot from the inspector console: inspector console
Additionally, though likely unrelated, I am including the JavaScript code responsible for rendering the shader onto the page and setting the z-index values accordingly:
// Set the renderer size and add it to the container
iReturn.renderer = new THREE.WebGLRenderer();
iReturn.renderer.setSize(
shadowEl.getBoundingClientRect().width,
shadowEl.getBoundingClientRect().height
);
// Set the renderer DOM element positioning to absolute, positioning it perfectly over its parent container
iReturn.renderer.domElement.style.position = "absolute";
iReturn.renderer.domElement.style.top = 0;
iReturn.renderer.domElement.style.left = 0;
// Position the renderer behind the parent's contents using z-index
iReturn.renderer.domElement.style.zIndex = "1";
// The shadow element should have a higher z-index than its child shader renderer, which has a z-index of "1"
shadowEl.style.zIndex = "2";
// Set a transparent background so only the text displays
shadowEl.style.backgroundColor = "transparent";
shadowEl.style.position = "relative";
shadowEl.appendChild(iReturn.renderer.domElement);