GLSLFragmentShader

Post Reply
User avatar
Administrator
Site Admin
Posts: 1754
Joined: Thu Mar 22, 2018 10:19 am

GLSLFragmentShader

Post by Administrator » Wed Jul 10, 2019 9:39 am

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>

Post Reply