I'm struggling to set up a background animation on this canvas using three.js. However, the background renders as black instead of transparent. I attempted to adjust it with CSS by adding background-color:transparent;, but to no avail. I've searched for similar issues on Stack Overflow without success. How can I make the canvas transparent? Below are my HTML, CSS, and JS files.
Thanks in advance.
Here is the link to CodePen.
My HTML:
<canvas id="webgl-canvas"></canvas>
<!-- vertexShader -->
<script id="js-vertex-shader" type="x-shader/x-vertex">
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1.0);
}
</script>
<!-- fragmentShader -->
<script id="js-fragment-shader" type="x-shader/x-fragment">
precision highp float;
uniform vec2 resolution;
uniform float time;
uniform float xScale;
uniform float yScale;
uniform float distortion;
void main() {
vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
float d = length(p) * distortion;
float rx = p.x * (1.0 + d);
float gx = p.x;
float bx = p.x * (1.0 - d);
float r = 0.05 / abs(p.y + sin((rx + time) * xScale) * yScale);
float g = 0.05 / abs(p.y + sin((gx + time) * xScale) * yScale);
float b = 0.05 / abs(p.y + sin((bx + time) * xScale) * yScale);
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
My CSS:
#webgl-canvas{
width: 20% !important;
height:10% !important;
background: null !important;
}
My JS:
class Stage {
constructor() {
//...
}
init() {
//...
}
_setScene() {
//...
}
_setRender() {
//...
}
_setCamera() {
//...
}
_render() {
//...
}
onResize() {
//...
}
onRaf() {
//...
}
}
//...continued script