Pixijs.v3 Sending Data to Shader

Developer
Omar Shehata
Size
2,599 Kb
Views
26,312
  1. Pixijs.v3 Sending Data to Shader Previews
  2. Pixijs.v3 Sending Data to Shader HTML Codes
  3. Pixijs.v3 Sending Data to Shader CSS Codes
  4. Pixijs.v3 Sending Data to Shader JS Codes

How do I make an pixijs.v3 sending data to shader?

What is a pixijs.v3 sending data to shader? How do you make a pixijs.v3 sending data to shader? This script and codes were developed by Omar Shehata on 13 August 2022, Saturday.

Pixijs.v3 Sending Data to Shader Previews
IQ Test

Pixijs.v3 Sending Data to Shader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixijs.v3 Sending Data to Shader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script id="shader" type="shader"> precision mediump float; uniform vec2 mouse; uniform vec2 resolution; uniform float time; void main(){ gl_FragColor = vec4(sin(time),mouse.x/resolution.x,mouse.y/resolution.y,1.0); }
</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 Sending Data to Shader - Script Codes CSS Codes

body { margin: 0; overflow: hidden;
}

Pixijs.v3 Sending Data to Shader - Script Codes JS Codes

var width = window.innerWidth;//Get the screen width and height
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
//Load an image and create an object
var logo = PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/pixi_v3_github-pad.png");
logo.x = width / 2;//Set it at the center of the screen
logo.y = height / 2;
logo.anchor.set(0.5);//Make sure the center point of the image is at its center, instead of the default top left
stage.addChild(logo)//Add it to the screen
//Create a uniforms object to send to the shader
var uniforms = {}
uniforms.mouse = { type:'v2', value: {x:0,y:0}
}
uniforms.time = { type:"f", value:0
}
uniforms.resolution = { type:"v2", value:{x:width,y:height}
}
function animate() { // start the timer for the next animation loop requestAnimationFrame(animate); // this is the main render call that makes pixi draw your container and its children. renderer.render(stage); uniforms.time.value += 0.1
}
animate()
//Get shader code as a string
var shaderCode = document.getElementById("shader").innerHTML
//Create our Pixi filter using our custom shader code
var simpleShader = new PIXI.AbstractFilter('',shaderCode,uniforms);
//Apply it to our object
logo.filters = [simpleShader]
document.onmousemove = function(evt){ //Get the mouse position mousePos = {x:evt.clientX,y:evt.clientY} //Assigning a new value lets Pixi know to update the uniform in the shader // But doing something like uniforms.mouse.x = 0, won't update in this current version of Pixi uniforms.mouse.value = mousePos;
}
Pixijs.v3 Sending Data to Shader - Script Codes
Pixijs.v3 Sending Data to Shader - Script Codes
Home Page Home
Developer Omar Shehata
Username omarshe7ta
Uploaded August 13, 2022
Rating 3
Size 2,599 Kb
Views 26,312
Do you need developer help for Pixijs.v3 Sending Data to Shader?

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
Framebuffer - Texture Render
Pixijs.v3 Shader Example
Initial Scene
Basic Threejs Scene
ACM Drawing Practice
Featherlight Zoom Test
Framebuffer - Final
Simple Lighting Model
Smoke Shader - Diffuse
Framebuffer - Basic Scene
Create amazing captions 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!