v4games
/
v4k-git-backup
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ugly but works html5 cook

main
Dominik Madarász 2023-09-08 15:06:07 +02:00
parent 64ee470bc4
commit 0440bfd3cc
51 changed files with 2328 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/html5/MAKE.bat
View File

@ -49,7 +49,7 @@ if not exist "emsdk" (
if "%EMSDK%"=="" call emsdk\emsdk_env.bat --system if "%EMSDK%"=="" call emsdk\emsdk_env.bat --system
rem cook art rem cook art
..\..\tools\cook.exe --cook-jobs=1 --cook-ini=..\..\tools\cook.ini ..\..\tools\cook.exe --cook-jobs=1 --cook-ini=..\..\tools\cook_web.ini
rem host webserver, compile and launch rem host webserver, compile and launch
rem start python -m http.server --bind 127.0.0.1 8000 rem start python -m http.server --bind 127.0.0.1 8000

95
demos/html5/art/fonts/Carlito-BoldItalic.license 100644
View File

@ -0,0 +1,95 @@
Copyright (c) 2010-2013 by tyPoland Lukasz Dziedzic with Reserved Font Name "Carlito".
This Font Software is licensed under the SIL Open Font License,
Version 1.1 as shown below.
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
PREAMBLE The goals of the Open Font License (OFL) are to stimulate
worldwide development of collaborative font projects, to support the font
creation efforts of academic and linguistic communities, and to provide
a free and open framework in which fonts may be shared and improved in
partnership with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves.
The fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply to
any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such.
This may include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components
as distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting ? in part or in whole ?
any of the components of the Original Version, by changing formats or
by porting the Font Software to a new environment.
"Author" refers to any designer, engineer, programmer, technical writer
or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining a
copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,in
Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the
corresponding Copyright Holder. This restriction only applies to the
primary font name as presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole, must
be distributed entirely under this license, and must not be distributed
under any other license. The requirement for fonts to remain under
this license does not apply to any document created using the Font
Software.
TERMINATION
This license becomes null and void if any of the above conditions are not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
DEALINGS IN THE FONT SOFTWARE.

BIN
demos/html5/art/fonts/Carlito-BoldItalic.ttf 100644
View File

Binary file not shown.

95
demos/html5/art/fonts/Carlito-Regular.license 100644
View File

@ -0,0 +1,95 @@
Copyright (c) 2010-2013 by tyPoland Lukasz Dziedzic with Reserved Font Name "Carlito".
This Font Software is licensed under the SIL Open Font License,
Version 1.1 as shown below.
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
PREAMBLE The goals of the Open Font License (OFL) are to stimulate
worldwide development of collaborative font projects, to support the font
creation efforts of academic and linguistic communities, and to provide
a free and open framework in which fonts may be shared and improved in
partnership with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves.
The fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply to
any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such.
This may include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components
as distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting ? in part or in whole ?
any of the components of the Original Version, by changing formats or
by porting the Font Software to a new environment.
"Author" refers to any designer, engineer, programmer, technical writer
or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining a
copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,in
Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the
corresponding Copyright Holder. This restriction only applies to the
primary font name as presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole, must
be distributed entirely under this license, and must not be distributed
under any other license. The requirement for fonts to remain under
this license does not apply to any document created using the Font
Software.
TERMINATION
This license becomes null and void if any of the above conditions are not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
DEALINGS IN THE FONT SOFTWARE.

BIN
demos/html5/art/fonts/Carlito-Regular.ttf 100644
View File

Binary file not shown.

93
demos/html5/art/fonts/Inconsolata-Regular.license 100644
View File

@ -0,0 +1,93 @@
Copyright 2006 The Inconsolata Project Authors
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
demos/html5/art/fonts/Inconsolata-Regular.ttf 100644
View File

Binary file not shown.

2
demos/html5/art/fonts/MaterialIconsSharp-Regular.license 100644
View File

@ -0,0 +1,2 @@
License
We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's

BIN
demos/html5/art/fonts/MaterialIconsSharp-Regular.otf 100644
View File

Binary file not shown.

12
demos/html5/art/fx/fxAberration.fs 100644
View File

@ -0,0 +1,12 @@
uniform float intensity = 0.003f;
uniform float angle = 0.0f;
void main() {
vec2 uv = TEXCOORD.st;
vec2 offset = intensity * vec2( cos(angle), sin(angle) );
vec4 color = texture( iChannel0, uv);
color.r = texture( iChannel0, uv + offset ).x;
color.b = texture( iChannel0, uv - offset ).z;
FRAGCOLOR = color;
}

7
demos/html5/art/fx/fxBloom.fs 100644
View File

@ -0,0 +1,7 @@
uniform float intensity = 2.0;
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 src = texture(iChannel0, uv);
fragColor = vec4( clamp(src * intensity, 0.0, 1.0).rgb, src.a );
}

16
demos/html5/art/fx/fxBlur.fs 100644
View File

@ -0,0 +1,16 @@
// [ref] https://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/
uniform float intensity = 4;
uniform vec2 direction = vec2(1.0, 0.0);
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 base = texture(iChannel0, uv), color = vec4(0.0);
vec2 offset = (direction * vec2(intensity)) / iResolution;
color += base * 0.30;
color += texture(iChannel0, uv + offset) * 0.35;
color += texture(iChannel0, uv - offset) * 0.35;
fragColor = vec4( color.rgb, base.a );
}

169
demos/html5/art/fx/fxCRT.fs 100644
View File

@ -0,0 +1,169 @@
//
// PUBLIC DOMAIN CRT STYLED SCAN-LINE SHADER
//
// by Timothy Lottes
//
// This is more along the style of a really good CGA arcade monitor.
// With RGB inputs instead of NTSC.
// The shadow mask example has the mask rotated 90 degrees for less chromatic aberration.
//
// Left it unoptimized to show the theory behind the algorithm.
//
// It is an example what I personally would want as a display option for pixel art games.
// Please take and use, change, or whatever.
//
out vec4 color;
// Emulated input resolution.
#if 0
// Fix resolution to set amount.
vec2 res=vec2(320.0/1.0,160.0/1.0);
#else
// Optimize for resize.
vec2 res=iResolution.xy/6.0;
#endif
// Hardness of scanline.
// -8.0 = soft
// -16.0 = medium
uniform float hardScan=-8.0;
// Hardness of pixels in scanline.
// -2.0 = soft
// -4.0 = hard
uniform float hardPix=-3.0;
// Display warp.
// 0.0 = none
// 1.0/8.0 = extreme
vec2 warp=vec2(1.0/32.0,1.0/24.0);
// Amount of shadow mask.
float maskDark=0.5;
float maskLight=1.5;
//------------------------------------------------------------------------
// sRGB to Linear.
// Assuing using sRGB typed textures this should not be needed.
float ToLinear1(float c){return(c<=0.04045)?c/12.92:pow((c+0.055)/1.055,2.4);}
vec3 ToLinear(vec3 c){return vec3(ToLinear1(c.r),ToLinear1(c.g),ToLinear1(c.b));}
// Linear to sRGB.
// Assuing using sRGB typed textures this should not be needed.
float ToSrgb1(float c){return(c<0.0031308?c*12.92:1.055*pow(c,0.41666)-0.055);}
vec3 ToSrgb(vec3 c){return vec3(ToSrgb1(c.r),ToSrgb1(c.g),ToSrgb1(c.b));}
// Nearest emulated sample given floating point position and texel offset.
// Also zero's off screen.
vec3 Fetch(vec2 pos,vec2 off){
pos=floor(pos*res+off)/res;
if(max(abs(pos.x-0.5),abs(pos.y-0.5))>0.5)return vec3(0.0,0.0,0.0);
return ToLinear(texture2D(iChannel0,pos.xy,-16.0).rgb);}
// Distance in emulated pixels to nearest texel.
vec2 Dist(vec2 pos){pos=pos*res;return -((pos-floor(pos))-vec2(0.5));}
// 1D Gaussian.
float Gaus(float pos,float scale){return exp2(scale*pos*pos);}
// 3-tap Gaussian filter along horz line.
vec3 Horz3(vec2 pos,float off){
vec3 b=Fetch(pos,vec2(-1.0,off));
vec3 c=Fetch(pos,vec2( 0.0,off));
vec3 d=Fetch(pos,vec2( 1.0,off));
float dst=Dist(pos).x;
// Convert distance to weight.
float scale=hardPix;
float wb=Gaus(dst-1.0,scale);
float wc=Gaus(dst+0.0,scale);
float wd=Gaus(dst+1.0,scale);
// Return filtered sample.
return (b*wb+c*wc+d*wd)/(wb+wc+wd);}
// 5-tap Gaussian filter along horz line.
vec3 Horz5(vec2 pos,float off){
vec3 a=Fetch(pos,vec2(-2.0,off));
vec3 b=Fetch(pos,vec2(-1.0,off));
vec3 c=Fetch(pos,vec2( 0.0,off));
vec3 d=Fetch(pos,vec2( 1.0,off));
vec3 e=Fetch(pos,vec2( 2.0,off));
float dst=Dist(pos).x;
// Convert distance to weight.
float scale=hardPix;
float wa=Gaus(dst-2.0,scale);
float wb=Gaus(dst-1.0,scale);
float wc=Gaus(dst+0.0,scale);
float wd=Gaus(dst+1.0,scale);
float we=Gaus(dst+2.0,scale);
// Return filtered sample.
return (a*wa+b*wb+c*wc+d*wd+e*we)/(wa+wb+wc+wd+we);}
// Return scanline weight.
float Scan(vec2 pos,float off){
float dst=Dist(pos).y;
return Gaus(dst+off,hardScan);}
// Allow nearest three lines to effect pixel.
vec3 Tri(vec2 pos){
vec3 a=Horz3(pos,-1.0);
vec3 b=Horz5(pos, 0.0);
vec3 c=Horz3(pos, 1.0);
float wa=Scan(pos,-1.0);
float wb=Scan(pos, 0.0);
float wc=Scan(pos, 1.0);
return a*wa+b*wb+c*wc;}
// Distortion of scanlines, and end of screen alpha.
vec2 Warp(vec2 pos){
pos=pos*2.0-1.0;
pos*=vec2(1.0+(pos.y*pos.y)*warp.x,1.0+(pos.x*pos.x)*warp.y);
return pos*0.5+0.5;}
// Shadow mask.
vec3 Mask(vec2 pos){
pos.x+=pos.y*3.0;
vec3 mask=vec3(maskDark,maskDark,maskDark);
pos.x=fract(pos.x/6.0);
if(pos.x<0.333)mask.r=maskLight;
else if(pos.x<0.666)mask.g=maskLight;
else mask.b=maskLight;
return mask;}
// Draw dividing bars.
float Bar(float pos,float bar){pos-=bar;return pos*pos<4.0?0.0:1.0;}
// Entry.
void main() {
#if 0
// Unmodified.
if(gl_FragCoord.x<iResolution.x*0.333){
color.rgb=Fetch(gl_FragCoord.xy/iResolution.xy+vec2(0.333,0.0),vec2(0.0,0.0));}
else{
vec2 pos=Warp(gl_FragCoord.xy/iResolution.xy+vec2(-0.333,0.0));
if(gl_FragCoord.x<iResolution.x*0.666){
hardScan=-12.0;
maskDark=maskLight=1.0;
pos=Warp(gl_FragCoord.xy/iResolution.xy);}
color.rgb=Tri(pos)*Mask(gl_FragCoord.xy);}
color.a=1.0;
color.rgb*=
Bar(gl_FragCoord.x,iResolution.x*0.333)*
Bar(gl_FragCoord.x,iResolution.x*0.666);
color.rgb=ToSrgb(color.rgb);
#else
// full
vec2 pos=Warp(gl_FragCoord.xy/iResolution.xy);
// classic
// hardScan=-12.0;
// maskDark=maskLight=1.0;
// vec2 pos=Warp(gl_FragCoord.xy/iResolution.xy);
color.rgb=Tri(pos)*Mask(gl_FragCoord.xy);
color.a=texture2D(iChannel0,gl_FragCoord.xy/iResolution.xy).a;
color.rgb=ToSrgb(color.rgb);
#endif
}

