Notebooks 2.0 is here.
shaders = ({
vs: `#version 300 es
precision highp float;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
uniform mat4 normalMatrix;
uniform mat4 lightviewMatrix;
in vec3 position;
in vec3 normal;
out vec3 fragNormal;
out vec3 fragPosition;
out vec4 fragTexture;
void main () {
fragNormal = normalize( ( normalMatrix*vec4( normal,0.0f ) ).xyz );
vec4 positionWorld = modelMatrix * vec4( position, 1.0 );
fragPosition = (positionWorld).xyz;
fragTexture = (lightviewMatrix* positionWorld);
gl_Position = projectionMatrix*viewMatrix*positionWorld;
}`,
fs: `#version 300 es
precision highp float;
out vec4 outColor;
in vec3 fragNormal;
in vec3 fragPosition;
in vec4 fragTexture;
uniform vec4 lightPosition;
uniform vec3 materialColor;
uniform sampler2D detxt;
void main () {
vec3 L = normalize(lightPosition.xyz-fragPosition);
vec3 textureCoordinate = (fragTexture.xyz/fragTexture.w) * 0.5f + 0.5f;
float epsilon = max(0.0005f * (1.0 - dot(fragNormal, L)), 0.0001f);
float shadowMapSample = texture(detxt, textureCoordinate.xy).r;// TODO : sample the shadow map at the correct UV.
// Compare shadowMapSample to textureCoordinate.z
// if textureCoordinate.z is larger, then the fragment is in the shadow.
vec3 diffuse = materialColor * clamp(dot(L,fragNormal), 0.,1.);
float pcf = 1.;
if(shadowMapSample < textureCoordinate.z - epsilon) {
// This is my (failed) attempt at doing the pcf stuff. I don't really know why it doesn't work, but I'm too lazy to debug it...
// float ul, u, ur, l, m, r, dl, d, dr;
// ul = texture(detxt, vec2(textureCoordinate.x - 1., textureCoordinate.y + 1.)).r;
// u = texture(detxt, vec2(textureCoordinate.x , textureCoordinate.y + 1.)).r;
// ur = texture(detxt, vec2(textureCoordinate.x + 1., textureCoordinate.y + 1.)).r;
// l = texture(detxt, vec2(textureCoordinate.x - 1., textureCoordinate.y )).r;
// r = texture(detxt, vec2(textureCoordinate.x , textureCoordinate.y + 1.)).r;
// dl = texture(detxt, vec2(textureCoordinate.x - 1., textureCoordinate.y - 1.)).r;
// d = texture(detxt, vec2(textureCoordinate.x , textureCoordinate.y - 1.)).r;
// dr = texture(detxt, vec2(textureCoordinate.x + 1., textureCoordinate.y - 1.)).r;
// pcf = (ul + u + ur + l + r + dl + d + dr) / 8.;
pcf = 0.;
}
outColor = vec4(diffuse.x * pcf, diffuse.y * pcf, diffuse.z * pcf, 1);
}`
});
uniformsPlane = ({
modelMatrix: m4.identity(),
lightPosition : [1,5,1,1],
materialColor: hex2rgb(colorParameters.plane),
projectionMatrix: m4.perspective(viewParameters.fov*Math.PI/180, gl.canvas.width/gl.canvas.height, 0.1, 20),
viewMatrix: m4.inverse( m4.lookAt(transformedEyePosition, lookAtPOsition, [0,1,0])),
lightviewMatrix: lightViewMatrix,
detxt : depthTexture,
normalMatrix: m4.identity(),
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
