David Clews

Add a GLSL Fragment Shader to your fourm with bbcode and javascript files added to your installation of phpbb.


Tag

[setGLSL]{URL1}[/setGLSL]

HTML Replacement
<script>
(function(){
/* must be executed instantly */
let script = document.currentScript || (function() {
var scripts = document.getElementsByTagName("script");
return scripts[scripts.length - 1];
})();

document.addEventListener("DOMContentLoaded", function(){
/* check to see if setBackgroundCanvas/GLSLFragmentShader have Been Applied */

if(typeof Element.prototype.setBackgroundCanvas !== "undefined"){
/* setBackgroundCanvas Already Loaded */

if(typeof window.GLSLFragmentShader !== "undefined"){


let ele1 = $(script).closest(".post")[0];
ele1.style.background = "none";

let GLSLJson = "{URL1}";

let glslFragmentShader = new GLSLFragmentShader(ele1, GLSLJson);

try{
ele1.destroyBackgroundCanvas();
}catch(err){
console.log(err);
}


ele1.glslFragmentShaderLoaded = function(){

ele1.size = 1;
ele1.setBackgroundCanvas(glslFragmentShader);


ele1.removeEventListener("GLSLFragmentShaderLoaded", ele1.glslFragmentShaderLoaded);

}

ele1.backgroundCanvasLoaded = function(){
ele1.canvas.reFresh();
ele1.canvas.element.classList.add("xy-xy");


/* cleanup */
document.body.removeEventListener("BackgroundCanvasLoaded", ele1.backgroundCanvasLoaded);

}

ele1.addEventListener("BackgroundCanvasLoaded", ele1.backgroundCanvasLoaded, false);

ele1.addEventListener("GLSLFragmentShaderLoaded", ele1.glslFragmentShaderLoaded, false);



}else{
console.log("This template does not support GLSLFragmentShader");
}
}else{
console.log("This template does not support setBackgroundCanvas ");
}
});

})();
</script>

Help Line

Load a GLSLFragmentShader Behind the Post

Files

Add the following Files to the installation of phpbb, put each project in it's own folder setBackgroundCanvas and GLSLFragmentShader respectively. The setBackgroundcanvas Project was designed for npm use this version instead below as it include all the required functions

assets/setBackgroundCanvas/setBackgroundCanvas.js
https://github.com/webciter/GLSLFragmen ... tShader.js


Edit the overall_header.php file of your installation template that your using and add the following two lines before the closing head tag.

<script src="{T_ASSETS_PATH}/setBackgroundCanvas/setBackgroundCanvas.js"></script>
<script src="{T_ASSETS_PATH}/GLSLFragmentShader/GLSLFragmentShader.js"></script>