103
demos/html5/art/fx/fxCRT2.fs 100644
View File

@ -0,0 +1,103 @@
// [src] https://github.com/Hammster/windows-terminal-shaders (CC0)
// Settings
#define GRAIN_INTENSITY 0.02
#define TINT_COLOR vec4(1, 0.7f, 0, 0)
#define ENABLE_SCANLINES 1
#define ENABLE_REFRESHLINE 1
#define ENABLE_NOISE 1
#define ENABLE_CURVE 1
#define ENABLE_TINT 0
#define ENABLE_GRAIN 0
#define DEBUG 0
// Grain Lookup Table
#define a0 0.151015505647689
#define a1 -0.5303572634357367
#define a2 1.365020122861334
#define b0 0.132089632343748
#define b1 -0.7607324991323768
const vec4 tint = TINT_COLOR;
const vec4 scanlineTint = vec4(0.6f, 0.6f, 0.6f, 0.0f);
float permute(float x) {
x *= (34 * x + 1);
return 289 * fract(x * 1 / 289.0f);
}
float rand(float state) {
return fract(permute(state) / 41.0f);
}
float fmod(float x, float y) {
return x - y * trunc(x/y);
}
vec4 CRT( vec2 uv ) {
vec2 xy = uv;
#if ENABLE_CURVE
// TODO: add control variable for transform intensity
xy -= 0.5f; // offcenter screen
float r = xy.x * xy.x + xy.y * xy.y; // get ratio
xy *= 4.2f + r; // apply ratio
xy *= 0.25f; // zoom
xy += 0.5f; // move back to center
// TODO: add monitor visuals and make colors static consts
// Outter Box
if(xy.x < -0.025f || xy.y < -0.025f) return vec4(0, 0, 0, 0);
if(xy.x > 1.025f || xy.y > 1.025f) return vec4(0, 0, 0, 0);
// Bazel
if(xy.x < -0.015f || xy.y < -0.015f) return vec4(0.03f, 0.03f, 0.03f, 0.0f);
if(xy.x > 1.015f || xy.y > 1.015f) return vec4(0.03f, 0.03f, 0.03f, 0.0f);
// Screen Border
if(xy.x < 0.001f || xy.y < 0.001f) return vec4(0.0f, 0.0f, 0.0f, 0.0f);
if(xy.x > 0.999f || xy.y > 0.999f) return vec4(0.0f, 0.0f, 0.0f, 0.0f);
#endif
vec4 color = texture(iChannel0, xy);
#if DEBUG
if(xy.x < 0.5f) return color;
#endif
#if ENABLE_REFRESHLINE
float timeOver = fmod(iTime / 5, 1);
float refreshLineColorTint = timeOver - xy.y;
if(xy.y > timeOver && xy.y - 0.03f < timeOver ) color.rgb += (refreshLineColorTint * 2.0f);
#endif
#if ENABLE_SCANLINES
// scanlines are always every 1px
if(fmod(floor(uv.y * iResolution.y), 2) != 0) color *= scanlineTint;
#endif
#if ENABLE_TINT
float grayscale = (color.r + color.g + color.b) / 3.f;
color = vec4(grayscale, grayscale, grayscale, 0);
color *= tint;
#endif
#if ENABLE_GRAIN
vec3 m = vec3(tex, fmod(iTime, 5) / 5) + 1.;
float state = permute(permute(m.x) + m.y) + m.z;
float p = 0.95 * rand(state) + 0.025;
float q = p - 0.5;
float r2 = q * q;
float grain = q * (a2 + (a1 * r2 + a0) / (r2 * r2 + b1 * r2 + b0));
color.rgb += GRAIN_INTENSITY * grain;
#endif
return color;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 src = texture(iChannel0, uv);
fragColor = vec4(CRT(uv).rgb, src.a);
}

29
demos/html5/art/fx/fxColorblind.fs 100644
View File

@ -0,0 +1,29 @@
// [ref] https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html
uniform int colorblind_mode = 2; // [0..4]
uniform mat3 colorblind_matrices[5] = mat3[5](
mat3(1.000,0.000,0.000, 0.000,1.000,0.000, 0.000,0.000,1.000), // 0 no colorblind
mat3(0.299,0.587,0.114, 0.299,0.587,0.114, 0.299,0.587,0.114), // 1 achromatopsia (luma)
mat3( // protanomaly (no red cone)
0.152286, 1.052583,-0.204868,
0.114503, 0.786281, 0.099216,
-0.003882,-0.048116, 1.051998
),
mat3( // deuteranomaly (no green cone)
0.367322, 0.860646, -0.227968,
0.280085, 0.672501, 0.047413,
-0.011820, 0.042940, 0.968881
),
mat3( // tritanomaly (no blue cone)
1.255528,-0.076749,-0.178779,
-0.078411, 0.930809, 0.147602,
0.004733, 0.691367, 0.303900
)
);
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 src = texture(iChannel0, uv);
fragColor = vec4( src.rgb * colorblind_matrices[colorblind_mode], src.a );
}

15
demos/html5/art/fx/fxContrast.fs 100644
View File

@ -0,0 +1,15 @@
uniform float contrast = 1.5; // > 1 to saturate, < 1 to bleach-to-gray
uniform float brightness = 0;
void main() {
vec4 pixelColor = texture(iChannel0, TEXCOORD.st);
pixelColor.rgb /= pixelColor.a;
pixelColor.rgb = ((pixelColor.rgb - 0.5f) * max(contrast, 0)) + 0.5f;
pixelColor.rgb += brightness;
pixelColor.rgb *= pixelColor.a;
FRAGCOLOR = pixelColor;
}

16
demos/html5/art/fx/fxDissolve.fs 100644
View File

@ -0,0 +1,16 @@
uniform float intensity = 0.004;
highp float rand(vec2 co) {
highp float a = 12.9898;
highp float b = 78.233;
highp float c = 43758.5453;
highp float dt= dot(co.xy ,vec2(a,b));
highp float sn= mod(dt,3.14);
return fract(sin(sn) * c);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 fetch = texture(iChannel0, uv + intensity * rand(uv));
fragColor = fetch;
}

47
demos/html5/art/fx/fxDithering.fs 100644
View File

@ -0,0 +1,47 @@
// https://en.wikipedia.org/wiki/Ordered_dithering
#define BAYER 4
#if BAYER == 2
const float threshold[4] = float[4](
1/4.,2/4.,
3/4.,1/4.
);
#elif BAYER == 4
const float threshold[16] = float[16](
1/16., 9/16., 3/16., 11/16.,
13/16., 5/16., 15/16., 7/16.,
4/16., 12/16., 2/16., 10/16.,
16/16., 8/16., 14/16., 6/16.
);
#else // 8
const float threshold[64] = float[64](
1/64.,33/64., 9/64.,41/64., 3/64.,35/64.,11/64.,43/64.,
49/64.,17/64.,57/64.,25/64.,51/64.,19/64.,59/64.,27/64.,
13/64.,45/64., 5/64.,37/64.,15/64.,47/64., 7/64.,39/64.,
61/64.,29/64.,53/64.,21/64.,63/64.,31/64.,55/64.,23/64.,
4/64.,36/64.,12/64.,42/64., 2/64.,34/64.,10/64.,42/64.,
52/64.,20/64.,60/64.,28/64.,50/64.,18/64.,58/64.,26/64.,
16/64.,48/64., 8/64.,40/64.,14/64.,46/64., 6/64.,38/64.,
64/64.,32/64.,56/64.,24/64.,62/64.,30/64.,54/64.,22/64.
);
#endif
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord/iResolution.xy;
vec4 src = texture(iChannel0, uv);
int x = int(fragCoord.x) % BAYER;
int y = int(fragCoord.y) % BAYER;
float luma = dot(vec3(0.2126, 0.7152, 0.0722), src.rgb);
luma = step(threshold[BAYER*x+y], luma); // find closest
fragColor = vec4(vec3(luma), src.a);
}

19
demos/html5/art/fx/fxEditorOutline.fs 100644
View File

@ -0,0 +1,19 @@
uniform int thickness = 2;
uniform vec4 border_color = vec4(1,1,0,1);
void main() {
vec4 texel = texture(iChannel0, uv);
float outline = 0.0;
if( texel.a == 0.0 ) {
for( int x = -thickness; x <= thickness; x++ ) {
for( int y = -thickness;y <= thickness; y++ ) {
float sample = texture(iChannel0, uv+vec2(float(x)/iWidth, float(y)/iHeight)).a;
if( sample > 0.0 ) {
outline = 1.0;
}
}
}
}
FRAGCOLOR = vec4(border_color.rgb, outline * border_color.a); // mix(texel, border_color, outline * border_color.a);
}

