Skip to content

Commit 1ce5f6c

Browse files
rhulharhulha
committed
added cameraNear, cameraFar and (canvas) size uniforms
added a SSAO postfx shader added a SSAO example
1 parent f9e4710 commit 1ce5f6c

6 files changed

Lines changed: 261 additions & 2 deletions

File tree

‎example/test_ssao.dart‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import 'package:chronosgl/chronosgl.dart';
2+
3+
void main() {
4+
5+
ChronosGL chronosGL = new ChronosGL('#webgl-canvas', useFramebuffer:true, fxShader: getSSAOShader(), near: 0.1, far:2520.0);
6+
ShaderProgram prg = chronosGL.createProgram('FixedVertexColor', chronosGL.getShaderLib().createFixedVertexColorShader());
7+
Camera camera = chronosGL.getCamera();
8+
camera.setPos( 0.0, 0.0, 56.0 );
9+
FlyingCamera fc = new FlyingCamera(camera); // W,A,S,D keys fly
10+
chronosGL.addAnimatable('flyingCamera', fc);
11+
12+
loadObj( "ct_logo.obj").then((MeshData2 md) {
13+
14+
Mesh mesh = md.createMesh();
15+
mesh.rotX(3.14/2);
16+
mesh.rotZ(3.14);
17+
Node n = new Node(mesh);
18+
//n.invert = true;
19+
n.lookAt(new Vector(100.0,0.0,-100.0));
20+
//n.matrix.scale(0.02);
21+
22+
prg.add( mesh);
23+
chronosGL.run();
24+
25+
});
26+
27+
28+
29+
30+
}

‎example/test_ssao.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<html>
2+
<head>
3+
<title>TestObj</title>
4+
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
5+
</head>
6+
7+
<body marginheight="0" marginwidth="0" bgcolor="black" id="body" >
8+
<canvas id="webgl-canvas" style="border: none; cursor:crosshair; width:100%; height: 100%"></canvas>
9+
10+
<script type="application/dart" src="test_ssao.dart"></script>
11+
<script src="packages/browser/dart.js"></script>
12+
13+
</body>
14+
15+
</html>
16+
17+

‎lib/chronosgl.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ part "src/input.dart";
2727
part "src/shader_lib.dart";
2828
part "src/load_obj.dart";
2929
part "src/framebuffer.dart";
30+
part "src/shader/ssao_shader.dart";
3031

