Dear Magnificent Community and Developers,
There's a PixiJs filter which is based on a shader ""Godrays" by alaingalvan", but it is required to somehow achieve such a filter/shader which does lighten certain areas where "lights" exist on a transparent stage without darkening the background.
The current version creates dark places ('0x000000') where the "lights" are not shown, but the darkness must not surpass the background ('0x333333' or '0xffffff' as in CSS), so it would look like a transparent filter in the result. This is the incorrect behavior since it creates black background where the "lights" are (it is correct that it affects the background):
const uniformData = {
time: {
type: 'float',
value: 0.0
},
lacunarity: {
type: 'float',
value: 30.0
},
gain: {
type: 'float',
value: 1.0
},
parallel: {
type: 'b',
value: true
},
light: {
type: 'v2',
value: [0.0, 0.0]
},
dimensions: {
type: 'v2',
value: [800, 400]
},
aspect: {
type: 'float',
value: 1.0
}
};
// 3D gradient Noise
// MIT License
// Copyright © 2013 Inigo Quilez
// https://www.shadertoy.com/view/Xsl3Dl
// Original: https://codepen.io/alaingalvan/pen/gOoEpW
const fragSource = '' +
`precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform vec4 filterArea;
uniform vec2 dimensions;
uniform vec2 light;
uniform bool parallel;
uniform float aspect;
uniform float gain;
uniform float lacunarity;
uniform float time;
vec3 hash(vec3 p) {
p = vec3(
dot(p, vec3(127.1, 311.7, 74.7)),
dot(p, vec3(269.5, 183.3, 246.1)),
dot(p, vec3(113.5, 271.9, 124.6))
);
return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}
float noise(in vec3 p) {
vec3 i = floor(p);
vec3 f = fract(p);
vec3 u = f * f * (3.0 - 2.0 * f);
return mix(
mix(
mix(
dot(hash(i + vec3(0.0, 0.0, 0.0)), f - vec3(0.0, 0.0, 0.0)),
dot(hash(i + vec3(1.0, 0.0, 0.0)), f - vec3(1.0, 0.0, 0.0)),
u.x
),
mix(
dot(hash(i + vec3(0.0, 1.0, 0.0)), f - vec3(0.0, 1.0, 0.0)),
dot(hash(i + vec3(1.0, 1.0, 0.0)), f - vec3(1.0, 1.0, 0.0)),
u.x
),
u.y
),
mix(
mix(
dot(hash(i + vec3(0.0, 0.0, 1.0)), f - vec3(0.0, 0.0, 1.0)),
dot(hash(i + vec3(1.0, 0.0, 1.0)), f - vec3(1.0, 0.0, 1.0)),
u.x
),
mix(
dot(hash(i + vec3(0.0, 1.0, 1.0)), f - vec3(0.0, 1.0, 1.0)),
dot(hash(i + vec3(1.0, 1.0, 1.0)), f - vec3(1.0, 1.0, 1.0)),
u.x
),
u.y
),
u.z
);
}
float turb(vec3 pos, float lacunarity, float gain) {
float f, totalGain;
totalGain = gain;
vec3 q = 2.0 * pos;
f = totalGain * noise(q);
q = q * 2.01 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.02 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.03 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.01 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.99 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.98 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
f = 3.0 * f;
return abs(f);
}
void main(void) {
gl_FragColor = texture2D(uSampler, vTextureCoord);
float d = 0.0;
vec2 coord = vTextureCoord;
if (parallel) {
float _cos = light.x;
float _sin = light.y;
d = (_cos * coord.x) + (_sin * coord.y * aspect);
} else {
float dx = coord.x - light.x / dimensions.x;
float dy = (coord.y - light.y / dimensions.y) * aspect;
float dis = sqrt(dx * dx + dy * dy) + 0.00001;
d = dy / dis;
}
vec2 dir = vec2(d, d);
float noise = turb(vec3(dir, 0.0) + vec3(time, 0.0, 62.1 + time) * 0.1, lacunarity, gain);
vec4 mist = vec4(noise, noise, noise, 1.0);
noise = mix(noise, 0.0, 0.3);
mist *= 1.0 - coord.y;
mist = clamp(mist, 0.0, 1.0);
gl_FragColor += mist;
}`;
class Rays extends PIXI.Filter
{
_options = {
angle: 30,
lacunarity: 1.5,
gain: 0.4,
parallel: Math.round(Math.random()),
speed: 0.0003
}
_timeInit = null;
constructor()
{
super(null, fragSource, uniformData);
this._timeInit = Date.now() - Math.floor(Math.random() * 99999999);
}
apply(filterManager, input, output, clearMode, _currentState)
{
this.uniforms.time = (Date.now() - this._timeInit) * this._options.speed;
this.uniforms.lacunarity = this._options.lacunarity;
this.uniforms.gain = this._options.gain;
this.uniforms.parallel = this._options.parallel;
const radians = this._options.angle * Math.PI / 180.0;
this.uniforms.light[0] = Math.cos(radians);
this.uniforms.light[1] = Math.sin(radians);
const {width, height} = input.filterFrame;
this.uniforms.dimensions[0] = width;
this.uniforms.dimensions[1] = height;
this.uniforms.aspect = height / width;
filterManager.applyFilter(this, input, output, clearMode);
}
}
// -------------------------------
class App
{
_app = null;
_resources = null;
constructor() {
this._app = new PIXI.Application({
view: canvas,
width: 800,
height: 600,
transparent: true,
resolution: window.devicePixelRatio
});
this._init();
}
addRelativeFeather(x, y) {
const feather = new PIXI.Sprite(this._resources.feather.texture);
const scale = Math.max(
this._app.screen.width / (feather.width * 3),
this._app.screen.height / (feather.height * 3)
);
feather.scale.set(scale, scale);
feather.position.set(x * feather.width, y * feather.height);
feather.filters = [new Rays()];
this._app.stage.addChild(feather);
}
_main() {
this.addRelativeFeather(0, 0);
this.addRelativeFeather(1, 0);
this.addRelativeFeather(2, 0);
this.addRelativeFeather(0, 1);
this.addRelativeFeather(2, 1);
}
_init() {
const loader = PIXI.Loader.shared;
loader.add({
name: 'feather',
// Icon "feather": https://www.flaticon.com/free-icon/feathers_6981026
url: 'https://cdn-icons-png.flaticon.com/512/6981/6981026.png',
});
loader.onComplete.once((loaderProcessed, resources) => {
this._resources = resources;
this._main();
});
loader.load();
}
}
const app = new App();
* {
margin: 0;
padding: 0;
background: #333;
}
<script src="https://pixijs.download/v6.5.8/pixi.js"></script>
<canvas id="canvas"></canvas>
Is it possible using this filter/shader? Is it correct that the issue is in the color matrix ("float noise(in vec3 p)")?
Also, it's probably the mist = clamp(mist, 0.0, 1.0); where the second parameter might assume the minimum allowed if that makes sense.
Would it be correct to somehow base a pixel color on the source and only increase its "gain" instead?
I would highly appreciate any suggestion since I have already tried various options but it still darkens the origin!
Best and kind regards ✨
const uniformData = {
time: {
type: 'float',
value: 0.0
},
lacunarity: {
type: 'float',
value: 30.0
},
gain: {
type: 'float',
value: 1.0
},
parallel: {
type: 'b',
value: true
},
light: {
type: 'v2',
value: [0.0, 0.0]
},
dimensions: {
type: 'v2',
value: [800, 400]
},
aspect: {
type: 'float',
value: 1.0
}
};
// 3D gradient Noise
// MIT License
// Copyright © 2013 Inigo Quilez
// https://www.shadertoy.com/view/Xsl3Dl
// Original: https://codepen.io/alaingalvan/pen/gOoEpW
const fragSource = '' +
`precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform vec4 filterArea;
uniform vec2 dimensions;
uniform vec2 light;
uniform bool parallel;
uniform float aspect;
uniform float gain;
uniform float lacunarity;
uniform float time;
vec3 hash(vec3 p) {
p = vec3(
dot(p, vec3(127.1, 311.7, 74.7)),
dot(p, vec3(269.5, 183.3, 246.1)),
dot(p, vec3(113.5, 271.9, 124.6))
);
return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}
float noise(in vec3 p) {
vec3 i = floor(p);
vec3 f = fract(p);
vec3 u = f * f * (3.0 - 2.0 * f);
return mix(
mix(
mix(
dot(hash(i + vec3(0.0, 0.0, 0.0)), f - vec3(0.0, 0.0, 0.0)),
dot(hash(i + vec3(1.0, 0.0, 0.0)), f - vec3(1.0, 0.0, 0.0)),
u.x
),
mix(
dot(hash(i + vec3(0.0, 1.0, 0.0)), f - vec3(0.0, 1.0, 0.0)),
dot(hash(i + vec3(1.0, 1.0, 0.0)), f - vec3(1.0, 1.0, 0.0)),
u.x
),
u.y
),
mix(
mix(
dot(hash(i + vec3(0.0, 0.0, 1.0)), f - vec3(0.0, 0.0, 1.0)),
dot(hash(i + vec3(1.0, 0.0, 1.0)), f - vec3(1.0, 0.0, 1.0)),
u.x
),
mix(
dot(hash(i + vec3(0.0, 1.0, 1.0)), f - vec3(0.0, 1.0, 1.0)),
dot(hash(i + vec3(1.0, 1.0, 1.0)), f - vec3(1.0, 1.0, 1.0)),
u.x
),
u.y
),
u.z
);
}
float turb(vec3 pos, float lacunarity, float gain) {
float f, totalGain;
totalGain = gain;
vec3 q = 2.0 * pos;
f = totalGain * noise(q);
q = q * 2.01 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.02 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.03 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.01 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.99 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
q = q * 3.98 * lacunarity;
totalGain *= gain;
f += totalGain * noise(q);
f = 3.0 * f;
return abs(f);
}
void main(void) {
gl_FragColor = texture2D(uSampler, vTextureCoord);
float d = 0.0;
vec2 coord = vTextureCoord;
if (parallel) {
float _cos = light.x;
float _sin = light.y;
d = (_cos * coord.x) + (_sin * coord.y * aspect);
} else {
float dx = coord.x - light.x / dimensions.x;
float dy = (coord.y - light.y / dimensions.y) * aspect;
float dis = sqrt(dx * dx + dy * dy) + 0.00001;
d = dy / dis;
}
vec2 dir = vec2(d, d);
float noise = turb(vec3(dir, 0.0) + vec3(time, 0.0, 62.1 + time) * 0.1, lacunarity, gain);
vec4 mist = vec4(noise, noise, noise, noise);
noise = mix(noise, 0.0, 0.3);
mist *= 1.0 - coord.y;
mist = clamp(mist, 0.0, 1.0);
gl_FragColor += mist;
}`;
class Rays extends PIXI.Filter
{
_options = {
angle: 30,
lacunarity: 1.5,
gain: 0.4,
parallel: Math.round(Math.random()),
speed: 0.0003
}
_timeInit = null;
constructor()
{
super(null, fragSource, uniformData);
this._timeInit = Date.now() - Math.floor(Math.random() * 99999999);
}
apply(filterManager, input, output, clearMode, _currentState)
{
this.uniforms.time = (Date.now() - this._timeInit) * this._options.speed;
this.uniforms.lacunarity = this._options.lacunarity;
this.uniforms.gain = this._options.gain;
this.uniforms.parallel = this._options.parallel;
const radians = this._options.angle * Math.PI / 180.0;
this.uniforms.light[0] = Math.cos(radians);
this.uniforms.light[1] = Math.sin(radians);
const {width, height} = input.filterFrame;
this.uniforms.dimensions[0] = width;
this.uniforms.dimensions[1] = height;
this.uniforms.aspect = height / width;
filterManager.applyFilter(this, input, output, clearMode);
}
}
// -------------------------------
class App
{
_app = null;
_resources = null;
constructor() {
this._app = new PIXI.Application({
view: canvas,
width: 800,
height: 600,
transparent: true,
resolution: window.devicePixelRatio
});
this._init();
}
addRelativeFeather(x, y) {
const feather = new PIXI.Sprite(this._resources.feather.texture);
const scale = Math.max(
this._app.screen.width / (feather.width * 3),
this._app.screen.height / (feather.height * 3)
);
feather.scale.set(scale, scale);
feather.position.set(x * feather.width, y * feather.height);
feather.filters = [new Rays()];
this._app.stage.addChild(feather);
}
_main() {
this.addRelativeFeather(0, 0);
this.addRelativeFeather(1, 0);
this.addRelativeFeather(2, 0);
this.addRelativeFeather(0, 1);
this.addRelativeFeather(2, 1);
}
_init() {
const loader = PIXI.Loader.shared;
loader.add({
name: 'feather',
// Icon "feather": https://www.flaticon.com/free-icon/feathers_6981026
url: 'https://cdn-icons-png.flaticon.com/512/6981/6981026.png',
});
loader.onComplete.once((loaderProcessed, resources) => {
this._resources = resources;
this._main();
});
loader.load();
}
}
const app = new App();
* {
margin: 0;
padding: 0;
background: #333;
}
<script src="https://pixijs.download/v6.5.8/pixi.js"></script>
<canvas id="canvas"></canvas>
The shader defines the following vec4 for painting with hardcoded 1.0 alpha:
vec4 mist = vec4(noise, noise, noise, 1.0);
Use the whiteness of the noise value as alpha as following to get rid of the black background:
vec4 mist = vec4(noise, noise, noise, noise);
I am reading this statistics book where they have mentioned that the attached top plot has no correlation between adjacent residuals. Whereas, the bottom most has correlation with p-0.9. Can anybody please provide some direction as to how to analyze this? Thank you very much for your time.
Correlated errors mean that the lag 1 correlation is p. That is, Cor(Yi, Yi-1) = p. This can be modelled using Yi = mu + p epsiloni-1 + epsiloni where epsiloni ~ N(0, 1) for all i. We can verify that the correlation between adjacent data points is p: Cov(Yi, Yi-1) = Cov(p epsiloni-1 + epsiloni, p epsiloni-2 + epsiloni-1) = Cov(p epsiloni-1, epsiloni-1) = p Var(epsiloni-1) = p. Code to demonstrate appears below:
set.seed(123)
epsilonX <- rnorm(100, 0, 1)
epsilonY <- rnorm(100, 0, 1)
epsilonZ <- rnorm(100, 0, 1)
X <- NULL
Y <- NULL
Z <- NULL
Y[1] <- epsilonY[1]
X[1] = epsilonX[1]
Z[1] = epsilonZ[1]
rhoX = 0
rhoY = 0.5
rhoZ = 0.9
for (i in 2:100) {
Y[i] <- rhoY * epsilonY[i-1] + epsilonY[i]
X[i] <- rhoX * epsilonX[i-1] + epsilonX[i]
Z[i] <- rhoZ * epsilonZ[i-1] + epsilonZ[i]
}
param = par(no.readonly = TRUE)
par(mfrow=c(3,1))
plot(X, type='o', xlab='', ylab='Residual', main=expression(rho*"=0.0"))
abline(0, 0, lty=2)
plot(Y, type='o', xlab='', ylab='Residual', main=expression(rho*"=0.5"))
abline(0, 0, lty=2)
plot(Z, type='o', xlab='', ylab='Residual', main=expression(rho*"=0.9"))
abline(0, 0, lty=2)
#par(param)
acf(X)
acf(Y)
acf(Z)
Note from the acf plots that the lag 1 correlation is insignificant for p = 0, higher for p = 0.5 data (~0.3), and still higher for p = 0.9 data (~0.5).
What would be a simple/elegant solution to check if a double value is only in the set of
{.0, .1, .. .9, 1.0}
values.
Right now I am doing
setOf(.0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1.0)
and check if a Double value contains.
Is there a more simpler/elegant solution?
You can make it with sequences.
fun contains(d: Double) = d in generateSequence(0.0) { it + 0.1 }.takeWhile { it <= 1.0 }
If you want to make it shorter, add step function like there is one for Int sequences.
infix fun ClosedRange<Double>.step(step: Double): Sequence<Double> =
generateSequence(start) { it + step }.takeWhile { it <= endInclusive }
fun contains(d: Double) = d in 0.0..1.0 step 0.1
Edit
As mentioned in comment, simple in doesn't work because of complex Double calculations. Therefore you can add your own checking function:
val acceptableAccuracy = 1e-15
infix fun Double.nearlyIn(sequence: Sequence<Double>) =
sequence.any { this in (it - acceptableAccuracy..it + acceptableAccuracy) }
Then you need few changes in the code above:
fun contains(d: Double) = d nearlyIn (0.0..1.0 step 0.1)
Since you're only really worried about the tens position, I'd just shift it once and check for 0..10:
fun Double.isSpecial() = (this * 10.0) in (0..10).map(Int::toDouble)
Testing with play.kotlinlang.org:
fun main() {
listOf(0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0).forEach(::checkSpecial)
listOf(0.01, 0.11, 0.22, 1.01).forEach(::checkSpecial)
}
fun checkSpecial(value: Double) {
println("$value isSpecial = ${value.isSpecial()}")
}
Outputs:
0.0 isSpecial = true
0.1 isSpecial = true
0.2 isSpecial = true
0.3 isSpecial = true
0.4 isSpecial = true
0.5 isSpecial = true
0.6 isSpecial = true
0.7 isSpecial = true
0.8 isSpecial = true
0.9 isSpecial = true
1.0 isSpecial = true
0.01 isSpecial = false
0.11 isSpecial = false
0.22 isSpecial = false
1.01 isSpecial = false
If you're less worried about elegance and more about performance, you could just do:
fun Double.isSpecial() = when (this) {
0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0 -> true
else -> false
}
Which avoids allocating any sets or ranges entirely. If the range isn't dynamic, I'd just go with this, personally.
This will do it if you want to check steps of 0.1 for any double.
Multiply by 10, check if the result is an integer.
fun isSpecial(v:Double) : Boolean {
val y = v*10
return y == y.toInt().toDouble()
}
Unless you explicitly only want 0.0-1.0 ?
I am learning GLSL through Unity and I recently came across a problem involving the storing of variables.
Shader "Shader" {
Properties{
_Hole_Position("hole_Position", Vector) = (0., 0., 0., 1.0)
_Hole_EventHorizonDistance("hole_EventHorizonDistance", Float) = 1.0
_DebugValue("debugValue", Float) = 0.0
}
SubShader{
Pass{
GLSLPROGRAM
uniform mat4 _Object2World;
//Variables
varying float debugValue;
varying vec4 pos;
varying vec4 hole_Position;
varying float hole_EventHorizonDistance = 1;
#ifdef VERTEX
void main()
{
pos = _Object2World * gl_Vertex;
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}
#endif
#ifdef FRAGMENT
void main()
{
float dist = distance(vec4(pos.x, 0.0,pos.z, 1.0), vec4(hole_Position.x, 0.0, hole_Position.z, 1.0));
debugValue = dist;
if (dist < hole_EventHorizonDistance)
{
gl_FragColor = vec4(0.3, 0.3, 0.3, 1.0);
}
else
{
gl_FragColor = vec4(0.4, 0.6, 1.0, 1.0);
}
//gl_FragColor = vec4(hole_EventHorizonDistance, 0, 0, 1.0);
}
#endif
ENDGLSL
}
}
}
Now Hole_Position and EventHorizonDistance are changed from an outside C#-script with:
g.GetComponent<Renderer>().sharedMaterial.SetVector("_Hole_Position", new Vector4(transform.position.x, transform.position.y, transform.position.z, 1));
g.GetComponent<Renderer>().sharedMaterial.SetFloat("_Hole_EventHorizonDistance", 2);
this does not work as I intend it too (by changing the fragments color if its position is within 2 units from Hole_Position. However debugging with:
gl_FragColor = vec4(hole_EventHorizonDistance, 0, 0, 1.0);
seemingly suggests that EventHorizon is 0 at all times (the mesh tested on remains completely black), however debugging by getting and printing the variable from an outside (via
print(g.GetComponent<Renderer>().sharedMaterial.GetFloat("_Hole_EventHorizonDistance"));
) tells me EventHorizonDistance = 2. I cannot wrap my head around why this is the case, why is it so?