67
demos/html5/art/fx/fxFXAA.fs 100644
View File

@ -0,0 +1,67 @@
// FXAA fragment shader by Timothy Lottes (public domain)
// http://timothylottes.blogspot.com/
uniform sampler2D tex;
float FXAA_SUBPIX_SHIFT = 1.0/4.0;
// posPos: Output of FxaaVertexShader interpolated across screen.
// tex: Input texture.
// rcpFrame: const vec2(1.0/frameWidth, 1.0/frameHeight).
vec3 FxaaPixelShader(vec4 posPos, sampler2D tex, vec2 rcpFrame) {
#define FXAA_REDUCE_MIN (1.0/128.0)
#define FXAA_REDUCE_MUL (1.0/8.0)
#define FXAA_SPAN_MAX 8.0
vec3 rgbNW = texture2DLod(tex, posPos.zw, 0.0).xyz;
vec3 rgbNE = texture2DLod(tex, posPos.zw + vec2(1.0,0.0)*rcpFrame.xy, 0.0).xyz;
vec3 rgbSW = texture2DLod(tex, posPos.zw + vec2(0.0,1.0)*rcpFrame.xy, 0.0).xyz;
vec3 rgbSE = texture2DLod(tex, posPos.zw + vec2(1.0,1.0)*rcpFrame.xy, 0.0).xyz;
vec3 rgbM = texture2DLod(tex, posPos.xy,0.0).xyz;
vec3 luma = vec3(0.299, 0.587, 0.114);
float lumaNW = dot(rgbNW, luma);
float lumaNE = dot(rgbNE, luma);
float lumaSW = dot(rgbSW, luma);
float lumaSE = dot(rgbSE, luma);
float lumaM = dot(rgbM, luma);
float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
vec2 dir;
dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));
float dirReduce = max(
(lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL),
FXAA_REDUCE_MIN);
float rcpDirMin = 1.0/(min(abs(dir.x), abs(dir.y)) + dirReduce);
dir = min(vec2( FXAA_SPAN_MAX, FXAA_SPAN_MAX),
max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
dir * rcpDirMin)) * rcpFrame.xy;
vec3 rgbA = (1.0/2.0) * (
texture2DLod(tex, posPos.xy + dir * (1.0/3.0 - 0.5),0.0).xyz +
texture2DLod(tex, posPos.xy + dir * (2.0/3.0 - 0.5),0.0).xyz);
vec3 rgbB = rgbA * (1.0/2.0) + (1.0/4.0) * (
texture2DLod(tex, posPos.xy + dir * (0.0/3.0 - 0.5),0.0).xyz +
texture2DLod(tex, posPos.xy + dir * (3.0/3.0 - 0.5),0.0).xyz);
float lumaB = dot(rgbB, luma);
if((lumaB < lumaMin) || (lumaB > lumaMax)) return rgbA;
return rgbB;
}
vec4 FXAA(sampler2D tex, vec2 uv) {
vec2 rcpFrame = vec2(1.0/iWidth, 1.0/iHeight);
vec4 posPos = vec4(texcoord.st,texcoord.st -(rcpFrame * (0.5 + FXAA_SUBPIX_SHIFT)));
vec4 c = vec4(0.0);
c.rgb = FxaaPixelShader(posPos, tex, rcpFrame);
// c.rgb = texture2D(tex, posPos.xy).rgb - c.rgb; // debug
c.a = texture2D(tex, posPos.xy).a;
return c;
}
void main() {
FRAGCOLOR = FXAA(iChannel0, texcoord.st);
}

610
demos/html5/art/fx/fxFXAA3.fs 100644
View File

