GLSLFragmentShader
Posted: 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>
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>