Pixijs.v3 Shader Example

Developer
Omar Shehata
Size
3,213 Kb
Views
170,016
  1. Pixijs.v3 Shader Example Previews
  2. Pixijs.v3 Shader Example HTML Codes
  3. Pixijs.v3 Shader Example CSS Codes
  4. Pixijs.v3 Shader Example JS Codes

How do I make an pixijs.v3 shader example?

Example running a custom shader in Pixi.js, adapted to run using v3 from: http://codepen.io/davidhartley/pen/seEki?editors=0010. What is a pixijs.v3 shader example? How do you make a pixijs.v3 shader example? This script and codes were developed by Omar Shehata on 24 July 2022, Sunday.

Pixijs.v3 Shader Example Previews
IQ Test

Pixijs.v3 Shader Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixijs.v3 Shader Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script id="fragShader" type="shader-code">
precision mediump float;
uniform vec2 resolution;
uniform float time;
uniform float alpha;
uniform vec2 speed;
uniform float shift;
float rand(vec2 n) { //This is just a compounded expression to simulate a random number based on a seed given as n	return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}
float noise(vec2 n) { //Uses the rand function to generate noise const vec2 d = vec2(0.0, 1.0); vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n)); return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
}
float fbm(vec2 n) { //fbm stands for "Fractal Brownian Motion" https://en.wikipedia.org/wiki/Fractional_Brownian_motion float total = 0.0, amplitude = 1.0; for (int i = 0; i < 4; i++) { total += noise(n) * amplitude; n += n; amplitude *= 0.5; } return total;
}
void main() { //This is where our shader comes together const vec3 c1 = vec3(126.0/255.0, 0.0/255.0, 97.0/255.0); const vec3 c2 = vec3(173.0/255.0, 0.0/255.0, 161.4/255.0); const vec3 c3 = vec3(0.2, 0.0, 0.0); const vec3 c4 = vec3(164.0/255.0, 1.0/255.0, 214.4/255.0); const vec3 c5 = vec3(0.1); const vec3 c6 = vec3(0.9); //This is how "packed" the smoke is in our area. Try changing 8.0 to 1.0, or something else vec2 p = gl_FragCoord.xy * 8.0 / resolution.xx; //The fbm function takes p as its seed (so each pixel looks different) and time (so it shifts over time) float q = fbm(p - time * 0.1); vec2 r = vec2(fbm(p + q + time * speed.x - p.x - p.y), fbm(p + q - time * speed.y)); vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y); float grad = gl_FragCoord.y / resolution.y; gl_FragColor = vec4(c * cos(shift * gl_FragCoord.y / resolution.y), 1.0); gl_FragColor.xyz *= 1.0-grad;
}
</script> <script src='https://cdn.jsdelivr.net/pixi.js/3.0.7/pixi.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pixijs.v3 Shader Example - Script Codes CSS Codes

body { margin: 0; overflow: hidden;
}

Pixijs.v3 Shader Example - Script Codes JS Codes

//Adapted from: http://codepen.io/davidhartley/pen/seEki?editors=0010
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new PIXI.autoDetectRenderer(width, height);//Chooses either WebGL if supported or falls back to Canvas rendering
document.body.appendChild(renderer.view);//Add the render view object into the page
var stage = new PIXI.Container();//The stage is the root container that will hold everything in our scene
// smoke shader
var uniforms = {};
uniforms.resolution = { type: 'v2', value: { x: width, y: height}};
uniforms.alpha = { type: '1f', value: 1.0};
uniforms.shift = { type: '1f', value: 1.6};
uniforms.time = {type: '1f',value: 0};
uniforms.speed = {type: 'v2', value: {x: 0.7, y: 0.4}};
var shaderCode = document.getElementById( 'fragShader' ).innerHTML
var smokeShader = new PIXI.AbstractFilter('',shaderCode, uniforms);
var bg = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png");
bg.width = width;
bg.height = height;
bg.filters = [smokeShader]
stage.addChild(bg);
var logo = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png");
logo.x = width / 2;
logo.y = height / 2;
logo.anchor.set(0.5);
logo.blendMode = PIXI.BLEND_MODES.ADD;
stage.addChild(logo)
animate()
var count = 0
function animate() { // start the timer for the next animation loop requestAnimationFrame(animate); count+=0.01 smokeShader.uniforms.time.value = count; // this is the main render call that makes pixi draw your container and its children. renderer.render(stage);
}
Pixijs.v3 Shader Example - Script Codes
Pixijs.v3 Shader Example - Script Codes
Home Page Home
Developer Omar Shehata
Username omarshe7ta
Uploaded July 24, 2022
Rating 3.5
Size 3,213 Kb
Views 170,016
Do you need developer help for Pixijs.v3 Shader Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Omar Shehata (omarshe7ta) Script Codes
Name
Pixijs.v3 Basic Shader
Rotating Cube
Framebuffer - Basic Scene
Smoke Shader - Diffuse
Featherlight Zoom Test
ACM Drawing Practice
Pixijs.v3 Rendering Texture
Framebuffer - Final
Initial Scene
Framebuffer - Texture Render
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!