@ -0,0 +1,610 @@
/*****************************************
* FXAA 3.11 Implementation - effendiian
* -------------------------------------
* FXAA implementation based off of the
* work by Timothy Lottes in the Nvidia white paper:
* https://developer.download.nvidia.com/assets/gamedev/files/sdk/11/FXAA_WhitePaper.pdf
*
* Also used these resources:
* - https://catlikecoding.com/unity/tutorials/advanced-rendering/fxaa/
* - https://blog.codinghorror.com/fast-approximate-anti-aliasing-fxaa/
*****************************************/
// Turn off FXAA.
// #define FXAA 0
// Turn on FXAA.
#define FXAA 1
// Turn on split screen between no-FXAA and FXAA.
// #define FXAA 2
/*
/ FXAA setting, defined via preprocessor variables
*/
#ifndef FXAA_PRESET
#define FXAA_PRESET 5
#define FXAA_DEBUG_SKIPPED 0
#define FXAA_DEBUG_PASSTHROUGH 0
#define FXAA_DEBUG_HORZVERT 0
#define FXAA_DEBUG_PAIR 0
#define FXAA_DEBUG_NEGPOS 0
#define FXAA_DEBUG_OFFSET 0
#define FXAA_DEBUG_HIGHLIGHT 0
#define FXAA_LUMINANCE 1
#endif
/*--------------------------------------------------------------------------*/
#if (FXAA_PRESET == 0)
#define FXAA_EDGE_THRESHOLD (1.0/4.0)
#define FXAA_EDGE_THRESHOLD_MIN (1.0/12.0)
#define FXAA_SEARCH_STEPS 2
#define FXAA_SEARCH_ACCELERATION 4
#define FXAA_SEARCH_THRESHOLD (1.0/4.0)
#define FXAA_SUBPIX 1
#define FXAA_SUBPIX_FASTER 1
#define FXAA_SUBPIX_CAP (2.0/3.0)
#define FXAA_SUBPIX_TRIM (1.0/4.0)
#endif
/*--------------------------------------------------------------------------*/
#if (FXAA_PRESET == 1)
#define FXAA_EDGE_THRESHOLD (1.0/8.0)
#define FXAA_EDGE_THRESHOLD_MIN (1.0/16.0)
#define FXAA_SEARCH_STEPS 4
#define FXAA_SEARCH_ACCELERATION 3
#define FXAA_SEARCH_THRESHOLD (1.0/4.0)
#define FXAA_SUBPIX 1
#define FXAA_SUBPIX_FASTER 0
#define FXAA_SUBPIX_CAP (3.0/4.0)
#define FXAA_SUBPIX_TRIM (1.0/4.0)
#endif
/*--------------------------------------------------------------------------*/
#if (FXAA_PRESET == 2)
#define FXAA_EDGE_THRESHOLD (1.0/8.0)
#define FXAA_EDGE_THRESHOLD_MIN (1.0/24.0)
#define FXAA_SEARCH_STEPS 8
#define FXAA_SEARCH_ACCELERATION 2
#define FXAA_SEARCH_THRESHOLD (1.0/4.0)
#define FXAA_SUBPIX 1
#define FXAA_SUBPIX_FASTER 0
#define FXAA_SUBPIX_CAP (3.0/4.0)
#define FXAA_SUBPIX_TRIM (1.0/4.0)
#endif
/*--------------------------------------------------------------------------*/
#if (FXAA_PRESET == 3)
#define FXAA_EDGE_THRESHOLD (1.0/8.0)
#define FXAA_EDGE_THRESHOLD_MIN (1.0/24.0)
#define FXAA_SEARCH_STEPS 16
#define FXAA_SEARCH_ACCELERATION 1
#define FXAA_SEARCH_THRESHOLD (1.0/4.0)
#define FXAA_SUBPIX 1
#define FXAA_SUBPIX_FASTER 0
#define FXAA_SUBPIX_CAP (3.0/4.0)
#define FXAA_SUBPIX_TRIM (1.0/4.0)
#endif
/*--------------------------------------------------------------------------*/
#if (FXAA_PRESET == 4)
#define FXAA_EDGE_THRESHOLD (1.0/8.0)
#define FXAA_EDGE_THRESHOLD_MIN (1.0/24.0)
#define FXAA_SEARCH_STEPS 24
#define FXAA_SEARCH_ACCELERATION 1
#define FXAA_SEARCH_THRESHOLD (1.0/4.0)
#define FXAA_SUBPIX 1
#define FXAA_SUBPIX_FASTER 0
#define FXAA_SUBPIX_CAP (3.0/4.0)
#define FXAA_SUBPIX_TRIM (1.0/4.0)
#endif
/*--------------------------------------------------------------------------*/
#if (FXAA_PRESET == 5)
#define FXAA_EDGE_THRESHOLD (1.0/8.0)
#define FXAA_EDGE_THRESHOLD_MIN (1.0/24.0)
#define FXAA_SEARCH_STEPS 32
#define FXAA_SEARCH_ACCELERATION 1
#define FXAA_SEARCH_THRESHOLD (1.0/4.0)
#define FXAA_SUBPIX 1
#define FXAA_SUBPIX_FASTER 0
#define FXAA_SUBPIX_CAP (3.0/4.0)
#define FXAA_SUBPIX_TRIM (1.0/4.0)
#endif
/*--------------------------------------------------------------------------*/
#define FXAA_SUBPIX_TRIM_SCALE (1.0/(1.0 - FXAA_SUBPIX_TRIM))
// --------------------------------------
// Helper functions.
// --------------------------------------
// ---------------------
// Conversion functions.
// ToVec2
vec2 ToVec2( float value ) { return vec2(value, value); }
// ToVec3
vec3 ToVec3( float value ) { return vec3(value, value, value); }
vec3 ToVec3( vec2 vector, float z ) { return vec3(vector.x, vector.y, z); }
vec3 ToVec3( vec2 vector ) { return ToVec3(vector, 0.0); }
// ToVec4
vec4 ToVec4( vec2 vector, float z, float w ) { return vec4(vector.x, vector.y, z, w); }
vec4 ToVec4( vec2 vector, float z ) { return ToVec4(vector, z, 0.0); }
vec4 ToVec4( vec2 vector ) { return ToVec4(vector, 0.0); }
vec4 ToVec4( vec3 vector, float w ) { return vec4(vector.x, vector.y, vector.z, w); }
vec4 ToVec4( vec3 vector ) { return ToVec4(vector, 0.0); }
vec4 ToVec4( float value, float w ) { return vec4(value, value, value, w); }
vec4 ToVec4( float value ) { return ToVec4(value, 0.0); }
// ---------------------
// Texture sampler functions.
// Return sampled image from a point + offset texel space.
vec4 TextureOffset( sampler2D tex,
vec2 uv,
vec2 offset ) {
// Return color from the specified location.
return texture(tex, uv + offset);
}
// ---------------------
// Grayscale functions.
// Return grayscaled image based off of the selected color channel.
vec3 Grayscale( vec3 color, int index ) {
int selectedChannel = clamp(index, 0, 2); // [0]r, [1]g, [2]b.
return ToVec3(color[selectedChannel]);
}
// Return grayscaled image based off of the selected color channel.
vec4 Grayscale( vec4 color, int index ) {
int selectedChannel = clamp(index, 0, 3); // [0]r, [1]g, [2]b, [3]a.
return ToVec4(color[selectedChannel]);
}
// Default to green color channel when no index is supplied.
vec3 Grayscale( vec3 color ) { return Grayscale(color, 1); }
vec4 Grayscale( vec4 color ) { return Grayscale(color, 1); }
// ---------------------
// Luminance functions.
// Map RGB to Luminance linearly.
float LinearRGBLuminance( vec3 color ) {
// Weights for relative luma from here: https://en.wikipedia.org/wiki/Luma_(video)
vec3 weight = vec3(0.2126729, 0.7151522, 0.0721750);
// Get the dot product:
// - color.r * weight.r + color.g * weight.g + color.b * weight*b.
return dot(color, weight);
}
// Luminance based off of the original specification.
float FXAALuminance( vec3 color ) {
#if FXAA_LUMINANCE == 0
return LinearRGBLuminance( color );
#else
return color.g * (0.587/0.299) + color.r;
#endif
}
// ---------------------
// Vertical/Horizontal Edge Test functions.
float FXAAVerticalEdge( float lumaO,
float lumaN,
float lumaE,
float lumaS,
float lumaW,
float lumaNW,
float lumaNE,
float lumaSW,
float lumaSE ) {
// Slices to calculate.
float top = (0.25 * lumaNW) + (-0.5 * lumaN) + (0.25 * lumaNE);
float middle = (0.50 * lumaW ) + (-1.0 * lumaO) + (0.50 * lumaE );
float bottom = (0.25 * lumaSW) + (-0.5 * lumaS) + (0.25 * lumaSE);
// Return value.
return abs(top) + abs(middle) + abs(bottom);
}
float FXAAHorizontalEdge( float lumaO,
float lumaN,
float lumaE,
float lumaS,
float lumaW,
float lumaNW,
float lumaNE,
float lumaSW,
float lumaSE ) {
// Slices to calculate.
float top = (0.25 * lumaNW) + (-0.5 * lumaW) + (0.25 * lumaSW);
float middle = (0.50 * lumaN ) + (-1.0 * lumaO) + (0.50 * lumaS );
float bottom = (0.25 * lumaNE) + (-0.5 * lumaE) + (0.25 * lumaSE);
// Return value.
return abs(top) + abs(middle) + abs(bottom);
}
// ------------------------
// FXAA specific functions.
// ------------------------
// Entry point for the FXAA process.
vec3 applyFXAA(sampler2D textureSource,
vec2 textureDimensions,
vec2 pixelPosition,
vec2 screenResolution) {
// Normalized pixel coordinates (from 0 to 1).
vec2 uv = pixelPosition / screenResolution;
// Calculate distance between pixels in texture space.
vec2 texel = vec2(1.0, 1.0) / textureDimensions;
// Caculate the luminance.
// float luma = FXAALuminance(rgbO.xyz);
// float luma = LinearRGBLuminance(clamp(rgbO.xyz, 0.0, 1.0));
//-------------------------
// 1. LOCAL CONTRAST CHECK
// Sample textures from cardinal directions.
vec3 rgbN = TextureOffset(textureSource, uv, vec2(0, -texel.y)).rgb; // NORTH
vec3 rgbW = TextureOffset(textureSource, uv, vec2(-texel.x, 0)).rgb; // WEST
vec3 rgbO = TextureOffset(textureSource, uv, vec2(0, 0)).rgb; // ORIGIN
vec3 rgbE = TextureOffset(textureSource, uv, vec2(texel.x, 0)).rgb; // EAST
vec3 rgbS = TextureOffset(textureSource, uv, vec2(0, texel.y)).rgb; // SOUTH
#if FXAA == 0
return rgbO; // Skip FXAA if it is off.
#endif
// Calculate the luminance for each sampled value.
float lumaN = FXAALuminance(rgbN);
float lumaW = FXAALuminance(rgbW);
float lumaO = FXAALuminance(rgbO);
float lumaE = FXAALuminance(rgbE);
float lumaS = FXAALuminance(rgbS);
// Calculate the minimum luma range.
float minLuma = min( lumaO, min( min( lumaN, lumaW ), min( lumaS, lumaE ) ) );
float maxLuma = max( lumaO, max( max( lumaN, lumaW ), max( lumaS, lumaE ) ) );
float localContrast = maxLuma - minLuma;
// Check for early exit.
if(localContrast < max( FXAA_EDGE_THRESHOLD_MIN, maxLuma * FXAA_EDGE_THRESHOLD )) {
#if FXAA_DEBUG_SKIPPED
return vec3(0);
#else
return rgbO;
#endif
}
//-------------------------
// 2. SUB-PIXEL ALIASING TEST
// Calculate the pixel contrast ratio.
// - Sub-pixel aliasing is detected by taking the ratio of the
// pixel contrast over the local contrast. This ratio nears 1.0
// in the presence of single pixel dots and otherwise falls off
// towards 0.0 as more pixels contribute to an edge. This ratio
// is transformed into the amount of lowpass filter to blend in
// at the end of the algorithm.
#if FXAA_SUBPIX > 0
// Calculate sum of local samples for the lowpass.
vec3 rgbL = (rgbN + rgbW + rgbO + rgbE + rgbS);
#if FXAA_SUBPIX_FASTER
// Average the lowpass now since this skips the addition of the diagonal neighbors (NW, NE, SW, SE).
rgbL *= (1.0/5.0);
#endif
// Calculate the lowpass luma.
// - Lowpass luma is calculated as the average between the luma of neigboring pixels.
float lumaL = (lumaN + lumaW + lumaS + lumaE) * 0.25;
// Calculate the pixel contrast.
// - Pixel contrast is the abs() difference between origin pixel luma and lowpass luma of neighbors.
float pixelContrast = abs(lumaL - lumaO);
// Remember:
// - pixel contrast is the origin - lowpass(neighbors).
// - local contrast is the min(origin + neighbors) - max(origin + neighbors) < threshold.
// Calculate the ratio between the pixelContrast and localContrast.
float contrastRatio = pixelContrast / localContrast;
float lowpassBlend = 0.0; // Default is zero. Will be changed depending on subpixel level.
#if FXAA_SUBPIX == 1
// Normal subpixel aliasing. Set based on FXAA algorithm for subpixel aliasing.
lowpassBlend = max( 0.0, contrastRatio - FXAA_SUBPIX_TRIM ) * FXAA_SUBPIX_TRIM_SCALE;
lowpassBlend = min( FXAA_SUBPIX_CAP, lowpassBlend );
#elif FXAA_SUBPIX == 2
// Full force subpixel aliasing. Set blend to ratio.
lowpassBlend = contrastRatio;
#endif
#endif
// Show selected pixels if debug mode is active.
#if FXAA_DEBUG_PASSTHROUGH
#if FXAA_SUBPIX > 0
return vec3(localContrast, lowpassBlend, 0.0);
#else
return vec3(localContrast, 0.0, 0.0);
#endif
#endif
//-------------------------
// 3. VERTICAL & HORIZONTAL EDGE TEST
// Sample the additional diagonal neighbors.
vec3 rgbNW = TextureOffset(textureSource, uv, vec2(-texel.x, -texel.y)).rgb; // NORTH-WEST
vec3 rgbNE = TextureOffset(textureSource, uv, vec2(texel.x, -texel.y)).rgb; // NORTH-EAST
vec3 rgbSW = TextureOffset(textureSource, uv, vec2(-texel.x, texel.y)).rgb; // SOUTH-WEST
vec3 rgbSE = TextureOffset(textureSource, uv, vec2(texel.x, texel.y)).rgb; // SOUTH-EAST
// Average additional neighbors when sub-pix aliasing is on and it isn't in 'fast' mode.
#if FXAA_SUBPIX > 0
#if FXAA_SUBPIX_FASTER == 0
// Add missing neighbors and average them.
rgbL += (rgbNW + rgbNE + rgbSW + rgbSE);
rgbL *= (1.0/9.0);
#endif
#endif
// Calculate luma for additional neighbors.
float lumaNW = FXAALuminance(rgbNW);
float lumaNE = FXAALuminance(rgbNE);
float lumaSW = FXAALuminance(rgbSW);
float lumaSE = FXAALuminance(rgbSE);
// Calculate the vertical and horizontal edges. (Uses algorithm from FXAA white paper).
float edgeVert = FXAAVerticalEdge(lumaO, lumaN, lumaE, lumaS, lumaW, lumaNW, lumaNE, lumaSW, lumaSE);
float edgeHori = FXAAHorizontalEdge(lumaO, lumaN, lumaE, lumaS, lumaW, lumaNW, lumaNE, lumaSW, lumaSE);
// Check if edge is horizontal.
bool isHorizontal = edgeHori >= edgeVert;
#if FXAA_DEBUG_HORZVERT
if(isHorizontal)
{
return vec3(1.0, 0.75, 0.0);
}
else
{
return vec3(0.10, 0.10, 1.0);
}
#endif
//-------------------------
// 4. FIND HIGHEST CONTRAST PAIR 90deg TO EDGE
// Contain the appropriate sign for the top left.
float edgeSign = isHorizontal ? -texel.y : -texel.x; // Note, if isHorizontal == true, -texel.y is applied (not -texel.x).
// Calculate the gradients. The luma used changes based on the horizontal edge status.
float gradientNeg = isHorizontal ? abs(lumaN - lumaO) : abs(lumaW - lumaO);
float gradientPos = isHorizontal ? abs(lumaS - lumaO) : abs(lumaE - lumaO);
// Calculate the luma based on its direction.
// It is an average of the origin and the luma in the respective direction.
float lumaNeg = isHorizontal ? ((lumaN + lumaO) * 0.5) : ((lumaW + lumaO) * 0.5);
float lumaPos = isHorizontal ? ((lumaS + lumaO) * 0.5) : ((lumaE + lumaO) * 0.5);
// Select the highest gradient pair.
bool isNegative = (gradientNeg >= gradientPos);
float gradientHighest = isNegative ? gradientNeg : gradientPos; // Assign higher pair.
float lumaHighest = isNegative ? lumaNeg : lumaPos;
// If gradient pair in the negative direction is higher, flip the edge sign.
if(isNegative) { edgeSign *= -1.0; }
#if FXAA_DEBUG_PAIR
return isHorizontal ? vec3(0.0, gradientHighest, lumaHighest) : vec3(0.0, lumaHighest, gradientHighest);
#endif
//-------------------------
// 5. END-OF-EDGE SEARCH
// Select starting point.
vec2 pointN = vec2(0.0, 0.0);
pointN.x = uv.x + (isHorizontal ? 0.0 : edgeSign * 0.5);
pointN.y = uv.y + (isHorizontal ? edgeSign * 0.5 : 0.0);
// Assign search limiting values.
gradientHighest *= FXAA_SEARCH_THRESHOLD;
// Prepare variables for search.
vec2 pointP = pointN; // Start at the same point.
vec2 pointOffset = isHorizontal ? vec2(texel.x, 0.0) : vec2(0.0, texel.y);
float lumaNegEnd = lumaNeg;
float lumaPosEnd = lumaPos;
bool searchNeg = false;
bool searchPos = false;
// Apply values based on FXAA flags.
if(FXAA_SEARCH_ACCELERATION == 1) {
pointN += pointOffset * vec2(-1.0);
pointP += pointOffset * vec2(1.0);
// pointOffset *= vec2(1.0);
} else if(FXAA_SEARCH_ACCELERATION == 2) {
pointN += pointOffset * vec2(-1.5);
pointP += pointOffset * vec2(1.5);
pointOffset *= vec2(2.0);
} else if(FXAA_SEARCH_ACCELERATION == 3) {
pointN += pointOffset * vec2(-2.0);
pointP += pointOffset * vec2(2.0);
pointOffset *= vec2(3.0);
} else if(FXAA_SEARCH_ACCELERATION == 4) {
pointN += pointOffset * vec2(-2.5);
pointP += pointOffset * vec2(2.5);
pointOffset *= vec2(4.0);
}
// Perform the end-of-edge search.
for(int i = 0; i < FXAA_SEARCH_STEPS; i++)
{
if(FXAA_SEARCH_ACCELERATION == 1) {
if(!searchNeg) { lumaNegEnd = FXAALuminance(texture(textureSource, pointN).rgb); }
if(!searchPos) { lumaPosEnd = FXAALuminance(texture(textureSource, pointP).rgb); }
}
else
{
if(!searchNeg) { lumaNegEnd = FXAALuminance(textureGrad(textureSource, pointN, pointOffset, pointOffset).rgb); }
if(!searchPos) { lumaPosEnd = FXAALuminance(textureGrad(textureSource, pointP, pointOffset, pointOffset).rgb); }
}
// Search for significant change in luma compared to current highest pair.
#if 0 // original
searchNeg = searchNeg || (abs(lumaNegEnd - lumaNeg) >= gradientNeg);
searchPos = searchPos || (abs(lumaPosEnd - lumaPos) >= gradientPos);
#else // iradicator's fix
searchNeg = searchNeg || (abs(lumaNegEnd - lumaHighest) >= gradientHighest);
searchPos = searchPos || (abs(lumaPosEnd - lumaHighest) >= gradientHighest);
#endif
// Display debug information regarding edges.
#if FXAA_DEBUG_NEGPOS
if(searchNeg) {
return vec3(abs(lumaNegEnd - gradientNeg), 0.0, 0.0);
} else if(searchPos) {
return vec3(0.0, 0.0, abs(lumaPosEnd - gradientPos));
}
#endif
// Determine if search is over early.
if(searchNeg && searchPos) { break; }
// If still searching, increment offset.
if(!searchNeg) { pointN -= pointOffset; }
if(!searchPos) { pointP += pointOffset; }
}
//-------------------------
// 6. SUB-PIXEL SHIFT
// Determine if sub-pixel center falls on positive or negative side.
float distanceNeg = isHorizontal ? uv.x - pointN.x : uv.y - pointN.y;
float distancePos = isHorizontal ? pointP.x - uv.x : pointP.y - uv.y;
bool isCloserToNegative = distanceNeg < distancePos;
// Assign respective luma.
float lumaEnd = isCloserToNegative ? lumaNegEnd : lumaPosEnd;
// Check if pixel is in area that receives no filtering.
if( ((lumaO - lumaNeg) < 0.0) == ((lumaEnd - lumaNeg) < 0.0) ) {
edgeSign = 0.0;
}
// Compute sub-pixel offset and filter span.
float filterSpanLength = (distancePos + distanceNeg);
float filterDistance = isCloserToNegative ? distanceNeg : distancePos;
float subpixelOffset = ( 0.5 + ( filterDistance * (-1.0 / filterSpanLength) ) ) * edgeSign;
#if FXAA_DEBUG_OFFSET
if(subpixelOffset < 0.0) {
return isHorizontal ? vec3(1.0, 0.0, 0.0) : vec3(1.0, 0.7, 0.1); // neg-horizontal (red) : neg-vertical (gold)
}
if(subpixelOffset > 0.0) {
return isHorizontal ? vec3(0.0, 0.0, 1.0) : vec3(0.1, 0.3, 1.0); // pos-horizontal (blue) : pos-vertical (skyblue)
}
#endif
// Resample using the subpixel offset.
vec3 rgbOffset = textureLod(textureSource, vec2( uv.x + (isHorizontal ? 0.0 : subpixelOffset), uv.y + (isHorizontal ? subpixelOffset : 0.0)), 0.0).rgb;
// return vec3((lumaN + lumaS + lumaE + lumaW + lumaNW + lumaNE + lumaSW + lumaSE) * (1.0/9.0));
#if FXAA_DEBUG_HIGHLIGHT
return isHorizontal ? vec3(1.0, 0.0, 0.0) : vec3(0.0, 1.0, 0.0);
#endif
// Return the FXAA effect.
#if FXAA_SUBPIX == 0
return vec3(rgbOffset);
#else
return mix(rgbOffset, rgbL, lowpassBlend);
#endif
}
// ------------------------
// Main function.
// ------------------------
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
#if (FXAA == 2)
vec2 uv = fragCoord/iResolution.xy; // Normalized pixel coordinates (from 0 to 1)
vec3 resultFXAA = vec3(1.0);
float speed = 0.45;
vec2 extents = vec2(0.1, 0.8);
float divisor = ( ((sin(iTime * speed) * 0.5) + 0.5) * extents.y ) + extents.x;
float increment = 0.005;
float divNeg = divisor - increment;
float divPos = divisor + increment;
if(uv.x >= divNeg && uv.x <= divPos) { resultFXAA = vec3(0.1); }
if(uv.x < divNeg) { resultFXAA = mix(texture(iChannel0, vec2(uv.x, uv.y)).xyz, vec3(0.9, 0.9, 0.9), 0.1); }
if(uv.x > divPos) { resultFXAA = applyFXAA(iChannel0, iChannelResolution[0].xy, fragCoord, iResolution.xy); }
#else
// Calculuate the FXAA value for the whole screen.
vec3 resultFXAA = applyFXAA(iChannel0, iChannelResolution[0].xy, fragCoord, iResolution.xy);
#endif
// Return the sampled pixel.
fragColor = ToVec4(resultFXAA, 1.0);
}

