babylonjs shader
Posted qianbo_insist
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了babylonjs shader相关的知识，希望对你有一定的参考价值。
babylonjs
有关于他的基础知识我们就不提了，下面这个例子是他的shader例子，写的非常好。要做好特效，肯定是需要shader相关的知识了，学一学有益处，ok，看code
https://www.babylonjs.com/demos/actions/
https://playground.babylonjs.com/#GHCBUE#2
/*
from threejs demo
https://threejs.org/examples/?q=postp#webgl_postprocessing_rgb_halftone
create by musk
*/
var createScene = function ()
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color3.FromHexString("#D6A6A6");
// This creates and positions a free camera (non-mesh)
// var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
var camera = new BABYLON.ArcRotateCamera("camera", 1.57, 1.134, 3,new BABYLON.Vector3(0.01,0.18,-0.08), scene);
camera.wheelDeltaPercentage = 0.02;
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
var bgCamera = new BABYLON.ArcRotateCamera("BGCamera", Math.PI / 2 + Math.PI / 7, Math.PI / 2, 100,
new BABYLON.Vector3(0, 0, 0),
scene);
bgCamera.layerMask = 0x10000000;
scene.activeCameras = [camera, bgCamera];
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
BABYLON.SceneLoader.ImportMesh("", "https://models.babylonjs.com/", "emoji_heart.glb", scene, function (meshes)
meshes[0].scaling = new BABYLON.Vector3(20,20,20);
var ground = BABYLON.Mesh.CreateGround("ground1", 16, 16, 2, scene);
ground.receiveShadows = true;
// Create and tweak the background material.
var backgroundMaterial = new BABYLON.BackgroundMaterial("backgroundMaterial", scene);
var mirror = new BABYLON.MirrorTexture("mirror", 512, scene);
mirror.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0);
mirror.renderList.push(scene.getMeshById("emoji_heart_new3.2"));
backgroundMaterial.reflectionTexture = mirror;
ground.material = backgroundMaterial;
);
BABYLON.Effect.ShadersStore["customFragmentShader"] = `
precision highp float;
// Samplers
uniform sampler2D textureSampler;
varying vec2 vUV;
// Parameters
uniform vec2 screenSize;
uniform int shape;
uniform float radius;
uniform float rotateR;
uniform float rotateG;
uniform float rotateB;
uniform float scatter;
uniform bool disable;
uniform bool greyscale;
uniform float blending;
uniform int blendingMode;
#define SQRT2_MINUS_ONE 0.41421356
#define SQRT2_HALF_MINUS_ONE 0.20710678
#define PI2 6.28318531
#define SHAPE_DOT 1
#define SHAPE_ELLIPSE 2
#define SHAPE_LINE 3
#define SHAPE_SQUARE 4
#define BLENDING_LINEAR 1
#define BLENDING_MULTIPLY 2
#define BLENDING_ADD 3
#define BLENDING_LIGHTER 4
#define BLENDING_DARKER 5
const int samples = 8;
float blend( float a, float b, float t )
// linear blend
return a * ( 1.0 - t ) + b * t;
float hypot( float x, float y )
// vector magnitude
return sqrt( x * x + y * y );
float rand( vec2 seed )
// get pseudo-random number
return fract( sin( dot( seed.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );
float distanceToDotRadius( float channel, vec2 coord, vec2 normal, vec2 p, float angle, float rad_max )
// apply shape-specific transforms
float dist = hypot( coord.x - p.x, coord.y - p.y );
float rad = channel;
if ( shape == SHAPE_DOT )
rad = pow( abs( rad ), 1.125 ) * rad_max;
else if ( shape == SHAPE_ELLIPSE )
rad = pow( abs( rad ), 1.125 ) * rad_max;
if ( dist != 0.0 )
float dot_p = abs( ( p.x - coord.x ) / dist * normal.x + ( p.y - coord.y ) / dist * normal.y );
dist = ( dist * ( 1.0 - SQRT2_HALF_MINUS_ONE ) ) + dot_p * dist * SQRT2_MINUS_ONE;
else if ( shape == SHAPE_LINE )
rad = pow( abs( rad ), 1.5) * rad_max;
float dot_p = ( p.x - coord.x ) * normal.x + ( p.y - coord.y ) * normal.y;
dist = hypot( normal.x * dot_p, normal.y * dot_p );
else if ( shape == SHAPE_SQUARE )
float theta = atan( p.y - coord.y, p.x - coord.x ) - angle;
float sin_t = abs( sin( theta ) );
float cos_t = abs( cos( theta ) );
rad = pow( abs( rad ), 1.4 );
rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) );
return rad - dist;
struct Cell
// grid sample positions
vec2 normal;
vec2 p1;
vec2 p2;
vec2 p3;
vec2 p4;
float samp2;
float samp1;
float samp3;
float samp4;
;
vec4 getSample( vec2 point )
// multi-sampled point
vec4 tex = texture2D( textureSampler, vec2( point.x / screenSize.x, point.y / screenSize.y ) );
float base = rand( vec2( floor( point.x ), floor( point.y ) ) ) * PI2;
float step = PI2 / float( samples );
float dist = radius * 0.66;
for ( int i = 0; i < samples; ++i )
float r = base + step * float( i );
vec2 coord = point + vec2( cos( r ) * dist, sin( r ) * dist );
tex += texture2D( textureSampler, vec2( coord.x / screenSize.x, coord.y / screenSize.y ) );
tex /= float( samples ) + 1.0;
return tex;
float getDotColour( Cell c, vec2 p, int channel, float angle, float aa )
// get colour for given point
float dist_c_1, dist_c_2, dist_c_3, dist_c_4, res;
if ( channel == 0 )
c.samp1 = getSample( c.p1 ).r;
c.samp2 = getSample( c.p2 ).r;
c.samp3 = getSample( c.p3 ).r;
c.samp4 = getSample( c.p4 ).r;
else if (channel == 1)
c.samp1 = getSample( c.p1 ).g;
c.samp2 = getSample( c.p2 ).g;
c.samp3 = getSample( c.p3 ).g;
c.samp4 = getSample( c.p4 ).g;
else
c.samp1 = getSample( c.p1 ).b;
c.samp3 = getSample( c.p3 ).b;
c.samp2 = getSample( c.p2 ).b;
c.samp4 = getSample( c.p4 ).b;
dist_c_1 = distanceToDotRadius( c.samp1, c.p1, c.normal, p, angle, radius );
dist_c_2 = distanceToDotRadius( c.samp2, c.p2, c.normal, p, angle, radius );
dist_c_3 = distanceToDotRadius( c.samp3, c.p3, c.normal, p, angle, radius );
dist_c_4 = distanceToDotRadius( c.samp4, c.p4, c.normal, p, angle, radius );
res = ( dist_c_1 > 0.0 ) ? clamp( dist_c_1 / aa, 0.0, 1.0 ) : 0.0;
res += ( dist_c_2 > 0.0 ) ? clamp( dist_c_2 / aa, 0.0, 1.0 ) : 0.0;
res += ( dist_c_3 > 0.0 ) ? clamp( dist_c_3 / aa, 0.0, 1.0 ) : 0.0;
res += ( dist_c_4 > 0.0 ) ? clamp( dist_c_4 / aa, 0.0, 1.0 ) : 0.0;
res = clamp( res, 0.0, 1.0 );
return res;
Cell getReferenceCell( vec2 p, vec2 origin, float grid_angle, float step )
// get containing cell
Cell c;
// calc grid
vec2 n = vec2( cos( grid_angle ), sin( grid_angle ) );
float threshold = step * 0.5;
float dot_normal = n.x * ( p.x - origin.x ) + n.y * ( p.y - origin.y );
float dot_line = -n.y * ( p.x - origin.x ) + n.x * ( p.y - origin.y );
vec2 offset = vec2( n.x * dot_normal, n.y * dot_normal );
float offset_normal = mod( hypot( offset.x, offset.y ), step );
float normal_dir = ( dot_normal < 0.0 ) ? 1.0 : -1.0;
float normal_scale = ( ( offset_normal < threshold ) ? -offset_normal : step - offset_normal ) * normal_dir;
float offset_line = mod( hypot( ( p.x - offset.x ) - origin.x, ( p.y - offset.y ) - origin.y ), step );
float line_dir = ( dot_line < 0.0 ) ? 1.0 : -1.0;
float line_scale = ( ( offset_line < threshold ) ? -offset_line : step - offset_line ) * line_dir;
// get closest corner
c.normal = n;
c.p1.x = p.x - n.x * normal_scale + n.y * line_scale;
c.p1.y = p.y - n.y * normal_scale - n.x * line_scale;
// scatter
if ( scatter != 0.0 )
float off_mag = scatter * threshold * 0.5;
float off_angle = rand( vec2( floor( c.p1.x ), floor( c.p1.y ) ) ) * PI2;
c.p1.x += cos( off_angle ) * off_mag;
c.p1.y += sin( off_angle ) * off_mag;
// find corners
float normal_step = normal_dir * ( ( offset_normal < threshold ) ? step : -step );
float line_step = line_dir * ( ( offset_line < threshold ) ? step : -step );
c.p2.x = c.p1.x - n.x * normal_step;
c.p2.y = c.p1.y - n.y * normal_step;
c.p3.x = c.p1.x + n.y * line_step;
c.p3.y = c.p1.y - n.x * line_step;
c.p4.x = c.p1.x - n.x * normal_step + n.y * line_step;
c.p4.y = c.p1.y - n.y * normal_step - n.x * line_step;
return c;
float blendColour( float a, float b, float t )
// blend colours
if ( blendingMode == BLENDING_LINEAR )
return blend( a, b, 1.0 - t );
else if ( blendingMode == BLENDING_ADD )
return blend( a, min( 1.0, a + b ), t );
else if ( blendingMode == BLENDING_MULTIPLY )
return blend( a, max( 0.0, a * b ), t );
else if ( blendingMode == BLENDING_LIGHTER )
return blend( a, max( a, b ), t );
else if ( blendingMode == BLENDING_DARKER )
return blend( a, min( a, b ), t );
else
return blend( a, b, 1.0 - t );
void main()
if ( ! disable )
// setup
vec2 p = vec2( vUV.x * screenSize.x, vUV.y * screenSize.y );
vec2 origin = vec2( 0, 0 );
float aa = ( radius < 2.5 ) ? radius * 0.5 : 1.25;
// get channel samples
Cell cell_r = getReferenceCell( p, origin, rotateR, radius );
Cell cell_g = getReferenceCell( p, origin, rotateG, radius );
Cell cell_b = getReferenceCell( p, origin, rotateB, radius );
float r = getDotColour( cell_r, p, 0, rotateR, aa );
float g = getDotColour( cell_g, p, 1, rotateG, aa );
float b = getDotColour( cell_b, p, 2, rotateB, aa );
// blend with original
vec4 colour = texture2D( textureSampler, vUV );
r = blendColour( r, colour.r, blending );
g = blendColour( g, colour.g, blending );
b = blendColour( b, colour.b, blending );
if ( greyscale )
r = g = b = (r + b + g) / 3.0;
gl_FragColor = vec4( r, g, b, 1 );
else
gl_FragColor = texture2D( textureSampler, vUV );
`;
var panel = new BABYLON.GUI.StackPanel();
panel.width = "220px";
panel.fontSize = "34px";
panel.outlineWidth = 10;
panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
advancedTexture.layer.layerMask = 0x10000000;
var postProcess = new BABYLON.PostProcess("My custom post process", "custom", ["screenSize", "shape","radius","rotateR","rotateG","rotateB","scatter","blending","blendingMode","greyscale","disable"], null, 1, camera,BABYLON.Texture.NEAREST_NEAREST, engine, true);
var shapev = 1;
var radiusv = 15.0;
var rotateRv = Math.PI / 5 ;
var rotateGv = Math.PI / 5 ;
var rotateBv = Math.PI / 5 ;
var scatterv = .0 ;
var blendingv = 1.0 ;
var blendingModev = 1 ;
var greyscalev = false ;
var disablev = false ;
postProcess.onApply = (effect)=>
effect.setFloat2("screenSize", postProcess.width, postProcess.height);
effect.setInt("shape", shapev);
effect.setFloat("radius", radiusv);
effect.setFloat("rotateR", rotateRv);
effect.setFloat("rotateG", rotateGv);
effect.setFloat("rotateB", rotateBv);
effect.setFloat("scatter", scatterv);
effect.setFloat("blending", blendingv);
effect.setInt("blendingMode", blendingModev);
effect.setBool("greyscale", greyscalev);
effect.setBool("disable", disablev);
;
// shape 'Dot': 1, 'Ellipse': 2, 'Line': 3, 'Square': 4
var shapewheader = new BABYLON.GUI.TextBlock();
shapewheader.text = "shape"+": ";
shapewheader.height = "30px";
shapewheader.color = "red";
shapewheader.outlineWidth = 10;
panel.addControl(shapewheader);
var shapeslider = new BABYLON.GUI.Slider();
shapeslider.minimum = 1;
shapeslider.maximum = 4;
shapeslider.value = 1;
shapeslider.step = 1;
shapeslider.height = "20px";
shapeslider.width = "200px";
shapeslider.onValueChangedObservable.add(function(value)
shapewheader.text = "shape"+": " + (value | 1) ;
shapev = value;
console.log(value)
);
panel.addControl(shapeslider);
// radius 1-100
var radiuswheader = new BABYLON.GUI.TextBlock();
radiuswheader.text = "radius"+": ";
radiuswheader.height = "30px";
radiuswheader.color = "red";
radiuswheader.outlineWidth = 10;
panel.addControl(radiuswheader);
var radiusslider = new BABYLON.GUI.Slider();
radiusslider.minimum = 0;
radiusslider.maximum = 100;
radiusslider.value = 15;
radiusslider.step = 1;
radiusslider.height = "20px";
radiusslider.width = "200px";
radiusslider.onValueChangedObservable.add(function(value)
radiuswheader.text = "radius"+": " + (value | 1) ;
radiusv = value;
console.log(value)
);
panel.addControl(radiusslider);
// rotateR 0-90
var rotateRwheader = new BABYLON.GUI.TextBlock();
rotateRwheader.text = "rotateR"+": ";
rotateRwheader.height = "30px";
rotateRwheader.color = "red";
rotateRwheader.outlineWidth = 10;
panel.addControl(rotateRwheader);
var rotateRslider = new BABYLON.GUI.Slider();
rotateRslider.minimum = 0;
rotateRslider.maximum = Math.PI;
rotateRslider.value = Math.PI / 5;
rotateRslider.step = 0.1;
rotateRslider.height = "20px";
rotateRslider.width = "200px";
rotateRslider.onValueChangedObservable.add(function(value)
rotateRwheader.text = "rotateR"+": " + (value | 1) ;
rotateRv = value;
console.log(value)
);
panel.addControl(rotateRslider);
// rotateG 0-90
var rotateGwheader = new BABYLON.GUI.TextBlock();
rotateGwheader.text = "rotateG"+": ";
rotateGwheader.height = "30px";
rotateGwheader.color = "red";
rotateGwheader.outlineWidth = 10;
panel.addControl(rotateGwheader);
var rotateGslider = new BABYLON.GUI.Slider();
rotateGslider.minimum = 0;
rotateGslider.maximum = Math.PI;
rotateGslider.value = Math.PI / 5;
rotateGslider.step = 0.1;
rotateGslider.height = "20px";
rotateGslider.width = "200px";
rotateGslider.onValueChangedObservable.add(function(value)
rotateGwheader.text = "rotateG"+": " + (value | 1) ;
rotateGv = value;
console.log(value)
);
panel.addControl(rotateGslider);
// rotateB 0-90
var rotateBwheader = new BABYLON.GUI.TextBlock();
rotateBwheader.text = "rotateB"+": ";
rotateBwheader.height = "30px";
rotateBwheader.color = "red";
rotateBwheader.outlineWidth = 10;
panel.addControl(rotateBwheader);
var rotateBslider = new BABYLON.GUI.Slider();
rotateBslider.minimum = 0;
rotateBslider.maximum = Math.PI;
rotateBslider.value = Math.PI / 5;
rotateBslider.step = 0.1;
rotateBslider.height = "20px";
rotateBslider.width = "200px";
rotateBslider.onValueChangedObservable.add(function(value)
rotateBwheader.text = "rotateB"+": " + (value | 1) ;
rotateBv = value;
console.log(value)
);
panel.addControl(rotateBslider);
// scatter 0, 1, 0.01
var scatterwheader = new BABYLON.GUI.TextBlock();
scatterwheader.text = "scatter"+": ";
scatterwheader.height = "30px";
scatterwheader.color = "red";
scatterwheader.outlineWidth = 10;
panel.addControl(scatterwheader);
var scatterslider = new BABYLON.GUI.Slider();
scatterslider.minimum = 0;
scatterslider.maximum = 1;
scatterslider.value = 0;
scatterslider.step = 0.01;
scatterslider.height = "20px";
scatterslider.width = "200px";
scatterslider.onValueChangedObservable.add(function(value)
scatterwheader.text = "scatter"+": " + (value | 1) ;
scatterv = value;
console.log(value)
);
panel.addControl(scatterslider);
// blending 0, 1, 0.01
var blendingwheader = new BABYLON.GUI.TextBlock();
blendingwheader.text = "blending"+": ";
blendingwheader.height = "30px";
blendingwheader.color = "red";
blendingwheader.outlineWidth = 10;
panel.addControl(blendingwheader);
var blendingslider = new BABYLON.GUI.Slider();
blendingslider.minimum = 0;
blendingslider.maximum = 1;
blendingslider.value = 0;
blendingslider.step = 0.01;
blendingslider.height = "20px";
blendingslider.width = "200px";
blendingslider.onValueChangedObservable.add(function(value)
blendingwheader.text = "blending"+": " + (value | 1) ;
blendingv = value;
console.log(value)
);
panel.addControl(blendingslider);
// blendingMode 'Linear': 1, 'Multiply': 2, 'Add': 3, 'Lighter': 4, 'Darker': 5
var blendingModewheader = new BABYLON.GUI.TextBlock()babylonjs 效果展示页被封？ 特么怎么啥都封锁！