Im trying to make a BG element with p5.js (Shader) using WEBGL with an SVG over it. I have the positioning right, however, the p5 sketch sits on top of the SVG despite z-indexing that element. Any thoughts? There are .frag and .vert files but im keeping them out as it adds a ton of code.
// HTML <body> <header> <svg> ....///... </svg> </header> <div id="header_sketch"></div> </body> /// CSS header { position: relative; z-index: 200; } #header_sketch { position: absolute; top: 0; z-index: -200; } /// JS let theShader; function preload() { theShader = loadShader('shader.vert', 'shader.frag'); } function setup() { pixelDensity(1); let myCanvas = createCanvas(windowWidth, windowHeight, WEBGL); myCanvas.parent('header_sketch'); } function draw() { shader(theShader); theShader.setUniform("u_resolution", [width, height]); theShader.setUniform("u_time", millis() / 1000.0); theShader.setUniform("u_mouse", [mouseX, map(mouseY, 0, height, height, 0)]); rect(0.0, 0.0, 1.0, 1.0); } function windowResized() { resizeCanvas(windowWidth, windowHeight); } 
没有评论:
发表评论