14
demos/html5/art/fx/fxGrain.fs 100644
View File

@ -0,0 +1,14 @@
uniform float intensity = 16.0;
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 color = texture(iChannel0, uv), outcolor;
float x = (uv.x + 4.0 ) * (uv.y + 4.0 ) * (iTime * 10.0);
vec4 grain = vec4(mod((mod(x, 13.0) + 1.0) * (mod(x, 123.0) + 1.0), 0.01)-0.005) * intensity;
outcolor = color + grain; // method 1
// outcolor = color * (1.0 - grain); // method 2
FRAGCOLOR = vec4(outcolor.rgb, color.a);
}

25
demos/html5/art/fx/fxHSV.fs 100644
View File

@ -0,0 +1,25 @@
uniform float h = 1.0; // tint shift
uniform float s = 0.5; // saturate: >1, decolorize: <1
uniform float v = 1.0; // white: >1, gray: <1
vec3 hsv2rgb(vec3 c) {
return mix(vec3(1.),clamp((abs(fract(c.r+vec3(3.,2.,1.)/3.)*6.-3.)-1.),0.,1.),c.g)*c.b;
}
vec3 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);
}
void main() {
vec2 uv = TEXCOORD.st;
vec4 src = texture2D( iChannel0, uv );
vec3 c = rgb2hsv(src.rgb);
FRAGCOLOR = vec4( hsv2rgb(c * vec3(h,s,v)), src.a );
}

11
demos/html5/art/fx/fxLetterbox.fs 100644
View File

@ -0,0 +1,11 @@
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// letterbox
if( abs(2.*fragCoord.y-iResolution.y) > iResolution.x * 0.42 ) {
fragColor = vec4( 0., 0., 0., 1. );
return;
}
vec2 uv = fragCoord.xy / iResolution.xy;
fragColor = texture(iChannel0, uv);
}

19
demos/html5/art/fx/fxOutline.fs 100644
View File

@ -0,0 +1,19 @@
uniform int thickness = 2;
uniform vec4 border_color = vec4(1,1,0,1);
void main() {
vec4 texel = texture(iChannel0, uv);
float outline = 0.0;
if( texel.a == 0.0 ) {
for( int x = -thickness; x <= thickness; x++ ) {
for( int y = -thickness;y <= thickness; y++ ) {
float sample = texture(iChannel0, uv+vec2(float(x)/iWidth, float(y)/iHeight)).a;
if( sample > 0.0 ) {
outline = 1.0;
}
}
}
}
FRAGCOLOR = mix(texel, border_color, outline * border_color.a);
}