3132
abstract class Animatable {
3233
void animate( double elapsed);

‎lib/src/shader/ssao_shader.dart‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
part of chronosgl;
2+
3+
4+
ShaderObject getSSAOShader() {
5+
ShaderObject shaderObject = new ShaderObject();
6+
7+
shaderObject.vertexShader = """
8+
precision mediump float;
9+
attribute vec3 aVertexPosition;
10+
attribute vec2 aTextureCoord;
11+
12+
uniform mat4 uMVMatrix;
13+
uniform mat4 uPMatrix;
14+
15+
varying vec2 vUv;
16+
17+
void main(void) {
18+
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
19+
vUv = aTextureCoord;
20+
}
21+
""";
22+
23+
shaderObject.fragmentShader = """
24+
precision mediump float;
25+
uniform float cameraNear;
26+
uniform float cameraFar;
27+
28+
//uniform float fogNear;
29+
//uniform float fogFar;
30+
31+
//uniform bool fogEnabled;
32+
const bool fogEnabled=false;
33+
34+
//uniform bool onlyAO;
35+
const bool onlyAO=false;
36+
37+
uniform vec2 size;
38+
39+
//uniform float aoClamp;
40+
const float aoClamp = 0.45;
41+
42+
//uniform float lumInfluence;
43+
const float lumInfluence = 0.4;
44+
45+
uniform sampler2D tDiffuse;
46+
uniform sampler2D tDepth;
47+
varying vec2 vUv;
48+
49+
#define DL 2.399963229728653
50+
#define EULER 2.718281828459045
51+
52+
float width = size.x;
53+
float height = size.y;
54+
float cameraFarPlusNear = cameraFar + cameraNear;
55+
float cameraFarMinusNear = cameraFar - cameraNear;
56+
float cameraCoef = 2.0 * cameraNear;
57+
58+
const int samples = 8;
59+
const float radius = 5.0;
60+
const bool useNoise = false;
61+
const float noiseAmount = 0.0003;
62+
const float diffArea = 0.4;
63+
const float gDisplace = 0.4;
64+
const vec3 onlyAOColor = vec3( 1.0, 0.7, 0.5 );
65+
66+
float unpackDepth( const in vec4 rgba_depth ) {
67+
return rgba_depth.r;
68+
}
69+
float unpackDepth2( const in vec4 rgba_depth ) {
70+
const vec4 bit_shift = vec4( 1.0 / ( 256.0 * 256.0 * 256.0 ), 1.0 / ( 256.0 * 256.0 ), 1.0 / 256.0, 1.0 );
71+
float depth = dot( rgba_depth, bit_shift );
72+
return depth;
73+
}
74+
75+
vec2 rand( const vec2 coord ) {
76+
vec2 noise;
77+
if ( useNoise ) {
78+
float nx = dot ( coord, vec2( 12.9898, 78.233 ) );
79+
float ny = dot ( coord, vec2( 12.9898, 78.233 ) * 2.0 );
80+
noise = clamp( fract ( 43758.5453 * sin( vec2( nx, ny ) ) ), 0.0, 1.0 );
81+
} else {
82+
float ff = fract( 1.0 - coord.s * ( width / 2.0 ) );
83+
float gg = fract( coord.t * ( height / 2.0 ) );
84+
noise = vec2( 0.25, 0.75 ) * vec2( ff ) + vec2( 0.75, 0.25 ) * gg;
85+
}
86+
return ( noise * 2.0 - 1.0 ) * noiseAmount;
87+
}
88+
89+
/*
90+
float doFog() {
91+
float zdepth = unpackDepth( texture2D( tDepth, vUv ) );
92+
float depth = -cameraFar * cameraNear / ( zdepth * cameraFarMinusNear - cameraFar );
93+
return smoothstep( fogNear, fogFar, depth );
94+
}
95+
*/
96+
97+
float readDepth( const in vec2 coord ) {
98+
return cameraCoef / ( cameraFarPlusNear - unpackDepth( texture2D( tDepth, coord ) ) * cameraFarMinusNear );
99+
}
100+
101+
float compareDepths( const in float depth1, const in float depth2, inout int far ) {
102+
float garea = 2.0;
103+
float diff = ( depth1 - depth2 ) * 100.0;
104+
if ( diff < gDisplace ) {
105+
garea = diffArea;
106+
} else {
107+
far = 1;
108+
}
109+
110+
float dd = diff - gDisplace;
111+
float gauss = pow( EULER, -2.0 * dd * dd / ( garea * garea ) );
112+
return gauss;
113+
}
114+
115+
float calcAO( float depth, float dw, float dh ) {
116+
float dd = radius - depth * radius;
117+
vec2 vv = vec2( dw, dh );
118+
vec2 coord1 = vUv + dd * vv;
119+
vec2 coord2 = vUv - dd * vv;
120+
float temp1 = 0.0;
121+
float temp2 = 0.0;
122+
int far = 0;
123+
temp1 = compareDepths( depth, readDepth( coord1 ), far );
124+
if ( far > 0 ) {
125+
temp2 = compareDepths( readDepth( coord2 ), depth, far );
126+
temp1 += ( 1.0 - temp1 ) * temp2;
127+
}
128+
return temp1;
129+
}
130+
131+
void main() {
132+
vec2 noise = rand( vUv );
133+
float depth = readDepth( vUv );
134+
float tt = clamp( depth, aoClamp, 1.0 );
135+
float w = ( 1.0 / width ) / tt + ( noise.x * ( 1.0 - noise.x ) );
136+
float h = ( 1.0 / height ) / tt + ( noise.y * ( 1.0 - noise.y ) );
137+
float pw;
138+
float ph;
139+
float ao;
140+
float dz = 1.0 / float( samples );
141+
float z = 1.0 - dz / 2.0;
142+
float l = 0.0;
143+
for ( int i = 0; i <= samples; i ++ ) {
144+
float r = sqrt( 1.0 - z );
145+
pw = cos( l ) * r;
146+
ph = sin( l ) * r;
147+
ao += calcAO( depth, pw * w, ph * h );
148+
z = z - dz;
149+
l = l + DL;
150+
}
151+
152+
ao /= float( samples );
153+
ao = 1.0 - ao;
154+
155+
/*
156+
if ( fogEnabled ) {
157+
ao = mix( ao, 1.0, doFog() );
158+
}
159+
*/
160+
161+
vec3 color = texture2D( tDiffuse, vUv ).rgb;
162+
vec3 lumcoeff = vec3( 0.299, 0.587, 0.114 );
163+
float lum = dot( color.rgb, lumcoeff );
164+
vec3 luminance = vec3( lum );
165+
vec3 final = vec3( color * mix( vec3( ao ), vec3( 1.0 ), luminance * lumInfluence ) );
166+
167+
if ( onlyAO ) {
168+
final = onlyAOColor * vec3( mix( vec3( ao ), vec3( 1.0 ), luminance * lumInfluence ) );
169+
}
170+
gl_FragColor = vec4( final, 1.0 );
171+
//gl_FragColor = vec4( color, 1.0 );
172+
}
173+
174+
""";
175+
176+
shaderObject.vertexPositionAttribute = "aVertexPosition";
177+
shaderObject.textureCoordinatesAttribute = "aTextureCoord";
178+
shaderObject.modelViewMatrixUniform = "uMVMatrix";
179+
shaderObject.perpectiveMatrixUniform = "uPMatrix";
180+
shaderObject.textureSamplerUniform = "tDiffuse";
181+
shaderObject.texture2SamplerUniform = "tDepth";
182+
shaderObject.cameraNear = "cameraNear";
183+
shaderObject.cameraFar = "cameraFar";
184+
shaderObject.size = "size";
185+
186+
return shaderObject;
187+
}

‎lib/src/shader_lib.dart‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
part of chronosgl;
22

3-
const String fs_precision = "precision mediump float;\n";
43
//float PI = 3.14159265358979323846264;
54

65
class ShaderObject {
@@ -14,6 +13,9 @@ class ShaderObject {
1413
String perpectiveMatrixUniform;
1514
String textureSamplerUniform;
1615
String texture2SamplerUniform;
16+
String cameraNear;
17+
String cameraFar;
18+
String size; // canvas width and height
1719
String timeUniform;
1820
}
1921

@@ -48,7 +50,7 @@ class ShaderLib {
4850
uniform sampler2D uSampler;
4951
5052
void main(void) {
51-
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
53+
gl_FragColor = texture2D(uSampler, vTextureCoord);
5254
//gl_FragColor = vec4( vec3( vTextureCoord, 0. ), 1. );
5355
}
5456
""";

‎lib/src/shader_program.dart‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ class ShaderProgram implements Drawable {
1414
UniformLocation samplerUniform;
1515
UniformLocation sampler2Uniform;
1616
UniformLocation transformationMatrixUniform;
17+
UniformLocation cameraNear;
18+
UniformLocation cameraFar;
19+
UniformLocation size;
1720
UniformLocation timeUniform;
1821

1922
bool debug = false;
@@ -46,6 +49,15 @@ class ShaderProgram implements Drawable {
4649

4750
if( shaderObject.texture2SamplerUniform != null)
4851
sampler2Uniform = getUniformLocation( shaderObject.texture2SamplerUniform);
52+
53+
if( shaderObject.cameraNear != null)
54+
cameraNear = getUniformLocation( shaderObject.cameraNear);
55+
56+
if( shaderObject.cameraFar != null)
57+
cameraFar = getUniformLocation( shaderObject.cameraFar);
58+
59+
if( shaderObject.size != null)
60+
size = getUniformLocation( shaderObject.size);
4961

5062
if( shaderObject.transformationMatrixUniform != null)
5163
transformationMatrixUniform = getUniformLocation( shaderObject.transformationMatrixUniform);
@@ -124,6 +136,16 @@ class ShaderProgram implements Drawable {
124136

125137
Camera camera = chronosGL.getCamera();
126138
camera.getMVMatrix(mvMatrix, false);
139+
140+
if( shaderObject.cameraNear != null)
141+
gl.uniform1f(cameraNear, chronosGL.near);;
142+
143+
if( shaderObject.cameraFar != null)
144+
gl.uniform1f(cameraFar, chronosGL.far);;
145+
146+
if( shaderObject.size != null)
147+
gl.uniform2f(size, chronosGL._canvas.clientWidth, chronosGL._canvas.clientHeight );
148+
127149

128150
//print( "mvM: ${mvMatrix}");
129151

0 commit comments

Comments
 (0)