pascal
/
Pas2JS-WebGL-demos
mirror of https://github.com/genericptr/Pas2JS-WebGL


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
							<html>
  <head>
    <meta charset="utf-8"/>
    <script type="application/javascript" src="../Pas2JS_WebGL_Terrain.js"></script>
  </head>
  <body>
    <pre id="debug-console"></pre>

  	<script type="application/glsl" id="vertex.glsl">
      attribute vec3 in_position;
      attribute vec2 in_texCoord;
      attribute vec3 in_normal;

      uniform mat4 projTransform;
      uniform mat4 viewTransform;
      uniform mat4 modelTransform;
      uniform mat4 inverseViewTransform;

      uniform vec3 lightPosition;

      varying vec3 toLight;
      varying vec3 surfaceNormal;
      varying vec3 toCamera;
      varying vec2 vertexTexCoord;
      varying float visibility;

      // constants
      const float density = 0.02;
      const float gradient = 1.5;

      void main() {
        vec4 worldPosition = modelTransform * vec4(in_position, 1);
        vec4 positionRelativeToCamera = viewTransform * worldPosition;
        gl_Position = projTransform * viewTransform * worldPosition;
        surfaceNormal = (modelTransform * vec4(in_normal, 0)).xyz;
        toLight = lightPosition - worldPosition.xyz;
        toCamera = (inverseViewTransform * vec4(0, 0, 0, 1)).xyz - worldPosition.xyz;
        vertexTexCoord = in_texCoord;

        // fog
        // TODO: make this relative to some actual distance in glcoords
        float dist = length(positionRelativeToCamera.xyz) / 6.0;
        visibility = exp(-pow((dist * density), gradient));
        visibility = clamp(visibility, 0.0, 1.0);
      }
  	</script>
  	<script type="application/glsl" id="fragment.glsl">
      precision mediump float;

      uniform vec3 lightColor;
      uniform float shineDamper;
      uniform float reflectivity;

      uniform sampler2D sampler;

      varying vec3 toLight;
      varying vec3 surfaceNormal;
      varying vec3 toCamera;
      varying vec2 vertexTexCoord;
      varying float visibility;

      const vec3 skyColor = vec3(0.9, 0.9, 0.9);
      const float ambientLight = 0.3;

      void main() {

        vec3 unitToLight = normalize(toLight);
        vec3 unitSurfaceNormal = normalize(surfaceNormal);

        float brightness = dot(unitToLight, unitSurfaceNormal);
        brightness = max(brightness, 0.0);
        vec3 diffuseLight = lightColor * brightness;
        diffuseLight = max(diffuseLight, ambientLight);

        vec3 lightDirection = -unitToLight;
        vec3 reflectedDirection = reflect(lightDirection, unitSurfaceNormal);
        float specular = dot(reflectedDirection, normalize(toCamera));
        specular = max(specular, 0.0);
        float damper = pow(specular, shineDamper);
        vec3 specularColor = damper * reflectivity * lightColor;

        // add color and light
        vec4 diffuseColor = texture2D(sampler, vertexTexCoord);
        vec4 finalColor = vec4(diffuseLight, 1) * diffuseColor + vec4(specularColor, 1);

        finalColor = mix(vec4(skyColor, 1.0), finalColor, visibility);

        gl_FragColor = finalColor;
      }
  	</script>
    <script type="application/javascript">
     rtl.run();
    </script>
  </body>
</html>