8
demos/html5/art/fx/fxPixelate.fs 100644
View File

@ -0,0 +1,8 @@
uniform float xCellSize = 2.5;
uniform float yCellSize = 2.5;
void main() {
float xPixels = iWidth/xCellSize, yPixels = iHeight/yCellSize;
vec2 uv = vec2(floor(texcoord.s * xPixels) / xPixels, floor(texcoord.t * yPixels) / yPixels);
FRAGCOLOR = texture(iChannel0, uv);
}

7
demos/html5/art/fx/fxQuantize.fs 100644
View File

@ -0,0 +1,7 @@
uniform float factor = 3.0; // [1(max)..255(min)]
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 src = texture(iChannel0, uv);
fragColor = vec4(floor(src.rgb * factor + 0.5) / factor, src.a);
}

132
demos/html5/art/fx/fxSSAO.fs 100644
View File

@ -0,0 +1,132 @@
// based on code by arkano22. See: http://www.gamedev.net/forums/topic/550699-ssao-no-halo-artifacts/
// - rlyeh, public domain
uniform vec2 camerarange = vec2(1.0, 1024.0);
// uniform sampler2D som; // Depth texture (iChannel1)
#if 0
uniform sampler2D rand; // Random texture (iChannel2)
vec2 getRandom(vec2 uv) {
vec3 random = texture2D(rand, uv.st);
return random*2.0-vec3(1.0);
}
#else
#define MOD3 vec3(.1031,.11369,.13787)
float hash12(vec2 p) {
vec3 p3 = fract(vec3(p.xyx) * MOD3);
p3 += dot(p3, p3.yzx + 19.19);
return fract((p3.x + p3.y) * p3.z);
}
vec2 hash22(vec2 p) {
vec3 p3 = fract(vec3(p.xyx) * MOD3);
p3 += dot(p3, p3.yzx+19.19);
return fract(vec2((p3.x + p3.y)*p3.z, (p3.x+p3.z)*p3.y));
}
vec3 getPosition(vec2 uv) {
float fl = textureLod(iChannel0, vec2(0.), 0.).x;
float d = textureLod(iChannel0, uv, 0.).w;
vec2 p = uv*2.-1.;
mat3 ca = mat3(1.,0.,0.,0.,1.,0.,0.,0.,-1./1.5);
vec3 rd = normalize( ca * vec3(p,fl) );
vec3 pos = rd * d;
return pos;
}
vec2 getRandom(vec2 uv) {
return normalize(hash22(uv*126.1231) * 2. - 1.);
}
#endif
float pw = 1.0/iResolution.x*0.5;
float ph = 1.0/iResolution.y*0.5;
float readDepth(in vec2 coord) {
if (coord.x<0||coord.y<0) return 1.0;
float nearZ = camerarange.x;
float farZ =camerarange.y;
float posZ = texture(iChannel1, coord).x;
return (2.0 * nearZ) / (nearZ + farZ - posZ * (farZ - nearZ));
}
float compareDepths(in float depth1, in float depth2,inout int far) {
float diff = (depth1 - depth2)*100; //depth difference (0-100)
float gdisplace = 0.2; //gauss bell center
float garea = 2.0; //gauss bell width 2
//reduce left bell width to avoid self-shadowing
if (diff<gdisplace){
garea = 0.1;
}else{
far = 1;
}
float gauss = pow(2.7182,-2*(diff-gdisplace)*(diff-gdisplace)/(garea*garea));
return gauss;
}
float calcAO(float depth, vec2 uv, float dw, float dh) {
float temp = 0;
float temp2 = 0;
float coordw = uv.x + dw/depth;
float coordh = uv.y + dh/depth;
float coordw2 = uv.x - dw/depth;
float coordh2 = uv.y - dh/depth;
if (coordw < 1.0 && coordw > 0.0 && coordh < 1.0 && coordh > 0.0){
vec2 coord = vec2(coordw , coordh);
vec2 coord2 = vec2(coordw2, coordh2);
int far = 0;
temp = compareDepths(depth, readDepth(coord),far);
//DEPTH EXTRAPOLATION:
if (far > 0){
temp2 = compareDepths(readDepth(coord2),depth,far);
temp += (1.0-temp)*temp2;
}
}
return temp;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
//randomization texture:
vec2 uv = fragCoord.xy / iResolution.xy;
vec2 random = getRandom( uv + vec2(iTime) );
//initialize stuff:
float depth = readDepth(uv);
float ao = 0.0;
for(int i=0; i<4;++i) {
//calculate color bleeding and ao:
ao+=calcAO(depth, uv, pw, ph);
ao+=calcAO(depth, uv, pw, -ph);
ao+=calcAO(depth, uv, -pw, ph);
ao+=calcAO(depth, uv, -pw, -ph);
ao+=calcAO(depth, uv, pw*1.2, 0);
ao+=calcAO(depth, uv, -pw*1.2, 0);
ao+=calcAO(depth, uv, 0, ph*1.2);
ao+=calcAO(depth, uv, 0, -ph*1.2);
//sample jittering:
pw += random.x*0.0007;
ph += random.y*0.0007;
//increase sampling area:
pw *= 1.7;
ph *= 1.7;
}
//final values, some adjusting:
vec4 texel = texture(iChannel0, uv);
float finalAO = 1.0-(ao/32.0); finalAO = 0.5+finalAO*0.5;
fragColor = vec4(texel.rgb * vec3(finalAO), texel.a);
//fragColor = vec4(vec3(finalAO), texel.a); // << debug
}

14
demos/html5/art/fx/fxScanlines.fs 100644
View File

@ -0,0 +1,14 @@
uniform float hardness = 0.1;
uniform float flickering = 0.01;
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 src = texture( iChannel0, vec2(uv.x,uv.y) );
vec3 color = src.rgb;
color *= (1.0 - hardness)+hardness*sin(10.0*iTime+uv.y*1000.0);
color *= (1.0 - flickering)+flickering*sin(100.0*iTime);
fragColor = vec4(color, src.a);
}

22
demos/html5/art/fx/fxScreenSpaceDither.fs 100644
View File

@ -0,0 +1,22 @@
// https://www.shadertoy.com/view/4dcSRX
// https://www.shadertoy.com/view/MslGR8
// https://www.shadertoy.com/view/Md3XRf *
// note: valve edition from http://alex.vlachos.com/graphics/Alex_Vlachos_Advanced_VR_Rendering_GDC2015.pdf
// note: input in pixels (ie not normalized uv)
uniform float intensity = 250.0; // [2..255]
vec3 ScreenSpaceDither2(vec2 vScreenPos, float colorDepth) {
// lestyn's RGB dither (7 asm instructions) from Portal 2 X360, slightly modified for VR
vec3 vDither = vec3(dot(vec2(131.0, 312.0), vScreenPos.xy + iTime));
vDither.rgb = fract(vDither.rgb / vec3(103.0, 71.0, 97.0)) - vec3(0.5, 0.5, 0.5);
return (vDither.rgb / colorDepth) * 0.375;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 color = texture(iChannel0, uv);
fragColor = color + vec4(ScreenSpaceDither2(gl_FragCoord.xy,255.0 - intensity), 0);
}

14
demos/html5/art/fx/fxSepia.fs 100644
View File

@ -0,0 +1,14 @@
uniform float intensity = 1.0;
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 src = texture(iChannel0, uv);
vec3 color = vec3(
dot(src.rgb, vec3(0.393 * intensity, 0.769 * intensity, 0.189 * intensity)),
dot(src.rgb, vec3(0.349 * intensity, 0.686 * intensity, 0.168 * intensity)),
dot(src.rgb, vec3(0.272 * intensity, 0.534 * intensity, 0.131 * intensity))
);
fragColor = vec4(color, src.a);
}

17
demos/html5/art/fx/fxSharpen.fs 100644
View File

@ -0,0 +1,17 @@
uniform float intensity = 1.0;
void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec2 uv = fragCoord / iResolution.xy;
vec4 src = texture(iChannel0, uv);
vec3 kernel = src.rgb * 9. +
-1. * texture(iChannel0, uv + vec2(-1,-1) / iResolution.xy).rgb
-1. * texture(iChannel0, uv + vec2( 0,-1) / iResolution.xy).rgb
-1. * texture(iChannel0, uv + vec2( 1,-1) / iResolution.xy).rgb
-1. * texture(iChannel0, uv + vec2(-1, 0) / iResolution.xy).rgb
-1. * texture(iChannel0, uv + vec2( 1, 0) / iResolution.xy).rgb
-1. * texture(iChannel0, uv + vec2(-1, 1) / iResolution.xy).rgb
-1. * texture(iChannel0, uv + vec2( 0, 1) / iResolution.xy).rgb
-1. * texture(iChannel0, uv + vec2( 1, 1) / iResolution.xy).rgb;
vec3 outcolor = mix(src.rgb, kernel, intensity);
fragColor = vec4(outcolor, src.a);
}

17
demos/html5/art/fx/fxTonemapACES.fs 100644
View File

@ -0,0 +1,17 @@
// https://knarkowicz.wordpress.com/2016/01/06/aces-filmic-tone-mapping-curve/
vec3 acesFilm(const vec3 x) {
const float a = 2.51;
const float b = 0.03;
const float c = 2.43;
const float d = 0.59;
const float e = 0.14;
return clamp((x * (a * x + b)) / (x * (c * x + d ) + e), 0.0, 1.0);
}
out vec4 color;
void main(void) {
vec2 uv = TEXCOORD.st;
vec4 src = texture2D(iChannel0, uv);
color = vec4( acesFilm(src.xyz), src.a);
}

13
demos/html5/art/fx/fxTonemapExposure.fs 100644
View File

@ -0,0 +1,13 @@
// exposure tone mapping
// https://learnopengl.com/Advanced-Lighting/HDR
uniform float exposure = 1.0; // [0.1 .. 5]
out vec4 color;
void main(void) {
vec2 uv = TEXCOORD.st;
vec4 HDR_color = texture2D(iChannel0, uv); // HDR_color, SRGB texture
vec3 mapped = vec3(1.0) - exp(-HDR_color.xyz * exposure);
color = vec4( mapped.xyz, HDR_color.a );
}

37
demos/html5/art/fx/fxTonemapFilmic.fs 100644
View File

