A VR Ready Post processing framework for Three.js and/or A-Frame
Home Page: https://wizgrav.github.io/aframe-effects
License: MIT License
scene.removeAttribute('effects') doesn't cause the effects to stop. I can work around this through scene.setAttribute('effects', []).
three.js example does not work.
console output:
Uncaught TypeError: AFRAME.registerShader is not a function
at Object.<anonymous> (aframe-effects.js:2463)
at __webpack_require__ (aframe-effects.js:20)
at Object.<anonymous> (aframe-effects.js:237)
at __webpack_require__ (aframe-effects.js:20)
at Component (aframe-effects.js:40)
at aframe-effects.js:43https://github.com/wizgrav/aframe-effects/blob/master/shaders/index.js#L46 does call a registerSahder function that should be defined by AFRAME but that ain't present when using Three.js.
I have some experience with three.js but none with Aframe so I'm having some trouble debugging this...
I am working with aframe and want to try post processing using afame-effects. I tried bloom and godray, both worked fine. But when I tried ssao, it did not work at all. and the result is very weird. Below is the code. And the result looks like showed in the image.
Code:
I searched through google, but found no one using ssao with aframe. Any idea? Thanks!
@wizgrav
Hi I just noticed a shader compile error when using aframe-effects it seems to be due to three.js update I guess, I'm using latest aframe 0.8.2 and three.js version is 101, i'm on chrome and on pc. Just thought I would report it as all the effects are now broken. I think it's very sudden and new as off 06/02/2019. Thank you
Hi - I seem to be able to see effects like the glitch shader, but my scene goes black and I can' see anything underneath the effects themselves on a black screen. Using aframe 0.9.2
http://play.mengxw.cn/miku_jljt.html
win7 have a good effect but in win10 you can look it have double shadow,
My friend and I tried the aframe example on Oculus Go and Oculus Rift.
It turns out that the framerate dropped to 5 FPSish on Oculus Go browser and the scene is all white while entering the VR mode on Oculus Rift with Firefox browser.
We are wondering that is there any configuration to adjust or it has some issues with Oculus devices?
Looking forward to hearing back from you!
Thanks
Tony
Hi @wizgrav !
I wanted to give a cartoonish look to a scene I'm making using A-Frame, and aframe-effects seems like exactly what I wanted, and your demo work very well 👍
I'm using a babel/webpack/react/aframe stack ( the one from https://github.com/ngokevin/aframe-react-boilerplate ). Both your demo and this stack is made on top of aframe 0.5.0 so I hoped it would work flawlessly
aframe-effects is loaded, and the effect displayed by the aframe-inspector. Yet I could not see any effect applied.
here is a minimal version of the code needed to reproduce my issue : https://github.com/temsa/aframe-react-boilerplate/tree/import-aframe-effects.
I'd be glad to debug it, but I'm unsure of the best way to debug it, could you give me some insights at what I should look at ?
Eagerly awaiting an update for this. Sadly no longer working with latest versions of A-Frame.
The sample is pure three.js. It's unclear (at least to me) how to use this with aframe. Please provide a sample for that usecase.
I tried the effects a few days ago and had this error when you anter in VR, the app is not crashing, it shows the environment in a completely unexpected way: it shows two planes that are "windows" to the actual content of the VR environment. I saw the branch was updated 4 days ago so tried again and the same result
This is the console output
THREE.Matrix4: .getInverse() can't invert matrix, determinant is 0 aframe.js:7042:6 Error: WebGL warning: drawElements: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once) aframe.js:21793:4 Source map error: request failed with status 404 Resource URL: https://wizgrav.github.io/aframe-effects/lib/aframe.js Source Map URL: aframe-master.js.map[Learn More] THREE.Matrix4: .getInverse() can't invert matrix, determinant is 0
Link used: https://wizgrav.github.io/aframe-effects/index.html
OS: Windows 10
VR Device: Oculus Rift
Firefox 59.0.2 x64
the links to the code for local dev in the readme dont work unless you go in and add "let" on line 746.
The debug output should only run in some debug mode (you could use the debug package for that).
aframe-effects/systems/effects.js
Lines 260 to 270 in 776d69f
aframe-effects/dist/aframe-effects.js
Lines 496 to 516 in c4f9cdb
I've found that when opening the inspector, the effects layer doesn't seem to be removed from the scene, preventing interaction with entities in the inspector viewport. See the official demo here for an example of this: https://wizgrav.github.io/aframe-effects/index.html
In the demo, unchecking 'Toggle Effects' before opening the inspector allows the inspector viewport to function as expected.
The big problem here is that the inspector has no way of adding some kind of pre-launch hook so code can be run beforehand, so components must take this into account during their component specific render loops so they're aware of the inspected open / close states.
I tried the Bloom effect with Aframe 0.8.1, and 0.8.2. When entered into VR mode, the screen is just white on iPhone10 Safari, and black on Andriod device (LG G5) with Chrome browser.
I also tried the example https://wizgrav.github.io/aframe-effects/index.html
Same issue.
console.log
A-Frame Version: 0.5.0 (Date 23-05-2017, Commit #3aced04) aframe.js:77082:1
three Version: ^0.84.0 aframe.js:77083:1
WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b aframe.js:77084:1
core:schema:warn Default value `null` does not match type `selector` in component `godrays` aframe.js:2109:8
THREE.WebGLRenderer 84 aframe.js:24581:3
#include <packing>
uniform float time ;
uniform float timeDelta ;
uniform vec4 resolution ;
uniform vec4 undefined_0_resolution ;
uniform vec3 undefined_0_color ;
uniform vec2 undefined_0_width ;
uniform vec2 undefined_0_range ;
uniform float undefined_0_strength ;
uniform sampler2D tDiffuse ;
uniform sampler2D tDepth ;
uniform float cameraFar ;
uniform float cameraNear ;
varying vec2 vUv;
mat3 undefined_0_G[2];
const mat3 undefined_0_g0 = mat3( 1.0, 2.0, 1.0, 0.0, 0.0, 0.0, -1.0, -2.0, -1.0 );
const mat3 undefined_0_g1 = mat3( 1.0, 0.0, -1.0, 2.0, 0.0, -2.0, 1.0, 0.0, -1.0 );
void undefined_0_main(inout vec4 color, vec4 origColor, vec2 uv, float depth) {
mat3 I;
float cnv[2];
float d;
undefined_0_G[0] = undefined_0_g0;
undefined_0_G[1] = undefined_0_g1;
for (float i=0.0; i<3.0; i++)
for (float j=0.0; j<3.0; j++) {
d = texture2D(tDepth, uv + resolution.zw * vec2(i-1.0,j-1.0) ).x;
d = perspectiveDepthToViewZ(d, cameraNear, cameraFar);
I[int(i)][int(j)] = viewZToOrthographicDepth(d, cameraNear, cameraFar);
}
for (int i=0; i<2; i++) {
float dp3 = dot(undefined_0_G[i][0], I[0]) + dot(undefined_0_G[i][1], I[1]) + dot(undefined_0_G[i][2], I[2]);
cnv[i] = dp3 * dp3;
}
color = vec4(undefined_0_color, sqrt(cnv[0]*cnv[0]+cnv[1]*cnv[1]));
}
void main () {
vec4 color = vec4(0.0);
vec4 origColor = color;
float depth = texture2D(tDepth, vUv).x;
undefined_0_main(color, origColor, vUv, depth);
gl_FragColor = color;
} Object { uuid: "013290F9-35B0-4454-9C86-74340DDB89EE", name: "", type: "ShaderMaterial", fog: false, lights: false, blending: 0, side: 0, shading: 2, vertexColors: 0, opacity: 1, ещё 38… } aframe-effects.js:506:10
#include <packing>
uniform float time ;
uniform float timeDelta ;
uniform vec4 resolution ;
uniform vec4 undefined_0_resolution ;
uniform vec3 undefined_0_color ;
uniform vec2 undefined_0_width ;
uniform vec2 undefined_0_range ;
uniform float undefined_0_strength ;
uniform sampler2D tDiffuse ;
uniform sampler2D tDepth ;
uniform float cameraFar ;
uniform float cameraNear ;
varying vec2 vUv;
mat3 undefined_0_G[9];
const mat3 undefined_0_g0 = mat3( 0.3535533845424652, 0, -0.3535533845424652, 0.5, 0, -0.5, 0.3535533845424652, 0, -0.3535533845424652 );
const mat3 undefined_0_g1 = mat3( 0.3535533845424652, 0.5, 0.3535533845424652, 0, 0, 0, -0.3535533845424652, -0.5, -0.3535533845424652 );
const mat3 undefined_0_g2 = mat3( 0, 0.3535533845424652, -0.5, -0.3535533845424652, 0, 0.3535533845424652, 0.5, -0.3535533845424652, 0 );
const mat3 undefined_0_g3 = mat3( 0.5, -0.3535533845424652, 0, -0.3535533845424652, 0, 0.3535533845424652, 0, 0.3535533845424652, -0.5 );
const mat3 undefined_0_g4 = mat3( 0, -0.5, 0, 0.5, 0, 0.5, 0, -0.5, 0 );
const mat3 undefined_0_g5 = mat3( -0.5, 0, 0.5, 0, 0, 0, 0.5, 0, -0.5 );
const mat3 undefined_0_g6 = mat3( 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.6666666865348816, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204 );
const mat3 undefined_0_g7 = mat3( -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, 0.6666666865348816, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408 );
const mat3 undefined_0_g8 = mat3( 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408 );
void undefined_0_main(inout vec4 color, vec4 origColor, vec2 uv, float depth) {
undefined_0_G[0] = undefined_0_g0,
undefined_0_G[1] = undefined_0_g1,
undefined_0_G[2] = undefined_0_g2,
undefined_0_G[3] = undefined_0_g3,
undefined_0_G[4] = undefined_0_g4,
undefined_0_G[5] = undefined_0_g5,
undefined_0_G[6] = undefined_0_g6,
undefined_0_G[7] = undefined_0_g7,
undefined_0_G[8] = undefined_0_g8;
mat3 I;
float cnv[9];
float d = texture2D(tDepth, uv).x;
d = perspectiveDepthToViewZ(d, cameraNear, cameraFar);
float att = mix(undefined_0_width.x, undefined_0_width.y, smoothstep(undefined_0_range.x, undefined_0_range.y, -d));
d = viewZToOrthographicDepth(d, cameraNear, cameraFar);
I[1][1] = d;
for (float i=0.0; i<3.0; i++) {
for (float j=0.0; j<3.0; j++) {
if (j == 1.0 && i == 1.0) continue;
d = texture2D(tDepth, uv + att * resolution.zw * vec2(i-1.0,j-1.0) ).x;
d = perspectiveDepthToViewZ(d, cameraNear, cameraFar);
I[int(i)][int(j)] = viewZToOrthographicDepth(d, cameraNear, cameraFar);
}
}
for (int i=0; i<9; i++) {
float dp3 = dot(undefined_0_G[i][0], I[0]) + dot(undefined_0_G[i][1], I[1]) + dot(undefined_0_G[i][2], I[2]);
cnv[i] = dp3 * dp3;
}
float M = (cnv[0] + cnv[1]) + (cnv[2] + cnv[3]);
float S = (cnv[4] + cnv[5]) + (cnv[6] + cnv[7]) + (cnv[8] + M);
float v = smoothstep(0., undefined_0_strength, sqrt(M/S));
color = vec4(undefined_0_color, v);
}
void main () {
vec4 color = vec4(0.0);
vec4 origColor = color;
float depth = texture2D(tDepth, vUv).x;
undefined_0_main(color, origColor, vUv, depth);
gl_FragColor = color;
} Object { uuid: "AAFBBF17-04A3-4331-96CC-78C944610360", name: "", type: "ShaderMaterial", fog: false, lights: false, blending: 0, side: 0, shading: 2, vertexColors: 0, opacity: 1, ещё 38… } aframe-effects.js:506:10
uniform float time ;
uniform float timeDelta ;
uniform vec4 resolution ;
uniform vec4 undefined_0_resolution ;
uniform vec2 undefined_0_direction ;
uniform sampler2D tDiffuse ;
uniform sampler2D tDepth ;
uniform float cameraFar ;
uniform float cameraNear ;
varying vec2 vUv;
void undefined_0_main(inout vec4 color, vec4 origColor, vec2 uv, float depth){
color.a *= 0.44198;
color.a += texture2D(tDiffuse, uv + (undefined_0_direction * undefined_0_resolution.zw )).a * 0.27901;
color.a += texture2D(tDiffuse, uv - (undefined_0_direction * undefined_0_resolution.zw )).a * 0.27901;
}
void main () {
vec4 color = texture2D(tDiffuse, vUv);
vec4 origColor = color;
float depth = 0.0;
undefined_0_main(color, origColor, vUv, depth);
gl_FragColor = color;
} Object { uuid: "D2318F47-2320-4196-A037-44B6957F1D4E", name: "", type: "ShaderMaterial", fog: false, lights: false, blending: 0, side: 0, shading: 2, vertexColors: 0, opacity: 1, ещё 38… } aframe-effects.js:506:10
uniform float time ;
uniform float timeDelta ;
uniform vec4 resolution ;
uniform sampler2D bloom_texture ;
uniform float bloom_filter_luminosityThreshold ;
uniform float bloom_filter_smoothWidth ;
uniform vec3 bloom_filter_defaultColor ;
uniform float bloom_filter_defaultOpacity ;
uniform sampler2D tDiffuse ;
uniform sampler2D tDepth ;
uniform float cameraFar ;
uniform float cameraNear ;
varying vec2 vUv;
#define bloom_0 1.0
void bloom_main(inout vec4 color, vec4 origColor, vec2 uv, float depth){
color.rgb += texture2D(bloom_texture, uv).rgb;
}
void bloom_filter_main(inout vec4 color, vec4 origColor, vec2 uv, float depth) {
vec4 texel = color;
float v = dot( texel.xyz, vec3( 0.299, 0.587, 0.114 ) );
vec4 outputColor = vec4( bloom_filter_defaultColor.rgb, bloom_filter_defaultOpacity );
float alpha = smoothstep( bloom_filter_luminosityThreshold, bloom_filter_luminosityThreshold + bloom_filter_smoothWidth, v );
color = mix( outputColor, texel, alpha );
}
#define script_customFilter_0_0 bloom_texture
#define script_customFilter_0_1 0.3
#define script_customFilter_0_2 0.6
#define script_customFilter_0_3 0.5
void script_customFilter_0_main(inout vec4 c, vec4 o, vec2 uv, float d){
float t = time * mix(1., 1000., abs(sin(time * 10. + uv.x)));
uv = vec2(uv.x + resolution.z * sin(t * c.r + c.b), uv.y - resolution.w * cos(t * c.b + c.r));
c.rgb += smoothstep(0.3, 0.9, texture2D(script_customFilter_0_0,uv).rgb ) * mix( script_customFilter_0_1, script_customFilter_0_2, abs(sin(time * script_customFilter_0_3))) ;
}
void main () {
vec4 color = texture2D(tDiffuse, vUv);
vec4 origColor = color;
float depth = 0.0;
bloom_filter_main(color, origColor, vUv, depth);
script_customFilter_0_main(color, origColor, vUv, depth);
gl_FragColor = vec4(color.rgb, 1.0);
} Object { uuid: "86C57ECE-D80C-4894-AA91-DFC30D66243A", name: "", type: "ShaderMaterial", fog: false, lights: false, blending: 0, side: 0, shading: 2, vertexColors: 0, opacity: 1, ещё 38… } aframe-effects.js:506:10
uniform float time ;
uniform float timeDelta ;
uniform vec4 resolution ;
uniform float undefined_0_step ;
uniform vec3 undefined_0_src ;
uniform sampler2D tDiffuse ;
uniform sampler2D tDepth ;
uniform float cameraFar ;
uniform float cameraNear ;
varying vec2 vUv;
void undefined_0_main(inout vec4 color, vec4 orig, vec2 uv, float depth) {
vec2 center = vec2(mix(uvClamp.x, uvClamp.y, undefined_0_src.x), undefined_0_src.y);
vec2 delta = center - uv;
float dist = length( delta );
vec2 stepv = undefined_0_step * delta / dist;
float iters = dist/undefined_0_step;
vec4 col = vec4(0.0);
if ( 0.0 <= iters && uv.y < 1.0 ) col += textureVR( tDiffuse, uv );
uv += stepv;
if ( 1.0 <= iters && uv.y < 1.0 ) col += textureVR( tDiffuse, uv );
uv += stepv;
if ( 2.0 <= iters && uv.y < 1.0 ) col += textureVR( tDiffuse, uv );
uv += stepv;
if ( 3.0 <= iters && uv.y < 1.0 ) col += textureVR( tDiffuse, uv );
uv += stepv;
if ( 4.0 <= iters && uv.y < 1.0 ) col += textureVR( tDiffuse, uv );
uv += stepv;
if ( 5.0 <= iters && uv.y < 1.0 ) col += textureVR( tDiffuse, uv );
color = col/6.0;
}
void main () {
vec4 color = vec4(0.0);
vec4 origColor = color;
float depth = 0.0;
undefined_0_main(color, origColor, vUv, depth);
gl_FragColor = vec4(color.rgb, 1.0);
} Object { uuid: "410B7BD4-94FB-4043-9218-55E437BEBB8C", name: "", type: "ShaderMaterial", fog: false, lights: false, blending: 0, side: 0, shading: 2, vertexColors: 0, opacity: 1, ещё 38… } aframe-effects.js:506:10
#include <packing>
uniform float time ;
uniform float timeDelta ;
uniform vec4 resolution ;
uniform vec3 undefined_0_tint ;
uniform vec2 undefined_0_threshold ;
uniform sampler2D tDiffuse ;
uniform sampler2D tDepth ;
uniform float cameraFar ;
uniform float cameraNear ;
varying vec2 vUv;
void undefined_0_main(inout vec4 color, vec4 origColor, vec2 uv, float depth) {
float v = viewZToOrthographicDepth(perspectiveDepthToViewZ(depth, cameraNear, cameraFar), cameraNear, cameraFar);
color.rgb = vec3(smoothstep(undefined_0_threshold.x, undefined_0_threshold.y, v)) * undefined_0_tint;
}
void main () {
vec4 color = vec4(0.0);
vec4 origColor = color;
float depth = texture2D(tDepth, vUv).x;
undefined_0_main(color, origColor, vUv, depth);
gl_FragColor = vec4(color.rgb, 1.0);
} Object { uuid: "3D2B0775-F844-42FD-8EEE-6E0B2301329F", name: "", type: "ShaderMaterial", fog: false, lights: false, blending: 0, side: 0, shading: 2, vertexColors: 0, opacity: 1, ещё 38… } aframe-effects.js:506:10
uniform float time ;
uniform float timeDelta ;
uniform vec4 resolution ;
uniform sampler2D undefined_0_tDisp ;
uniform float undefined_0_amount ;
uniform float undefined_0_angle ;
uniform float undefined_0_seed ;
uniform float undefined_0_seed_x ;
uniform float undefined_0_seed_y ;
uniform float undefined_0_distortion_x ;
uniform float undefined_0_distortion_y ;
uniform float undefined_0_col_s ;
uniform sampler2D tDiffuse ;
uniform sampler2D tDepth ;
uniform float cameraFar ;
uniform float cameraNear ;
varying vec2 vUv;
float undefined_0_rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
void undefined_0_main(inout vec4 color, vec4 origColor, vec2 uv, float depth) {
vec2 p = uv;
vec2 p2 = vec2( smoothstep(uvClamp.x, uvClamp.y, p.x),p.y);
float xs = floor(gl_FragCoord.x / 0.5);
float ys = floor(gl_FragCoord.y / 0.5);
vec4 normal = texture2D (undefined_0_tDisp, p2 * undefined_0_seed * undefined_0_seed);
if(p2.y < undefined_0_distortion_x + undefined_0_col_s && p2.y > undefined_0_distortion_x - undefined_0_col_s * undefined_0_seed) {
if(undefined_0_seed_x>0.){
p.y = 1. - (p.y + undefined_0_distortion_y);
}
else {
p.y = undefined_0_distortion_y;
}
}
if(p2.x < undefined_0_distortion_y + undefined_0_col_s && p2.x > undefined_0_distortion_y - undefined_0_col_s * undefined_0_seed) {
if( undefined_0_seed_y > 0.){
p.x = undefined_0_distortion_x;
}
else {
p.x = 1. - (p.x + undefined_0_distortion_x);
}
}
p.x+=normal.x* undefined_0_seed_x * (undefined_0_seed/5.);
p.y+=normal.y* undefined_0_seed_y * (undefined_0_seed/5.);
vec2 offset = undefined_0_amount * vec2( cos(undefined_0_angle), sin(undefined_0_angle));
vec4 cr = textureVR(tDiffuse, p + offset);
vec4 cga = textureVR(tDiffuse, p);
vec4 cb = textureVR(tDiffuse, p - offset);
color = vec4(cr.r, cga.g, cb.b, cga.a);
vec4 snow = 200.*undefined_0_amount*vec4(undefined_0_rand(vec2(xs * undefined_0_seed,ys * undefined_0_seed*50.))*0.2);
color = color+ snow;
}
void main () {
vec4 color = vec4(0.0);
vec4 origColor = color;
float depth = 0.0;
undefined_0_main(color, origColor, vUv, depth);
gl_FragColor = vec4(color.rgb, 1.0);
} Object { uuid: "87449284-A125-4CFC-B59B-A5A9D65027E0", name: "", type: "ShaderMaterial", fog: false, lights: false, blending: 0, side: 0, shading: 2, vertexColors: 0, opacity: 1, ещё 38… } aframe-effects.js:506:10
#include <packing>
#include <common>
uniform float time ;
uniform float timeDelta ;
uniform vec4 resolution ;
uniform vec3 colors_add ;
uniform vec3 colors_mul ;
uniform vec3 colors_pow ;
uniform vec3 colors_left ;
uniform vec3 colors_right ;
uniform vec3 colors_min ;
uniform vec3 colors_max ;
uniform vec3 colors_quant ;
uniform vec3 colors_orig ;
uniform vec3 colors_red ;
uniform vec3 colors_green ;
uniform vec3 colors_blue ;
uniform sampler2D colors_texture ;
uniform vec4 outline_freichen_resolution ;
uniform vec3 outline_freichen_color ;
uniform vec2 outline_freichen_width ;
uniform vec2 outline_freichen_range ;
uniform float outline_freichen_strength ;
uniform sampler2D bloom_texture ;
uniform float film_speed ;
uniform float film_nIntensity ;
uniform float film_sIntensity ;
uniform float film_sCount ;
uniform float godrays_intensity ;
uniform float godrays_attenuation ;
uniform sampler2D godrays_texture ;
uniform sampler2D tDiffuse ;
uniform sampler2D tDepth ;
uniform float cameraFar ;
uniform float cameraNear ;
varying vec2 vUv;
#define colors_LUT_NO_CLAMP 1
vec4 colors_lut(vec4 textureColor) {
#ifndef colors_LUT_NO_CLAMP
textureColor = clamp(textureColor, 0.0, 1.0);
#endif
mediump float blueColor = textureColor.b * 63.0;
mediump vec2 quad1;
quad1.y = floor(floor(blueColor) / 8.0);
quad1.x = floor(blueColor) - (quad1.y * 8.0);
mediump vec2 quad2;
quad2.y = floor(ceil(blueColor) / 8.0);
quad2.x = ceil(blueColor) - (quad2.y * 8.0);
highp vec2 texPos1;
texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
#ifdef colors_LUT_FLIP_Y
texPos1.y = 1.0-texPos1.y;
#endif
highp vec2 texPos2;
texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
#ifdef colors_LUT_FLIP_Y
texPos2.y = 1.0-texPos2.y;
#endif
lowp vec4 newColor1 = texture2D(colors_texture, texPos1);
lowp vec4 newColor2 = texture2D(colors_texture, texPos2);
lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
return newColor;
}
vec3 colors_rgb2hsv(vec3 c){
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
vec3 colors_hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void colors_main(inout vec4 color, vec4 origColor, vec2 uv, float depth){
vec3 orig = color.rgb;
color.rgb = colors_rgb2hsv(color.rgb);
color.rgb = floor(color.rgb / colors_quant) * colors_quant;
color.rgb = pow(color.rgb, colors_pow);
color.rgb = colors_hsv2rgb(color.rgb);
color.rgb = vec3(dot(color.rgb, colors_red), dot(color.rgb, colors_green), dot(color.rgb, colors_blue));
color.rgb = mix(color.rgb, orig.rgb, colors_orig);
color.rgb *= colors_mul;
}
mat3 outline_freichen_G[9];
const mat3 outline_freichen_g0 = mat3( 0.3535533845424652, 0, -0.3535533845424652, 0.5, 0, -0.5, 0.3535533845424652, 0, -0.3535533845424652 );
const mat3 outline_freichen_g1 = mat3( 0.3535533845424652, 0.5, 0.3535533845424652, 0, 0, 0, -0.3535533845424652, -0.5, -0.3535533845424652 );
const mat3 outline_freichen_g2 = mat3( 0, 0.3535533845424652, -0.5, -0.3535533845424652, 0, 0.3535533845424652, 0.5, -0.3535533845424652, 0 );
const mat3 outline_freichen_g3 = mat3( 0.5, -0.3535533845424652, 0, -0.3535533845424652, 0, 0.3535533845424652, 0, 0.3535533845424652, -0.5 );
const mat3 outline_freichen_g4 = mat3( 0, -0.5, 0, 0.5, 0, 0.5, 0, -0.5, 0 );
const mat3 outline_freichen_g5 = mat3( -0.5, 0, 0.5, 0, 0, 0, 0.5, 0, -0.5 );
const mat3 outline_freichen_g6 = mat3( 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.6666666865348816, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204 );
const mat3 outline_freichen_g7 = mat3( -0.3333333432674408, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, 0.6666666865348816, 0.1666666716337204, -0.3333333432674408, 0.1666666716337204, -0.3333333432674408 );
const mat3 outline_freichen_g8 = mat3( 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408, 0.3333333432674408 );
void outline_freichen_main(inout vec4 color, vec4 origColor, vec2 uv, float depth) {
outline_freichen_G[0] = outline_freichen_g0,
outline_freichen_G[1] = outline_freichen_g1,
outline_freichen_G[2] = outline_freichen_g2,
outline_freichen_G[3] = outline_freichen_g3,
outline_freichen_G[4] = outline_freichen_g4,
outline_freichen_G[5] = outline_freichen_g5,
outline_freichen_G[6] = outline_freichen_g6,
outline_freichen_G[7] = outline_freichen_g7,
outline_freichen_G[8] = outline_freichen_g8;
mat3 I;
float cnv[9];
float d = texture2D(tDepth, uv).x;
d = perspectiveDepthToViewZ(d, cameraNear, cameraFar);
float att = mix(outline_freichen_width.x, outline_freichen_width.y, smoothstep(outline_freichen_range.x, outline_freichen_range.y, -d));
d = viewZToOrthographicDepth(d, cameraNear, cameraFar);
I[1][1] = d;
for (float i=0.0; i<3.0; i++) {
for (float j=0.0; j<3.0; j++) {
if (j == 1.0 && i == 1.0) continue;
d = texture2D(tDepth, uv + att * resolution.zw * vec2(i-1.0,j-1.0) ).x;
d = perspectiveDepthToViewZ(d, cameraNear, cameraFar);
I[int(i)][int(j)] = viewZToOrthographicDepth(d, cameraNear, cameraFar);
}
}
for (int i=0; i<9; i++) {
float dp3 = dot(outline_freichen_G[i][0], I[0]) + dot(outline_freichen_G[i][1], I[1]) + dot(outline_freichen_G[i][2], I[2]);
cnv[i] = dp3 * dp3;
}
float M = (cnv[0] + cnv[1]) + (cnv[2] + cnv[3]);
float S = (cnv[4] + cnv[5]) + (cnv[6] + cnv[7]) + (cnv[8] + M);
float v = smoothstep(0., outline_freichen_strength, sqrt(M/S));
color = vec4(outline_freichen_color, v);
}
void script_blendOutline_0_main(inout vec4 c, vec4 o, vec2 uv, float d){
c.rgb = mix(c.rgb, o.rgb, smoothstep(0.1,0.3,o.a));
}
#define bloom_0 1.0
void bloom_main(inout vec4 color, vec4 origColor, vec2 uv, float depth){
color.rgb += texture2D(bloom_texture, uv).rgb;
}
void film_main(inout vec4 color, vec4 origColor, vec2 uv, float depth) {
vec4 cTextureScreen = color;
float dx = rand( uv + mod(time, 3.14) * film_speed );
vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx, 0.0, 1.0 );
vec2 sc = vec2( sin( uv.y * film_sCount ), cos( uv.y * film_sCount ) );
cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * film_sIntensity;
cResult = cTextureScreen.rgb + clamp( film_nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );
color.rgb = cResult; //cResult;
}
float godrays_blendScreen(float base, float blend) {
return 1.0-((1.0-base)*(1.0-blend));
}
vec3 godrays_blendScreen(vec3 base, vec3 blend) {
return vec3(godrays_blendScreen(base.r,blend.r),godrays_blendScreen(base.g,blend.g),godrays_blendScreen(base.b,blend.b));
}
vec3 godrays_blendScreen(vec3 base, vec3 blend, float opacity) {
return (godrays_blendScreen(base, blend) * opacity + base * (1.0 - opacity));
}
void godrays_main(inout vec4 color, vec4 origColor, vec2 uv, float depth) {
vec4 texel = texture2D(godrays_texture, uv);
color.rgb = godrays_blendScreen( color.rgb, texel.rgb, godrays_intensity * godrays_attenuation);
}
void main () {
vec4 color = texture2D(tDiffuse, vUv);
vec4 origColor = color;
float depth = texture2D(tDepth, vUv).x;
colors_main(color, origColor, vUv, depth);
outline_freichen_main(origColor, color, vUv, depth);
script_blendOutline_0_main(color, origColor, vUv, depth);
bloom_main(color, origColor, vUv, depth);
film_main(color, origColor, vUv, depth);
godrays_main(color, origColor, vUv, depth);
gl_FragColor = vec4(color.rgb, 1.0);
} Object { uuid: "49C3F184-643C-4E83-98A8-D791456F58B2", name: "", type: "ShaderMaterial", fog: false, lights: false, blending: 0, side: 0, shading: 2, vertexColors: 0, opacity: 1, ещё 38… } aframe-effects.js:506:10
THREE.WebGLRenderer.setTexture2D: don't use render targets as textures. Use their .texture property instead. aframe.js:27073:7
THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog C:\fakepath(412,1-75): error X3025: out parameters require l-value arguments
Warning: D3D shader compilation failed with default flags. (ps_5_0)
Retrying with skip validation
C:\fakepath(412,1-75): error X3025: out parameters require l-value arguments
Warning: D3D shader compilation failed with skip validation flags. (ps_5_0)
Retrying with skip optimization
C:\fakepath(412,1-75): error X3025: out parameters require l-value arguments
Warning: D3D shader compilation failed with skip optimization flags. (ps_5_0)
Failed to create D3D shaders.
aframe.js:21625:4
Error: WebGL warning: linkProgram: Failed to link, leaving the following log:
C:\fakepath(412,1-75): error X3025: out parameters require l-value arguments
Warning: D3D shader compilation failed with default flags. (ps_5_0)
Retrying with skip validation
C:\fakepath(412,1-75): error X3025: out parameters require l-value arguments
Warning: D3D shader compilation failed with skip validation flags. (ps_5_0)
Retrying with skip optimization
C:\fakepath(412,1-75): error X3025: out parameters require l-value arguments
Warning: D3D shader compilation failed with skip optimization flags. (ps_5_0)
Failed to create D3D shaders.
aframe.js:21609:3
Error: WebGL warning: useProgram: Program has not been successfully linked. aframe.js:26284:5
Error: WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings)
In order to run some tests, I have reduced the Aframe Effects code to the bare system and only the glitch component.
Here is what I have noticed.
I think these diffs might account for the breakage:
mrdoob/three.js@85f911f
Video Link
I'm having some trouble trying to do a toDataURL out of the canvas with the effects.
Inside a tock, I tried doing a renderPass with a material that takes in the system.tDiffuse and then draws it to system.renderTarget and then call toDataURL right after. It seems to work, but only for that one effect. If I chain multiple effects, the tDiffuse seems to only contain the original diffuse without any of the previous effects applied.
Do you have any tips on this?
And thank you so much for this great library btw.
core:schema:warn Default value 'null' does not match type 'selector' in component 'godrays'
Get this warning on scene load, even when I seemingly am not using the godray attribute, which I'm assuming you don't have to use?
(Aframe version 0.5.0)
When using this components, seems that resolution of rendering divides by two.
Before effects:
After effects:
And how can I get rid of that dirty black noise where walls connects to ceiling?
hey, thanks for the awesome library. one question -- is there a way to update the uniforms of my custom effects realtime without recompiling the shader?
<script type="script-effect" id="customBlend" data-diffuse data-defaults="0.1">
void $main(inout vec4 c, vec4 o, vec2 uv, float d){
c.rgb = o.rgb;
c.r = pow(c.r,$0);
}
</script>
for example, in this code, I want to change the value of $0 from another component in the scene. I can do so by setting this.el.sceneEl.setAttribute('effects', [newEffectString])
but this causes the shader to recompile.
Hello,
i've tried your example with Vive and Vive Pro and everytime I try to toggle the effects the monitor goes white and the vr black. I also tried importing your library in Glitch with A-Frame 0.8.2 to apply the effects to a simple scene but I run into the same problem.
For clarity: the effects work in the browser, but once I toggle VR everything goes white.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.