@ -0,0 +1,37 @@
// Src: http://www.slideshare.net/ozlael/hable-john-uncharted2-hdr-lighting
// Based on Filmic Tonemapping Operators http://filmicgames.com/archives/75
vec3 tonemapFilmic(vec3 linearColor) {
vec3 x = max(vec3(0.0), linearColor - 0.004);
return (x * (6.2 * x + 0.5)) / (x * (6.2 * x + 1.7) + 0.06);
}
// Remember final color = CustomFilmic(Linear color) / CustomFilmic(Linear white point value) : No gamma baked in
vec3 customFilmic(vec3 linearColor, float shoulderStr, float linearStr, float linearAngle, float toeStr, float toeNumer, float toeDenom) {
return ((linearColor * (shoulderStr * linearColor + linearAngle * linearStr) + toeStr * toeNumer) / (linearColor * (shoulderStr * linearColor + linearStr) + toeStr * toeDenom)) - toeNumer / toeDenom;
}
// This function applies a "film-like" tonemap to supplied
// HDR pixel. Does not apply 2.2 Gamma correction.
//
// hdr: linear colour in HDR
// whitePoint: scene white point / exposure. must be > 0.0
//
// src: https://twitter.com/jimhejl/status/841149752389558272
vec3 tonemapFilmic_hejl2015(vec3 hdr, float whitePoint) {
vec4 vh = vec4(hdr, whitePoint);
vec4 va = (1.425 * vh) + 0.05f; // evaluate filmic curve
vec4 vf = ((vh * va + 0.004f) / ((vh * (va + 0.55f) + 0.0491f))) - 0.0821f;
return vf.rgb / vf.www;
}
out vec4 color;
void main(void) {
vec2 uv = TEXCOORD.st;
vec4 src = texture2D(iChannel0, uv);
color = vec4( tonemapFilmic_hejl2015(src.xyz, 0.5), src.a);
// ccolor = vec4( tonemapFilmic(src.xyz), src.a);
}

45
demos/html5/art/fx/fxTonemapIlford.fs 100644
View File

@ -0,0 +1,45 @@
#define lerp(a,b,c) mix(a,b,c)
#define saturate(c) clamp(c, 0.0, 1.0)
// This function approximates the black and white film stock
// "Ilford FP4" pushed to 400 ISO. It is typical for noir style. This
// tonal transformation does not approximate gamma 2.2, so an explicit
// sRGB transform should be performed before display.
//
// vec3 hdr (IN): Color pixel in linear space
// vec2 uv (IN): Screen space UV for vignette
//
// returns Filmic remapped pixel in gamma 1.0 space
// src: pic.twitter.com/7ZSMM5RRMz
//
vec3 PostFilmic_IlfordFp4Push(vec3 c, vec2 uv) {
// film curve coefficients
const vec3 cb = vec3( 0.0307479, 0.00030400, -0.04458630);
const vec3 de = vec3(-0.0095000, -0.00162400, -0.01736670);
const vec3 df = vec3( 0.1493590, 0.21412400, 1.85780000);
const vec3 ef = vec3(-0.0636051, -0.00758438, -0.00934798);
c = c * c * 1.88; // quick approximation of skip bleach
// remap color channels
vec3 ax = vec3(2.36691,5.14272,0.49020)*c;
vec3 pn = (c*(ax+cb)+de);
vec3 pd = (c*(ax+vec3(0.022,0.004,-0.10543))+df);
// collapse color channels
float pr = dot(saturate(pn/pd),vec3(0.45,0.45,0.45));
// vignette
float pv = saturate(pow(1.0 - dot(uv-.5, uv-.5), -.758) + -.23);
float x = lerp(pr,pr*pr*pr,pv); // done
return vec3(x,x,x);
}
out vec4 color;
void main(void) {
vec2 uv = TEXCOORD.st;
vec4 src = texture2D(iChannel0, uv);
color = vec4( PostFilmic_IlfordFp4Push(src.xyz, uv), src.a);
}

38
demos/html5/art/fx/fxTonemapReinhard.fs 100644
View File

@ -0,0 +1,38 @@
// https://www.shadertoy.com/view/lslGzl
vec3 tonemapReinhard(const vec3 color) {
// color *= toneMappingExposure;
return color / (color + vec3(1.0));
}
vec3 simpleReinhardToneMapping(vec3 color)
{
float exposure = 1.5;
color *= exposure/(1. + color / exposure);
return color;
}
vec3 lumaBasedReinhardToneMapping(vec3 color)
{
float luma = dot(color, vec3(0.2126, 0.7152, 0.0722));
float toneMappedLuma = luma / (1. + luma);
color *= toneMappedLuma / luma;
return color;
}
vec3 whitePreservingLumaBasedReinhardToneMapping(vec3 color)
{
float white = 2.;
float luma = dot(color, vec3(0.2126, 0.7152, 0.0722));
float toneMappedLuma = luma * (1. + luma / (white*white)) / (1. + luma);
color *= toneMappedLuma / luma;
return color;
}
out vec4 color;
void main(void) {
vec2 uv = TEXCOORD.st;
vec4 src = texture2D(iChannel0, uv);
color = vec4( whitePreservingLumaBasedReinhardToneMapping(src.xyz), src.a);
}

27
demos/html5/art/fx/fxTonemapUncharted.fs 100644
View File

@ -0,0 +1,27 @@
// https://www.shadertoy.com/view/lslGzl
vec3 uncharted2Tonemap(const vec3 x) {
const float A = 0.15;
const float B = 0.50;
const float C = 0.10;
const float D = 0.20;
const float E = 0.02;
const float F = 0.30;
return ((x * (A * x + C * B) + D * E) / (x * (A * x + B) + D * F)) - E / F;
}
vec3 tonemapUncharted2(const vec3 color) {
const float W = 11.2;
const float exposureBias = 2.0;
vec3 curr = uncharted2Tonemap(exposureBias * color);
vec3 whiteScale = 1.0 / uncharted2Tonemap(vec3(W));
return curr * whiteScale;
}
out vec4 color;
void main(void) {
vec2 uv = TEXCOORD.st;
vec4 src = texture2D(iChannel0, uv);
color = vec4( tonemapUncharted2(src.xyz), src.a);
}

8
demos/html5/art/fx/fxTonemapZZGamma.fs 100644
View File

@ -0,0 +1,8 @@
uniform float gamma = 2.2;
out vec4 color;
void main(void) {
vec2 uv = TEXCOORD.st;
vec4 src = texture2D(iChannel0, uv);
color = vec4( pow(src.xyz, vec3(1.0 / gamma)), src.a); // gamma correction
}

154
demos/html5/art/fx/fxVCR.fs 100644
View File

@ -0,0 +1,154 @@
/**
* (c) 2021 FMS_Cat
* Original shader: https://www.shadertoy.com/view/MdffD7
* I dumbass don't know what it says despite it's my own shader
*/
/*
* Copyright 2021 FMS_Cat
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
#define half2 vec2
#define half3 vec3
#define half4 vec4
#define saturate(c) clamp(c, 0.0, 1.0)
//uniform float iTime;
uniform float iScale;
//uniform vec2 iResolution;
uniform vec4 iBackground;
const float PI = 3.14159265f;
const int SAMPLES = 6;
const float COLOR_NOISE_AMP = 0.1f;
const vec3 YIQ_OFFSET = vec3( -0.1f, -0.1f, 0.0f );
const vec3 YIQ_AMP = vec3( 1.2f, 1.1f, 1.5f );
bool validuv( vec2 uv )
{
return 0.0f < uv.x && uv.x < 1.0f && 0.0f < uv.y && uv.y < 1.0f;
}
vec2 yflip( vec2 uv )
{
return vec2( uv.x, 1.0 - uv.y );
}
float fs( float s )
{
return fract( sin( s * 114.514f ) * 1919.810f );
}
float fs2( vec2 s )
{
return fs( s.x + fs( s.y ) );
}
mat2x2 rotate2D( float t )
{
return mat2x2( cos( t ), sin( t ), -sin( t ), cos( t ) );
}
vec3 rgb2yiq( vec3 rgb )
{
return mat3x3( 0.299f, 0.596f, 0.211f, 0.587f, -0.274f, -0.523f, 0.114f, -0.322f, 0.312f ) * rgb;
}
vec3 yiq2rgb( vec3 yiq )
{
return mat3x3( 1.000f, 1.000f, 1.000f, 0.956f, -0.272f, -1.106f, 0.621f, -0.647f, 1.703f ) * yiq;
}
float v2Random( vec2 v )
{
vec2 vf = fract( v * 256.0f );
vec2 vi = floor( v * 256.0f ) / 256.0f;
vec2 d = vec2( 0.0f, 1.0f / 256.0f );
return mix(
mix( fs2( vi + d.xx ), fs2( vi + d.yx ), vf.x ),
mix( fs2( vi + d.xy ), fs2( vi + d.yy ), vf.x ),
vf.y
);
}
half3 vhsTex2D( vec2 uv ) {
if ( validuv( uv ) ) {
half3 yiq = half3( 0.0f, 0.0f, 0.0f );
for ( int i = 0; i < SAMPLES; i ++ ) {
vec2 uvt = uv - vec2( float( i ), 0.0f ) / iResolution;
if ( validuv( uvt ) ) {
half4 tex = texture(iChannel0, uvt );
yiq += (
rgb2yiq( mix( iBackground.rgb, tex.rgb, tex.a ) ) *
vec2( float( i ), float( SAMPLES - 1 - i ) ).yxx / float( SAMPLES - 1 )
) / float( SAMPLES ) * 2.0f;
}
}
return yiq2rgb( yiq );
}
return half3( 0.1f, 0.1f, 0.1f );
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec2 uvt = yflip( uv );
vec3 col = vec3( 0.0f, 0.0f, 0.0f );
// tape wave
uvt.x += ( v2Random( vec2( uvt.y / 10.0f, iTime / 10.0f ) / 1.0f ) - 0.5f ) / iResolution.x * 1.0f;
uvt.x += ( v2Random( vec2( uvt.y, iTime * 10.0f ) ) - 0.5f ) / iResolution.x * 1.0f;
// tape crease
float tcPhase = smoothstep( 0.9f, 0.96f, sin( uvt.y * 8.0f - ( iTime + 0.14f * v2Random( iTime * vec2( 0.67f, 0.59f ) ) ) * PI * 1.2f ) );
float tcNoise = smoothstep( 0.3f, 1.0f, v2Random( vec2( uvt.y * 4.77f, iTime ) ) );
float tc = tcPhase * tcNoise;
uvt.x = uvt.x - tc / iResolution.x * 8.0f;
// switching noise
float snPhase = smoothstep( 6.0f / iResolution.y, 0.0f, uvt.y );
uvt.y += snPhase * 0.3f;
uvt.x += snPhase * ( ( v2Random( vec2( uv.y * 100.0f, iTime * 10.0f ) ) - 0.5f ) / iResolution.x * 24.0f );
// fetch
half4 tex = texture(iChannel0, uv);
half3 color = vhsTex2D( yflip( uvt ) );
color = pow( color, vec3(0.4545f) );
// crease noise
float cn = tcNoise * ( 0.3f + 0.7f * tcPhase );
if ( 0.29f < cn ) {
vec2 uvtt = ( uvt + vec2( 1.0f, 0.0f ) * v2Random( vec2( uvt.y, iTime ) ) ) * vec2( 0.1f, 1.0f );
float n0 = v2Random( uvtt );
float n1 = v2Random( uvtt + vec2( 1.0f, 0.0f ) / iResolution.x );
if ( n1 < n0 ) {
color = mix( color, vec3( 2.0f, 2.0f, 2.0f ), pow( n0, 10.0f ) );
}
}
// ac beat
color *= 1.0f + 0.1f * smoothstep( 0.4f, 0.6f, v2Random( vec2( 0.0f, 0.1f * ( uv.y + iTime * 0.2f ) ) / 10.0f ) );
// color noise
half2 noiseuv = uvt + vec2( fs( iTime ), fs( iTime / 0.7f ) );
half3 noise = half3(
v2Random( noiseuv ),
v2Random( noiseuv + 0.7f ),
v2Random( noiseuv + 1.4f )
);
color = saturate( color );
// yiq
color = rgb2yiq( color );
color += COLOR_NOISE_AMP * ( noise - 0.5f );
color = YIQ_OFFSET + YIQ_AMP * color;
color = yiq2rgb( color );
color = pow( color, vec3(2.2f) );
fragColor = half4( color, tex.a );
}

12
demos/html5/art/fx/fxVignette.fs 100644
View File

@ -0,0 +1,12 @@
uniform float vignette = 0.75;
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 src = texture( iChannel0, uv );
vec3 color = src.rgb;
color *= (1.0 - vignette) + vignette * 16.0 * uv.x * uv.y * (1.0-uv.x) * (1.0-uv.y);
fragColor = vec4(color, src.a);
}

208
demos/html5/art/icons/logo.ai 100644
View File

File diff suppressed because one or more lines are too long

BIN
demos/html5/art/icons/logo.ico 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

2
demos/html5/art/icons/logo.license 100644
View File

@ -0,0 +1,2 @@
Free & Open Sourced Logos
At Fairpixels, we had unused logo designs piling up on our hard drives and decided to make them available to the world, for free. The logos below can be downloaded unlimited times and used by anyone. For personal & commercial projects. No attribution required. Perfect for mvp's and mockups.

BIN
demos/html5/art/icons/logo.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

12
demos/html5/art/icons/suru.license 100644
View File

@ -0,0 +1,12 @@
This work is licenced under the terms of either the GNU GPL v3 or
Creative Commons Attribution-Share Alike 4.0 United States License.
To view a copy of the CC-BY-SA licence, visit
http://creativecommons.org/licenses/by-sa/4.0/ or send a letter to Creative
Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
You should have received a copy of the GNU General Public License along with
this program; if not, see <https://www.gnu.org/licenses/>
When attributing the artwork, using "Suru Icons" is enough.
Please link to http://snwh.org/ where available.

BIN
demos/html5/art/icons/suru.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 273 KiB

24
demos/html5/demo_collide.c
View File

@ -578,16 +578,16 @@ void game_loop(void *userdata) {
//ddraw_flush(); //ddraw_flush();
//fx_end(); //fx_end();
if( ui_panel("Audio", 0) ) { // if( ui_panel("Audio", 0) ) {
if( ui_button("test audio") ) { // if( ui_button("test audio") ) {
// audio (both clips & streams) // // audio (both clips & streams)
static audio_t voice; voice = audio_clip("coin.wav"); // "pew.sfxr" // static audio_t voice; voice = audio_clip("coin.wav"); // "pew.sfxr"
static audio_t stream; stream = audio_stream("wrath_of_the_djinn.xm"); // "larry.mid" // static audio_t stream; stream = audio_stream("wrath_of_the_djinn.xm"); // "larry.mid"
audio_play(voice, 0); // audio_play(voice, 0);
audio_play(stream, 0); // audio_play(stream, 0);
} // }
ui_panel_end(); // ui_panel_end();
} // }
if( ui_panel("FX", 0) ) { if( ui_panel("FX", 0) ) {
for( int i = 0; i < 64; ++i ) { for( int i = 0; i < 64; ++i ) {
@ -605,9 +605,7 @@ int main(void) {
window_create(0.75f, WINDOW_MSAA4); window_create(0.75f, WINDOW_MSAA4);
window_title( "V4K - SPACE pauses simulation" ); window_title( "V4K - SPACE pauses simulation" );
// for(const char **list = file_list("fx**.fs"); *list; list++) { // fx_load("fx**.fs");
// //fx_load(*list);
// }
// camera that points to origin // camera that points to origin
cam = camera(); cam = camera();

3
engine/v4k.html
View File

@ -596,7 +596,7 @@ details > summary::-webkit-details-marker {
|Version: | 2023.9 | |Version: | 2023.9 |
|:--------------|:------------| |:--------------|:------------|
|Branch: | main | |Branch: | main |
|Commit: | 74 | |Commit: | 75 |
<!--| Documentation last modified | { {LAST_MODIFIED} } |--> <!--| Documentation last modified | { {LAST_MODIFIED} } |-->
# [V·4·K 2023.9 ](https://v4k.dev) # [V·4·K 2023.9 ](https://v4k.dev)
@ -604,6 +604,7 @@ details > summary::-webkit-details-marker {
- V4K is a multimedia workbench for prototyping and planning ideas. - V4K is a multimedia workbench for prototyping and planning ideas.
- Internal use only. - Internal use only.
- you can try out the [live demo](https://v4k.dev/demo/)
- Original repo at [FWK](https://github.com/r-lyeh/FWK). Huge thanks for the amazing base provided! - Original repo at [FWK](https://github.com/r-lyeh/FWK). Huge thanks for the amazing base provided!
<br/> <br/>

62
tools/cook_web.ini 100644
View File

@ -0,0 +1,62 @@
; this is where you specify and configure the FWK pipeline.
; tweak the pipeline and add new importers just by editing this file.
; there is no flow control in this script file: lines are parsed and evaluated, from top to bottom.
; ------------------------------------------------------------------------------
; let's create a symbol. symbols are uppercase words always.
; syntax: symbols are defined in KEY=value form, as seen below.
TOOLS=./ ; folder where our pipeline tools are located
ART=../demos/html5/art ; comma-separated folder(s) that store all our asset files
; lines starting with @windows, @linux or @osx will be processed only where OS matches.
; we are defining here some symbols differently for each platform.
; syntax: lines starting with @keyword. valid keywords are win/dows, lin/ux, and osx.
@linux NUL=/dev/null
@osx NUL=/dev/null
@window NUL=NUL
@linux .EXE=.linux
@osx .EXE=.osx
@windows .EXE=.exe
; you can invoke shell commands directly with `command` at anytime.
; also, once a symbol is found, it is replaced by its value always.
; some predefined symbols: INPUT (input filename), OUTPUT (output filename), PRETTY (clean input filename), PROGRESS (cook progress).
@windows `echo Cooking PROGRESS% PRETTY...`
@linux `echo "Cooking PROGRESS% PRETTY..."`
@osx `echo "Cooking PROGRESS% PRETTY..."`
; ------------------------------------------------------------------------------
; groups below are collection of files that we want to cook, and then package.
; by default, no assets are cooked unless explictly listed below.
; syntax: group=ext1,ext2[...]
[cook]
font=ttf,ttc,otf
text=json,xml,csv,ini,cfg,doc,txt,md,c,h,inl,cpp,hpp,htm,html
shader=hlsl,fx,dxil,dxbc,glsl,vert,frag,geom,tese,tesc,comp,vs,fs,gs,ts,cs,spirv,spv,slang
; ------------------------------------------------------------------------------
; cook localization files
;[cook excel]
;TOOLS/xlsx2ini.EXE INPUT OUTPUT -> ini
; ------------------------------------------------------------------------------
; assets that need to be compressed at end of whole pipeline process are specified here.
; by default, no assets are compressed unless explictly listed below.
; supported compressors: DEFLATE (default), LZMA, LZ4, ULZ, BALZ, BCM, CRUSH, LZW3, LZSS and PPP.
; syntax: compression quality[0..15]|optional_compressor on the left, and type names on the right.
; where: level [0:fastest compression .. 10 max level .. anything >=11 is expensive ... 15 is uber]
;
; valid examples: 0, 3, 4, 6|LZMA, 6|DEFLATE, 6|ULZ, 9|ULZ, 9|LZ4, 2|BALZ, 3|BCM, 1|CRUSH, ...
;
; hint: use plain `0` to exclude non-compressible files (jpg,png,...)
; hint: use plain `0` to exclude those usually large files that compress poorly (<1%) (like mpg)
; hint: use plain `0` to exclude those files we would like to directly stream within the final zipfile (flac,mp3,adpcm wav,...)
[compress]
0|ULZ=font,text,shader

1
tools/docs/docs.md
View File

@ -9,6 +9,7 @@
- V4K is a multimedia workbench for prototyping and planning ideas. - V4K is a multimedia workbench for prototyping and planning ideas.
- Internal use only. - Internal use only.
- you can try out the [live demo](https://v4k.dev/demo/)
- Original repo at [FWK](https://github.com/r-lyeh/FWK). Huge thanks for the amazing base provided! - Original repo at [FWK](https://github.com/r-lyeh/FWK). Huge thanks for the amazing base provided!
<br/> <br/>