|
|
@@ -0,0 +1,1465 @@
|
|
|
+const { mat4, mat3, vec2, vec3, vec4, quat } = glMatrix;
|
|
|
+
|
|
|
+let GL = null;
|
|
|
+
|
|
|
+const _OPAQUE_VS = `#version 300 es
|
|
|
+precision highp float;
|
|
|
+
|
|
|
+
|
|
|
+uniform mat3 normalMatrix;
|
|
|
+uniform mat4 modelMatrix;
|
|
|
+uniform mat4 modelViewMatrix;
|
|
|
+uniform mat4 projectionMatrix;
|
|
|
+
|
|
|
+in vec3 position;
|
|
|
+in vec3 normal;
|
|
|
+in vec3 tangent;
|
|
|
+in vec4 colour;
|
|
|
+in vec2 uv0;
|
|
|
+
|
|
|
+out vec2 vUV0;
|
|
|
+out vec4 vColour;
|
|
|
+
|
|
|
+void main(void) {
|
|
|
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
|
+ vColour = colour;
|
|
|
+ vUV0 = uv0;
|
|
|
+}
|
|
|
+`;
|
|
|
+
|
|
|
+
|
|
|
+const _OPAQUE_FS = `#version 300 es
|
|
|
+precision highp float;
|
|
|
+
|
|
|
+
|
|
|
+uniform sampler2D diffuseTexture;
|
|
|
+uniform sampler2D normalTexture;
|
|
|
+uniform sampler2D gBuffer_Light;
|
|
|
+uniform vec4 resolution;
|
|
|
+
|
|
|
+in vec4 vColour;
|
|
|
+in vec2 vUV0;
|
|
|
+
|
|
|
+
|
|
|
+layout(location = 0) out vec4 out_FragColour;
|
|
|
+
|
|
|
+
|
|
|
+void main(void) {
|
|
|
+ vec2 uv = gl_FragCoord.xy / resolution.xy;
|
|
|
+ vec4 lightSample = texture(gBuffer_Light, uv);
|
|
|
+ vec4 albedo = texture(diffuseTexture, vUV0);
|
|
|
+
|
|
|
+ out_FragColour = (albedo * vec4(lightSample.xyz, 1.0) +
|
|
|
+ lightSample.w * vec4(0.3, 0.6, 0.1, 0.0));
|
|
|
+}
|
|
|
+`;
|
|
|
+
|
|
|
+
|
|
|
+const _QUAD_VS = `#version 300 es
|
|
|
+precision highp float;
|
|
|
+
|
|
|
+
|
|
|
+uniform mat4 modelViewMatrix;
|
|
|
+uniform mat4 projectionMatrix;
|
|
|
+
|
|
|
+in vec3 position;
|
|
|
+in vec2 uv0;
|
|
|
+
|
|
|
+
|
|
|
+void main(void) {
|
|
|
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
|
+}
|
|
|
+`;
|
|
|
+
|
|
|
+
|
|
|
+const _QUAD_FS = `#version 300 es
|
|
|
+precision highp float;
|
|
|
+
|
|
|
+
|
|
|
+uniform sampler2D gBuffer_Normal;
|
|
|
+uniform sampler2D gBuffer_Position;
|
|
|
+
|
|
|
+uniform vec3 lightColour;
|
|
|
+
|
|
|
+#define _LIGHT_TYPE_POINT
|
|
|
+
|
|
|
+#ifdef _LIGHT_TYPE_DIRECTIONAL
|
|
|
+uniform vec3 lightDirection;
|
|
|
+#endif
|
|
|
+
|
|
|
+uniform vec3 lightPosition;
|
|
|
+uniform vec3 lightAttenuation;
|
|
|
+
|
|
|
+uniform vec3 cameraPosition;
|
|
|
+uniform vec4 resolution;
|
|
|
+
|
|
|
+
|
|
|
+out vec4 out_FragColour;
|
|
|
+
|
|
|
+#define saturate(a) clamp(a, 0.0, 1.0)
|
|
|
+
|
|
|
+float _SmootherStep(float x, float a, float b) {
|
|
|
+ x = x * x * x * (x * (x * 6.0 - 15.0) + 10.0);
|
|
|
+ return x * (b - a) + a;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+vec2 _CalculatePhong(vec3 lightDirection, vec3 cameraPosition, vec3 position, vec3 normal) {
|
|
|
+ vec3 viewDirection = normalize(cameraPosition - position);
|
|
|
+ vec3 H = normalize(lightDirection.xyz + viewDirection);
|
|
|
+ float NdotH = dot(normal.xyz, H);
|
|
|
+ float specular = saturate(pow(NdotH, 32.0));
|
|
|
+ float diffuse = saturate(dot(lightDirection.xyz, normal.xyz));
|
|
|
+
|
|
|
+ return vec2(diffuse, diffuse * specular);
|
|
|
+}
|
|
|
+
|
|
|
+vec4 _CalculateLight_Directional(
|
|
|
+ vec3 lightDirection, vec3 lightColour, vec3 position, vec3 normal) {
|
|
|
+
|
|
|
+ vec2 lightSample = _CalculatePhong(-lightDirection, cameraPosition, position, normal);
|
|
|
+
|
|
|
+ return vec4(lightSample.x * lightColour, lightSample.y);
|
|
|
+}
|
|
|
+
|
|
|
+vec4 _CalculateLight_Point(
|
|
|
+ vec3 lightPosition, vec3 lightAttenuation, vec3 lightColour, vec3 position, vec3 normal) {
|
|
|
+
|
|
|
+ vec3 dirToLight = lightPosition - position;
|
|
|
+ float lightDistance = length(dirToLight);
|
|
|
+ dirToLight = normalize(dirToLight);
|
|
|
+
|
|
|
+ vec2 lightSample = _CalculatePhong(dirToLight, cameraPosition, position, normal);
|
|
|
+ float falloff = saturate((lightDistance - lightAttenuation.x) / lightAttenuation.y);
|
|
|
+
|
|
|
+ lightSample *= _SmootherStep(falloff, 1.0, 0.0);
|
|
|
+
|
|
|
+ return vec4(lightSample.x * lightColour, lightSample.y);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+void main(void) {
|
|
|
+ vec2 uv = gl_FragCoord.xy / resolution.xy;
|
|
|
+
|
|
|
+ vec4 normal = texture(gBuffer_Normal, uv);
|
|
|
+ vec4 position = texture(gBuffer_Position, uv);
|
|
|
+
|
|
|
+#ifdef _LIGHT_TYPE_DIRECTIONAL
|
|
|
+ vec4 lightSample = _CalculateLight_Directional(
|
|
|
+ lightDirection, lightColour, position.xyz, normal.xyz);
|
|
|
+#elif defined(_LIGHT_TYPE_POINT)
|
|
|
+ vec4 lightSample = _CalculateLight_Point(
|
|
|
+ lightPosition, lightAttenuation, lightColour, position.xyz, normal.xyz);
|
|
|
+#endif
|
|
|
+
|
|
|
+ out_FragColour = lightSample;
|
|
|
+}
|
|
|
+`;
|
|
|
+
|
|
|
+const _QUAD_COLOUR_VS = `#version 300 es
|
|
|
+precision highp float;
|
|
|
+
|
|
|
+
|
|
|
+uniform mat4 modelViewMatrix;
|
|
|
+uniform mat4 projectionMatrix;
|
|
|
+
|
|
|
+in vec3 position;
|
|
|
+in vec2 uv0;
|
|
|
+
|
|
|
+
|
|
|
+void main(void) {
|
|
|
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
|
+}
|
|
|
+`;
|
|
|
+
|
|
|
+
|
|
|
+const _QUAD_COLOUR_FS = `#version 300 es
|
|
|
+precision highp float;
|
|
|
+
|
|
|
+
|
|
|
+uniform sampler2D gQuadTexture;
|
|
|
+uniform vec4 resolution;
|
|
|
+
|
|
|
+out vec4 out_FragColour;
|
|
|
+
|
|
|
+
|
|
|
+void main(void) {
|
|
|
+ vec2 uv = gl_FragCoord.xy / resolution.xy;
|
|
|
+
|
|
|
+ out_FragColour = texture(gQuadTexture, uv);
|
|
|
+}
|
|
|
+`;
|
|
|
+
|
|
|
+const _SIMPLE_VS = `#version 300 es
|
|
|
+precision highp float;
|
|
|
+
|
|
|
+
|
|
|
+uniform mat3 normalMatrix;
|
|
|
+uniform mat4 modelMatrix;
|
|
|
+uniform mat4 modelViewMatrix;
|
|
|
+uniform mat4 projectionMatrix;
|
|
|
+
|
|
|
+in vec3 position;
|
|
|
+in vec3 normal;
|
|
|
+in vec3 tangent;
|
|
|
+in vec2 uv0;
|
|
|
+
|
|
|
+out vec4 vWSPosition;
|
|
|
+out vec3 vNormal;
|
|
|
+out vec3 vTangent;
|
|
|
+out vec2 vUV0;
|
|
|
+
|
|
|
+void main(void) {
|
|
|
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
|
+ vNormal = normalize(normalMatrix * normal);
|
|
|
+ vTangent = normalize(normalMatrix * tangent);
|
|
|
+ vWSPosition = modelMatrix * vec4(position, 1.0);
|
|
|
+ vUV0 = uv0;
|
|
|
+}
|
|
|
+`;
|
|
|
+
|
|
|
+
|
|
|
+const _SIMPLE_FS = `#version 300 es
|
|
|
+precision highp float;
|
|
|
+
|
|
|
+
|
|
|
+uniform sampler2D normalTexture;
|
|
|
+
|
|
|
+in vec4 vWSPosition;
|
|
|
+in vec3 vNormal;
|
|
|
+in vec3 vTangent;
|
|
|
+in vec2 vUV0;
|
|
|
+
|
|
|
+layout(location = 0) out vec4 out_Normals;
|
|
|
+layout(location = 1) out vec4 out_Position;
|
|
|
+
|
|
|
+
|
|
|
+void main(void) {
|
|
|
+ vec3 bitangent = normalize(cross(vTangent, vNormal));
|
|
|
+ mat3 tbn = mat3(vTangent, bitangent, vNormal);
|
|
|
+ vec3 normalSample = normalize(texture(normalTexture, vUV0).xyz * 2.0 - 1.0);
|
|
|
+ vec3 vsNormal = normalize(tbn * normalSample);
|
|
|
+
|
|
|
+ out_Normals = vec4(vsNormal, 1.0);
|
|
|
+ out_Position = vWSPosition;
|
|
|
+}
|
|
|
+`;
|
|
|
+
|
|
|
+class Shader {
|
|
|
+ constructor(vsrc, fsrc, defines) {
|
|
|
+ defines = defines || [];
|
|
|
+
|
|
|
+ this._Init(vsrc, fsrc, defines);
|
|
|
+ }
|
|
|
+
|
|
|
+ _Init(vsrc, fsrc, defines) {
|
|
|
+ this._defines = defines;
|
|
|
+
|
|
|
+ vsrc = this._ModifySourceWithDefines(vsrc, defines);
|
|
|
+ fsrc = this._ModifySourceWithDefines(fsrc, defines);
|
|
|
+
|
|
|
+ this._vsSource = vsrc;
|
|
|
+ this._fsSource = fsrc;
|
|
|
+
|
|
|
+ this._vsProgram = this._Load(GL.VERTEX_SHADER, vsrc);
|
|
|
+ this._fsProgram = this._Load(GL.FRAGMENT_SHADER, fsrc);
|
|
|
+
|
|
|
+ this._shader = GL.createProgram();
|
|
|
+ GL.attachShader(this._shader, this._vsProgram);
|
|
|
+ GL.attachShader(this._shader, this._fsProgram);
|
|
|
+ GL.linkProgram(this._shader);
|
|
|
+
|
|
|
+ if (!GL.getProgramParameter(this._shader, GL.LINK_STATUS)) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.attribs = {
|
|
|
+ positions: GL.getAttribLocation(this._shader, 'position'),
|
|
|
+ normals: GL.getAttribLocation(this._shader, 'normal'),
|
|
|
+ tangents: GL.getAttribLocation(this._shader, 'tangent'),
|
|
|
+ uvs: GL.getAttribLocation(this._shader, 'uv0'),
|
|
|
+ colours: GL.getAttribLocation(this._shader, 'colour'),
|
|
|
+ };
|
|
|
+ this.uniforms = {
|
|
|
+ projectionMatrix: {
|
|
|
+ type: 'mat4',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'projectionMatrix')
|
|
|
+ },
|
|
|
+ modelViewMatrix: {
|
|
|
+ type: 'mat4',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'modelViewMatrix'),
|
|
|
+ },
|
|
|
+ modelMatrix: {
|
|
|
+ type: 'mat4',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'modelMatrix'),
|
|
|
+ },
|
|
|
+ normalMatrix: {
|
|
|
+ type: 'mat3',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'normalMatrix'),
|
|
|
+ },
|
|
|
+ resolution: {
|
|
|
+ type: 'vec4',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'resolution'),
|
|
|
+ },
|
|
|
+ lightColour: {
|
|
|
+ type: 'vec3',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'lightColour'),
|
|
|
+ },
|
|
|
+ lightDirection: {
|
|
|
+ type: 'vec3',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'lightDirection'),
|
|
|
+ },
|
|
|
+ lightPosition: {
|
|
|
+ type: 'vec3',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'lightPosition'),
|
|
|
+ },
|
|
|
+ lightAttenuation: {
|
|
|
+ type: 'vec3',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'lightAttenuation'),
|
|
|
+ },
|
|
|
+ cameraPosition: {
|
|
|
+ type: 'vec3',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'cameraPosition'),
|
|
|
+ },
|
|
|
+ diffuseTexture: {
|
|
|
+ type: 'texture',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'diffuseTexture'),
|
|
|
+ },
|
|
|
+ normalTexture: {
|
|
|
+ type: 'texture',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'normalTexture'),
|
|
|
+ },
|
|
|
+ gBuffer_Light: {
|
|
|
+ type: 'texture',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'gBuffer_Light'),
|
|
|
+ },
|
|
|
+ gBuffer_Colour: {
|
|
|
+ type: 'texture',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'gBuffer_Colour'),
|
|
|
+ },
|
|
|
+ gBuffer_Normal: {
|
|
|
+ type: 'texture',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'gBuffer_Normal'),
|
|
|
+ },
|
|
|
+ gBuffer_Position: {
|
|
|
+ type: 'texture',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'gBuffer_Position'),
|
|
|
+ },
|
|
|
+ gQuadTexture: {
|
|
|
+ type: 'texture',
|
|
|
+ location: GL.getUniformLocation(this._shader, 'gQuadTexture'),
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ _ModifySourceWithDefines(src, defines) {
|
|
|
+ const lines = src.split('\n');
|
|
|
+
|
|
|
+ const defineStrings = defines.map(d => '#define ' + d);
|
|
|
+
|
|
|
+ lines.splice(3, 0, defineStrings);
|
|
|
+
|
|
|
+ return lines.join('\n');
|
|
|
+ }
|
|
|
+
|
|
|
+ _Load(type, source) {
|
|
|
+ const shader = GL.createShader(type);
|
|
|
+
|
|
|
+ GL.shaderSource(shader, source);
|
|
|
+ GL.compileShader(shader);
|
|
|
+
|
|
|
+ if (!GL.getShaderParameter(shader, GL.COMPILE_STATUS)) {
|
|
|
+ console.log(GL.getShaderInfoLog(shader));
|
|
|
+ console.log(source);
|
|
|
+ GL.deleteShader(shader);
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ return shader;
|
|
|
+ }
|
|
|
+
|
|
|
+ Bind() {
|
|
|
+ GL.useProgram(this._shader);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class ShaderInstance {
|
|
|
+ constructor(shader) {
|
|
|
+ this._shaderData = shader;
|
|
|
+ this._uniforms = {};
|
|
|
+ for (let k in shader.uniforms) {
|
|
|
+ this._uniforms[k] = {
|
|
|
+ location: shader.uniforms[k].location,
|
|
|
+ type: shader.uniforms[k].type,
|
|
|
+ value: null
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this._attribs = {...shader.attribs};
|
|
|
+ }
|
|
|
+
|
|
|
+ SetMat4(name, m) {
|
|
|
+ this._uniforms[name].value = m;
|
|
|
+ }
|
|
|
+
|
|
|
+ SetMat3(name, m) {
|
|
|
+ this._uniforms[name].value = m;
|
|
|
+ }
|
|
|
+
|
|
|
+ SetVec4(name, v) {
|
|
|
+ this._uniforms[name].value = v;
|
|
|
+ }
|
|
|
+
|
|
|
+ SetVec3(name, v) {
|
|
|
+ this._uniforms[name].value = v;
|
|
|
+ }
|
|
|
+
|
|
|
+ SetTexture(name, t) {
|
|
|
+ this._uniforms[name].value = t;
|
|
|
+ }
|
|
|
+
|
|
|
+ Bind(constants) {
|
|
|
+ this._shaderData.Bind();
|
|
|
+
|
|
|
+ let textureIndex = 0;
|
|
|
+
|
|
|
+ for (let k in this._uniforms) {
|
|
|
+ const v = this._uniforms[k];
|
|
|
+
|
|
|
+ let value = constants[k];
|
|
|
+ if (v.value) {
|
|
|
+ value = v.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (value && v.location) {
|
|
|
+ const t = v.type;
|
|
|
+
|
|
|
+ if (t == 'mat4') {
|
|
|
+ GL.uniformMatrix4fv(v.location, false, value);
|
|
|
+ } else if (t == 'mat3') {
|
|
|
+ GL.uniformMatrix3fv(v.location, false, value);
|
|
|
+ } else if (t == 'vec4') {
|
|
|
+ GL.uniform4fv(v.location, value);
|
|
|
+ } else if (t == 'vec3') {
|
|
|
+ GL.uniform3fv(v.location, value);
|
|
|
+ } else if (t == 'texture') {
|
|
|
+ value.Bind(textureIndex);
|
|
|
+ GL.uniform1i(v.location, textureIndex);
|
|
|
+ textureIndex++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class Texture {
|
|
|
+ constructor() {
|
|
|
+ }
|
|
|
+
|
|
|
+ Load(src) {
|
|
|
+ this._name = src;
|
|
|
+ this._Load(src);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+
|
|
|
+ _Load(src) {
|
|
|
+ this._texture = GL.createTexture();
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, this._texture);
|
|
|
+ GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA,
|
|
|
+ 1, 1, 0, GL.RGBA, GL.UNSIGNED_BYTE,
|
|
|
+ new Uint8Array([0, 0, 255, 255]));
|
|
|
+
|
|
|
+ const img = new Image();
|
|
|
+ img.src = src;
|
|
|
+ img.onload = () => {
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, this._texture);
|
|
|
+ GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA, GL.RGBA, GL.UNSIGNED_BYTE, img);
|
|
|
+ GL.generateMipmap(GL.TEXTURE_2D);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR_MIPMAP_LINEAR);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.LINEAR);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ Bind(index) {
|
|
|
+ if (!this._texture) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ GL.activeTexture(GL.TEXTURE0 + index);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, this._texture);
|
|
|
+ }
|
|
|
+
|
|
|
+ Unbind() {
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class Mesh {
|
|
|
+ constructor() {
|
|
|
+ this._buffers = {};
|
|
|
+
|
|
|
+ this._OnInit();
|
|
|
+ }
|
|
|
+
|
|
|
+ _BufferData(info, name) {
|
|
|
+ if (name == 'index') {
|
|
|
+ info.buffer = GL.createBuffer();
|
|
|
+ GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, info.buffer);
|
|
|
+ GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, new Uint16Array(info.data), GL.STATIC_DRAW);
|
|
|
+ } else {
|
|
|
+ info.buffer = GL.createBuffer();
|
|
|
+ GL.bindBuffer(GL.ARRAY_BUFFER, info.buffer);
|
|
|
+ GL.bufferData(GL.ARRAY_BUFFER, new Float32Array(info.data), GL.STATIC_DRAW);
|
|
|
+ }
|
|
|
+
|
|
|
+ this._buffers[name] = info;
|
|
|
+ }
|
|
|
+
|
|
|
+ Bind(shader) {
|
|
|
+ for (let k in this._buffers) {
|
|
|
+ if (shader._attribs[k] == -1) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+
|
|
|
+ const b = this._buffers[k];
|
|
|
+
|
|
|
+ if (k == 'index') {
|
|
|
+ GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, b.buffer);
|
|
|
+ } else {
|
|
|
+ GL.bindBuffer(GL.ARRAY_BUFFER, b.buffer);
|
|
|
+ GL.vertexAttribPointer(shader._attribs[k], b.size, GL.FLOAT, false, 0, 0);
|
|
|
+ GL.enableVertexAttribArray(shader._attribs[k]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ Draw() {
|
|
|
+ const vertexCount = this._buffers.index.data.length;
|
|
|
+ GL.drawElements(GL.TRIANGLES, vertexCount, GL.UNSIGNED_SHORT, 0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class MeshInstance {
|
|
|
+ constructor(mesh, shaders, shaderParams) {
|
|
|
+ this._mesh = mesh;
|
|
|
+ this._shaders = shaders;
|
|
|
+
|
|
|
+ shaderParams = shaderParams || {};
|
|
|
+ for (let sk in shaders) {
|
|
|
+ const s = shaders[sk];
|
|
|
+ for (let k in shaderParams) {
|
|
|
+ s.SetTexture(k, shaderParams[k]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this._position = vec3.create();
|
|
|
+ this._scale = vec3.fromValues(1, 1, 1);
|
|
|
+ this._rotation = quat.create();
|
|
|
+ }
|
|
|
+
|
|
|
+ SetPosition(x, y, z) {
|
|
|
+ vec3.set(this._position, x, y, z);
|
|
|
+ }
|
|
|
+
|
|
|
+ RotateX(rad) {
|
|
|
+ quat.rotateX(this._rotation, this._rotation, rad);
|
|
|
+ }
|
|
|
+
|
|
|
+ RotateY(rad) {
|
|
|
+ quat.rotateY(this._rotation, this._rotation, rad);
|
|
|
+ }
|
|
|
+
|
|
|
+ Scale(x, y, z) {
|
|
|
+ vec3.set(this._scale, x, y, z);
|
|
|
+ }
|
|
|
+
|
|
|
+ Bind(constants, pass) {
|
|
|
+ const modelMatrix = mat4.create();
|
|
|
+ mat4.fromRotationTranslationScale(
|
|
|
+ modelMatrix, this._rotation, this._position, this._scale);
|
|
|
+
|
|
|
+ // TODO View matrix
|
|
|
+ const viewMatrix = constants['viewMatrix'];
|
|
|
+ const modelViewMatrix = mat4.create();
|
|
|
+ mat4.multiply(modelViewMatrix, viewMatrix, modelMatrix);
|
|
|
+
|
|
|
+ const normalMatrix = mat3.create();
|
|
|
+ mat3.fromMat4(normalMatrix, modelMatrix);
|
|
|
+ mat3.invert(normalMatrix, normalMatrix);
|
|
|
+ mat3.transpose(normalMatrix, normalMatrix);
|
|
|
+
|
|
|
+ const s = this._shaders[pass];
|
|
|
+
|
|
|
+ s.SetMat4('modelViewMatrix', modelViewMatrix);
|
|
|
+ s.SetMat4('modelMatrix', modelMatrix);
|
|
|
+ s.SetMat3('normalMatrix', normalMatrix);
|
|
|
+ s.Bind(constants);
|
|
|
+
|
|
|
+ this._mesh.Bind(s);
|
|
|
+ }
|
|
|
+
|
|
|
+ Draw() {
|
|
|
+ this._mesh.Draw();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class Box extends Mesh {
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+ }
|
|
|
+
|
|
|
+ _OnInit() {
|
|
|
+ const positions = [
|
|
|
+ // Front face
|
|
|
+ -1.0, -1.0, 1.0,
|
|
|
+ 1.0, -1.0, 1.0,
|
|
|
+ 1.0, 1.0, 1.0,
|
|
|
+ -1.0, 1.0, 1.0,
|
|
|
+
|
|
|
+ // Back face
|
|
|
+ -1.0, -1.0, -1.0,
|
|
|
+ -1.0, 1.0, -1.0,
|
|
|
+ 1.0, 1.0, -1.0,
|
|
|
+ 1.0, -1.0, -1.0,
|
|
|
+
|
|
|
+ // Top face
|
|
|
+ -1.0, 1.0, -1.0,
|
|
|
+ -1.0, 1.0, 1.0,
|
|
|
+ 1.0, 1.0, 1.0,
|
|
|
+ 1.0, 1.0, -1.0,
|
|
|
+
|
|
|
+ // Bottom face
|
|
|
+ -1.0, -1.0, -1.0,
|
|
|
+ 1.0, -1.0, -1.0,
|
|
|
+ 1.0, -1.0, 1.0,
|
|
|
+ -1.0, -1.0, 1.0,
|
|
|
+
|
|
|
+ // Right face
|
|
|
+ 1.0, -1.0, -1.0,
|
|
|
+ 1.0, 1.0, -1.0,
|
|
|
+ 1.0, 1.0, 1.0,
|
|
|
+ 1.0, -1.0, 1.0,
|
|
|
+
|
|
|
+ // Left face
|
|
|
+ -1.0, -1.0, -1.0,
|
|
|
+ -1.0, -1.0, 1.0,
|
|
|
+ -1.0, 1.0, 1.0,
|
|
|
+ -1.0, 1.0, -1.0,
|
|
|
+ ];
|
|
|
+
|
|
|
+ const uvs = [
|
|
|
+ // Front face
|
|
|
+ 0.0, 0.0,
|
|
|
+ 1.0, 0.0,
|
|
|
+ 1.0, 1.0,
|
|
|
+ 0.0, 1.0,
|
|
|
+
|
|
|
+ // Back face
|
|
|
+ 0.0, 0.0,
|
|
|
+ 1.0, 0.0,
|
|
|
+ 1.0, 1.0,
|
|
|
+ 0.0, 1.0,
|
|
|
+
|
|
|
+ // Top face
|
|
|
+ 0.0, 0.0,
|
|
|
+ 1.0, 0.0,
|
|
|
+ 1.0, 1.0,
|
|
|
+ 0.0, 1.0,
|
|
|
+
|
|
|
+ // Bottom face
|
|
|
+ 0.0, 0.0,
|
|
|
+ 1.0, 0.0,
|
|
|
+ 1.0, 1.0,
|
|
|
+ 0.0, 1.0,
|
|
|
+
|
|
|
+ // Right face
|
|
|
+ 0.0, 0.0,
|
|
|
+ 1.0, 0.0,
|
|
|
+ 1.0, 1.0,
|
|
|
+ 0.0, 1.0,
|
|
|
+
|
|
|
+ // Left face
|
|
|
+ 0.0, 0.0,
|
|
|
+ 1.0, 0.0,
|
|
|
+ 1.0, 1.0,
|
|
|
+ 0.0, 1.0,
|
|
|
+ ];
|
|
|
+
|
|
|
+ const normals = [
|
|
|
+ // Front face
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+
|
|
|
+ // Back face
|
|
|
+ 0.0, 0.0, -1.0,
|
|
|
+ 0.0, 0.0, -1.0,
|
|
|
+ 0.0, 0.0, -1.0,
|
|
|
+ 0.0, 0.0, -1.0,
|
|
|
+
|
|
|
+ // Top face
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+
|
|
|
+ // Bottom face
|
|
|
+ 0.0, -1.0, 0.0,
|
|
|
+ 0.0, -1.0, 0.0,
|
|
|
+ 0.0, -1.0, 0.0,
|
|
|
+ 0.0, -1.0, 0.0,
|
|
|
+
|
|
|
+ // Right face
|
|
|
+ 1.0, 0.0, 0.0,
|
|
|
+ 1.0, 0.0, 0.0,
|
|
|
+ 1.0, 0.0, 0.0,
|
|
|
+ 1.0, 0.0, 0.0,
|
|
|
+
|
|
|
+ // Left face
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ ];
|
|
|
+
|
|
|
+ const tangents = [
|
|
|
+ // Front face
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+
|
|
|
+ // Back face
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+
|
|
|
+ // Top face
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+
|
|
|
+ // Bottom face
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+
|
|
|
+ // Right face
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+ 0.0, 1.0, 0.0,
|
|
|
+
|
|
|
+ // Left face
|
|
|
+ 0.0, 0.0, -1.0,
|
|
|
+ 0.0, 0.0, -1.0,
|
|
|
+ 0.0, 0.0, -1.0,
|
|
|
+ 0.0, 0.0, -1.0,
|
|
|
+ ];
|
|
|
+
|
|
|
+ const faceColors = [
|
|
|
+ [1.0, 1.0, 1.0, 1.0], // Front face: white
|
|
|
+ [1.0, 0.0, 0.0, 1.0], // Back face: red
|
|
|
+ [0.0, 1.0, 0.0, 1.0], // Top face: green
|
|
|
+ [0.0, 0.0, 1.0, 1.0], // Bottom face: blue
|
|
|
+ [1.0, 1.0, 0.0, 1.0], // Right face: yellow
|
|
|
+ [1.0, 0.0, 1.0, 1.0], // Left face: purple
|
|
|
+ ];
|
|
|
+
|
|
|
+ // Convert the array of colors into a table for all the vertices.
|
|
|
+
|
|
|
+ let colours = [];
|
|
|
+
|
|
|
+ for (var j = 0; j < faceColors.length; ++j) {
|
|
|
+ const c = faceColors[j];
|
|
|
+
|
|
|
+ // Repeat each color four times for the four vertices of the face
|
|
|
+ colours = colours.concat(c, c, c, c);
|
|
|
+ }
|
|
|
+
|
|
|
+ const indices = [
|
|
|
+ 0, 1, 2, 0, 2, 3, // front
|
|
|
+ 4, 5, 6, 4, 6, 7, // back
|
|
|
+ 8, 9, 10, 8, 10, 11, // top
|
|
|
+ 12, 13, 14, 12, 14, 15, // bottom
|
|
|
+ 16, 17, 18, 16, 18, 19, // right
|
|
|
+ 20, 21, 22, 20, 22, 23, // left
|
|
|
+ ];
|
|
|
+
|
|
|
+ this._BufferData({size: 3, data: positions}, 'positions');
|
|
|
+ this._BufferData({size: 3, data: normals}, 'normals');
|
|
|
+ this._BufferData({size: 3, data: tangents}, 'tangents');
|
|
|
+ this._BufferData({size: 4, data: colours}, 'colours');
|
|
|
+ this._BufferData({size: 2, data: uvs}, 'uvs');
|
|
|
+ this._BufferData({data: indices}, 'index');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class Quad extends Mesh {
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+ }
|
|
|
+
|
|
|
+ _OnInit() {
|
|
|
+ const positions = [
|
|
|
+ -0.5, -0.5, 1.0,
|
|
|
+ 0.5, -0.5, 1.0,
|
|
|
+ 0.5, 0.5, 1.0,
|
|
|
+ -0.5, 0.5, 1.0,
|
|
|
+ ];
|
|
|
+
|
|
|
+ const normals = [
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ 0.0, 0.0, 1.0,
|
|
|
+ ];
|
|
|
+
|
|
|
+ const tangents = [
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ -1.0, 0.0, 0.0,
|
|
|
+ ];
|
|
|
+
|
|
|
+ const uvs = [
|
|
|
+ 0.0, 0.0,
|
|
|
+ 1.0, 0.0,
|
|
|
+ 1.0, 1.0,
|
|
|
+ 0.0, 1.0,
|
|
|
+ ];
|
|
|
+
|
|
|
+ const indices = [
|
|
|
+ 0, 1, 2,
|
|
|
+ 0, 2, 3,
|
|
|
+ ];
|
|
|
+
|
|
|
+ this._BufferData({size: 3, data: positions}, 'positions');
|
|
|
+ this._BufferData({size: 3, data: normals}, 'normals');
|
|
|
+ this._BufferData({size: 3, data: tangents}, 'tangents');
|
|
|
+ this._BufferData({size: 2, data: uvs}, 'uvs');
|
|
|
+ this._BufferData({data: indices}, 'index');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class Camera {
|
|
|
+ constructor() {
|
|
|
+ this._position = vec3.create();
|
|
|
+ this._target = vec3.create();
|
|
|
+ this._viewMatrix = mat4.create();
|
|
|
+ this._cameraMatrix = mat4.create();
|
|
|
+ }
|
|
|
+
|
|
|
+ SetPosition(x, y, z) {
|
|
|
+ vec3.set(this._position, x, y, z);
|
|
|
+ }
|
|
|
+
|
|
|
+ SetTarget(x, y, z) {
|
|
|
+ vec3.set(this._target, x, y, z);
|
|
|
+ }
|
|
|
+
|
|
|
+ UpdateConstants(constants) {
|
|
|
+ mat4.lookAt(this._viewMatrix, this._position, this._target, vec3.fromValues(0, 1, 0));
|
|
|
+ mat4.invert(this._cameraMatrix, this._viewMatrix);
|
|
|
+
|
|
|
+ constants['projectionMatrix'] = this._projectionMatrix;
|
|
|
+ constants['viewMatrix'] = this._viewMatrix;
|
|
|
+ constants['cameraMatrix'] = this._cameraMatrix;
|
|
|
+ constants['cameraPosition'] = this._position;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class PerspectiveCamera extends Camera {
|
|
|
+ constructor(fov, aspect, zNear, zFar) {
|
|
|
+ super();
|
|
|
+
|
|
|
+ this._projectionMatrix = mat4.create();
|
|
|
+ this._fov = fov;
|
|
|
+ this._aspect = aspect;
|
|
|
+ this._zNear = zNear;
|
|
|
+ this._zFar = zFar;
|
|
|
+
|
|
|
+ mat4.perspective(this._projectionMatrix, fov * Math.PI / 180.0, aspect, zNear, zFar);
|
|
|
+ }
|
|
|
+
|
|
|
+ GetUp() {
|
|
|
+ const v = vec4.fromValues(0, 0, 1, 0);
|
|
|
+
|
|
|
+ vec4.transformMat4(v, v, this._cameraMatrix);
|
|
|
+
|
|
|
+ return v;
|
|
|
+ }
|
|
|
+
|
|
|
+ GetRight() {
|
|
|
+ const v = vec4.fromValues(1, 0, 0, 0);
|
|
|
+
|
|
|
+ vec4.transformMat4(v, v, this._cameraMatrix);
|
|
|
+
|
|
|
+ return v;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class OrthoCamera extends Camera {
|
|
|
+ constructor(l, r, b, t, n, f) {
|
|
|
+ super();
|
|
|
+
|
|
|
+ this._projectionMatrix = mat4.create();
|
|
|
+
|
|
|
+ mat4.ortho(this._projectionMatrix, l, r, b, t, n, f);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class Light {
|
|
|
+ constructor() {
|
|
|
+ }
|
|
|
+
|
|
|
+ UpdateConstants() {
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class DirectionalLight extends Light {
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+
|
|
|
+ this._colour = vec3.fromValues(1, 1, 1);
|
|
|
+ this._direction = vec3.fromValues(1, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ get Type() {
|
|
|
+ return 'Directional';
|
|
|
+ }
|
|
|
+
|
|
|
+ SetColour(r, g, b) {
|
|
|
+ vec3.set(this._colour, r, g, b);
|
|
|
+ }
|
|
|
+
|
|
|
+ SetDirection(x, y, z) {
|
|
|
+ vec3.set(this._direction, x, y, z);
|
|
|
+ vec3.normalize(this._direction, this._direction);
|
|
|
+ }
|
|
|
+
|
|
|
+ UpdateConstants(constants) {
|
|
|
+ constants['lightDirection'] = this._direction;
|
|
|
+ constants['lightColour'] = this._colour;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class PointLight extends Light {
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+
|
|
|
+ this._colour = vec3.fromValues(1, 1, 1);
|
|
|
+ this._position = vec3.create();
|
|
|
+ this._attenuation = vec3.create();
|
|
|
+ }
|
|
|
+
|
|
|
+ get Type() {
|
|
|
+ return 'Point';
|
|
|
+ }
|
|
|
+
|
|
|
+ SetColour(r, g, b) {
|
|
|
+ vec3.set(this._colour, r, g, b);
|
|
|
+ }
|
|
|
+
|
|
|
+ SetPosition(x, y, z) {
|
|
|
+ vec3.set(this._position, x, y, z);
|
|
|
+ }
|
|
|
+
|
|
|
+ SetRadius(r1, r2) {
|
|
|
+ vec3.set(this._attenuation, r1, r2, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ UpdateConstants(constants) {
|
|
|
+ constants['lightPosition'] = this._position;
|
|
|
+ constants['lightColour'] = this._colour;
|
|
|
+ constants['lightAttenuation'] = this._attenuation;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class Renderer {
|
|
|
+ constructor() {
|
|
|
+ this._Init();
|
|
|
+ }
|
|
|
+
|
|
|
+ _Init() {
|
|
|
+ this._canvas = document.createElement('canvas');
|
|
|
+
|
|
|
+ document.body.appendChild(this._canvas);
|
|
|
+
|
|
|
+ GL = this._canvas.getContext('webgl2');
|
|
|
+
|
|
|
+ if (GL === null) {
|
|
|
+ alert("Unable to initialize WebGL. Your browser or machine may not support it.");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this._constants = {};
|
|
|
+
|
|
|
+ this._textures = {};
|
|
|
+ this._textures['test-diffuse'] = new Texture().Load('./resources/rough-wet-cobble-albedo-1024.png');
|
|
|
+ this._textures['test-normal'] = new Texture().Load('./resources/rough-wet-cobble-normal-1024.jpg');
|
|
|
+ this._textures['worn-bumpy-rock-albedo'] = new Texture().Load(
|
|
|
+ './resources/worn-bumpy-rock-albedo-1024.png');
|
|
|
+ this._textures['worn-bumpy-rock-normal'] = new Texture().Load(
|
|
|
+ './resources/worn-bumpy-rock-normal-1024.jpg');
|
|
|
+
|
|
|
+ this._shaders = {};
|
|
|
+ this._shaders['z'] = new Shader(_SIMPLE_VS, _SIMPLE_FS);
|
|
|
+ this._shaders['default'] = new Shader(_OPAQUE_VS, _OPAQUE_FS);
|
|
|
+
|
|
|
+ this._shaders['post-quad-colour'] = new Shader(
|
|
|
+ _QUAD_COLOUR_VS, _QUAD_COLOUR_FS);
|
|
|
+ this._shaders['post-quad-directional'] = new Shader(
|
|
|
+ _QUAD_VS, _QUAD_FS, ['_LIGHT_TYPE_DIRECTIONAL']);
|
|
|
+ this._shaders['post-quad-point'] = new Shader(
|
|
|
+ _QUAD_VS, _QUAD_FS, ['_LIGHT_TYPE_POINT']);
|
|
|
+
|
|
|
+ this._camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1.0, 1000.0);
|
|
|
+ this._camera.SetPosition(0, 20, 10);
|
|
|
+ this._camera.SetTarget(0, 0, -20);
|
|
|
+
|
|
|
+ this._postCamera = new OrthoCamera(0.0, 1.0, 0.0, 1.0, 1.0, 1000.0);
|
|
|
+
|
|
|
+ this._meshes = [];
|
|
|
+ this._lights = [];
|
|
|
+
|
|
|
+ this._quadDirectional = new MeshInstance(
|
|
|
+ new Quad(),
|
|
|
+ {light: new ShaderInstance(this._shaders['post-quad-directional'])});
|
|
|
+ this._quadDirectional.SetPosition(0.5, 0.5, -10.0);
|
|
|
+
|
|
|
+ this._quadPoint = new MeshInstance(
|
|
|
+ new Quad(),
|
|
|
+ {light: new ShaderInstance(this._shaders['post-quad-point'])});
|
|
|
+ this._quadPoint.SetPosition(0.5, 0.5, -10.0);
|
|
|
+
|
|
|
+ this._quadColour = new MeshInstance(
|
|
|
+ new Quad(),
|
|
|
+ {colour: new ShaderInstance(this._shaders['post-quad-colour'])});
|
|
|
+ this._quadColour.SetPosition(0.5, 0.5, -10.0);
|
|
|
+
|
|
|
+ this._InitGBuffer();
|
|
|
+ this.Resize(window.innerWidth, window.innerHeight);
|
|
|
+ }
|
|
|
+
|
|
|
+ _InitGBuffer() {
|
|
|
+ // Float textures have only been around for like 15 years.
|
|
|
+ // So of course make them an extension.
|
|
|
+ GL.getExtension('EXT_color_buffer_float');
|
|
|
+
|
|
|
+ this._depthBuffer = GL.createRenderbuffer();
|
|
|
+ GL.bindRenderbuffer(GL.RENDERBUFFER, this._depthBuffer);
|
|
|
+ GL.renderbufferStorage(
|
|
|
+ GL.RENDERBUFFER,
|
|
|
+ GL.DEPTH_COMPONENT24,
|
|
|
+ window.innerWidth, window.innerHeight);
|
|
|
+ GL.bindRenderbuffer(GL.RENDERBUFFER, null);
|
|
|
+
|
|
|
+ this._normalBuffer = GL.createTexture();
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, this._normalBuffer);
|
|
|
+ GL.texImage2D(
|
|
|
+ GL.TEXTURE_2D, 0, GL.RGBA32F, window.innerWidth, window.innerHeight,
|
|
|
+ 0, GL.RGBA, GL.FLOAT, null);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+
|
|
|
+ this._positionBuffer = GL.createTexture();
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, this._positionBuffer);
|
|
|
+ GL.texImage2D(
|
|
|
+ GL.TEXTURE_2D, 0, GL.RGBA32F, window.innerWidth, window.innerHeight,
|
|
|
+ 0, GL.RGBA, GL.FLOAT, null);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+
|
|
|
+ this._lightBuffer = GL.createTexture();
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, this._lightBuffer);
|
|
|
+ GL.texImage2D(
|
|
|
+ GL.TEXTURE_2D, 0, GL.RGBA32F, window.innerWidth, window.innerHeight,
|
|
|
+ 0, GL.RGBA, GL.FLOAT, null);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+
|
|
|
+ this._colourBuffer = GL.createTexture();
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, this._colourBuffer);
|
|
|
+ GL.texImage2D(
|
|
|
+ GL.TEXTURE_2D, 0, GL.RGBA32F, window.innerWidth, window.innerHeight,
|
|
|
+ 0, GL.RGBA, GL.FLOAT, null);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST);
|
|
|
+ GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+
|
|
|
+ // Create the FBO's for each pass
|
|
|
+ this._zFBO = GL.createFramebuffer();
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, this._zFBO);
|
|
|
+ GL.framebufferRenderbuffer(
|
|
|
+ GL.FRAMEBUFFER, GL.DEPTH_ATTACHMENT, GL.RENDERBUFFER, this._depthBuffer);
|
|
|
+ GL.framebufferTexture2D(
|
|
|
+ GL.DRAW_FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, this._normalBuffer, 0);
|
|
|
+ GL.framebufferTexture2D(
|
|
|
+ GL.DRAW_FRAMEBUFFER, GL.COLOR_ATTACHMENT1, GL.TEXTURE_2D, this._positionBuffer, 0);
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, null);
|
|
|
+
|
|
|
+ this._lightFBO = GL.createFramebuffer();
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, this._lightFBO);
|
|
|
+ GL.framebufferRenderbuffer(
|
|
|
+ GL.FRAMEBUFFER, GL.DEPTH_ATTACHMENT, GL.RENDERBUFFER, this._depthBuffer);
|
|
|
+ GL.framebufferTexture2D(
|
|
|
+ GL.DRAW_FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, this._lightBuffer, 0);
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, null);
|
|
|
+
|
|
|
+ this._colourFBO = GL.createFramebuffer();
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, this._colourFBO);
|
|
|
+ GL.framebufferRenderbuffer(
|
|
|
+ GL.FRAMEBUFFER, GL.DEPTH_ATTACHMENT, GL.RENDERBUFFER, this._depthBuffer);
|
|
|
+ GL.framebufferTexture2D(
|
|
|
+ GL.DRAW_FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, this._colourBuffer, 0);
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, null);
|
|
|
+
|
|
|
+ // GROSS
|
|
|
+ this._normalTexture = new Texture();
|
|
|
+ this._normalTexture._texture = this._normalBuffer;
|
|
|
+
|
|
|
+ this._positionTexture = new Texture();
|
|
|
+ this._positionTexture._texture = this._positionBuffer;
|
|
|
+
|
|
|
+ this._lightTexture = new Texture();
|
|
|
+ this._lightTexture._texture = this._lightBuffer;
|
|
|
+
|
|
|
+ this._colourTexture = new Texture();
|
|
|
+ this._colourTexture._texture = this._colourBuffer;
|
|
|
+ }
|
|
|
+
|
|
|
+ CreateMeshInstance(mesh, shaderParams) {
|
|
|
+ const params = {};
|
|
|
+ for (let k in shaderParams.params) {
|
|
|
+ params[k] = this._textures[shaderParams.params[k]];
|
|
|
+ }
|
|
|
+
|
|
|
+ const m = new MeshInstance(
|
|
|
+ mesh,
|
|
|
+ {
|
|
|
+ z: new ShaderInstance(this._shaders['z']),
|
|
|
+ colour: new ShaderInstance(this._shaders[shaderParams.shader])
|
|
|
+ }, params);
|
|
|
+
|
|
|
+ this._meshes.push(m);
|
|
|
+
|
|
|
+ return m;
|
|
|
+ }
|
|
|
+
|
|
|
+ CreateLight(type) {
|
|
|
+ let l = null;
|
|
|
+
|
|
|
+ if (type == 'directional') {
|
|
|
+ l = new DirectionalLight();
|
|
|
+ } else if (type == 'point') {
|
|
|
+ l = new PointLight();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!l) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ this._lights.push(l);
|
|
|
+
|
|
|
+ return l;
|
|
|
+ }
|
|
|
+
|
|
|
+ Resize(w, h) {
|
|
|
+ this._canvas.width = w;
|
|
|
+ this._canvas.height = h;
|
|
|
+ GL.viewport(0, 0, w, h);
|
|
|
+ }
|
|
|
+
|
|
|
+ _SetQuadSizeForLight(quad, light) {
|
|
|
+ const wvp = mat4.create();
|
|
|
+ const w = mat4.create();
|
|
|
+ mat4.fromTranslation(w, light._position);
|
|
|
+
|
|
|
+ const viewMatrix = this._camera._viewMatrix;
|
|
|
+ const projectionMatrix = this._camera._projectionMatrix;
|
|
|
+
|
|
|
+ const _TransformToScreenSpace = (p) => {
|
|
|
+ const screenPos = vec4.fromValues(
|
|
|
+ p[0], p[1], p[2], 1.0);
|
|
|
+
|
|
|
+ vec4.transformMat4(screenPos, screenPos, projectionMatrix);
|
|
|
+
|
|
|
+ screenPos[0] = (screenPos[0] / screenPos[3]) * 0.5 + 0.5;
|
|
|
+ screenPos[1] = (screenPos[1] / screenPos[3]) * 0.5 + 0.5;
|
|
|
+
|
|
|
+ return screenPos;
|
|
|
+ };
|
|
|
+
|
|
|
+ const lightRadius = (light._attenuation[0] + light._attenuation[1]);
|
|
|
+ const lightDistance = vec3.distance(this._camera._position, light._position);
|
|
|
+
|
|
|
+ if (lightDistance < lightRadius) {
|
|
|
+ quad.SetPosition(0.5, 0.5, -10);
|
|
|
+ quad.Scale(1, 1, 1);
|
|
|
+ } else {
|
|
|
+ const viewSpaceCenter = vec3.clone(light._position);
|
|
|
+ vec3.transformMat4(viewSpaceCenter, viewSpaceCenter, viewMatrix);
|
|
|
+
|
|
|
+ const rightPos = vec3.clone(viewSpaceCenter);
|
|
|
+ const upPos = vec3.clone(viewSpaceCenter);
|
|
|
+ vec3.add(rightPos, rightPos, vec3.fromValues(lightRadius, 0, 0));
|
|
|
+ vec3.add(upPos, upPos, vec3.fromValues(0, -lightRadius, 0));
|
|
|
+
|
|
|
+ const center = _TransformToScreenSpace(light._position);
|
|
|
+ const up = _TransformToScreenSpace(upPos);
|
|
|
+ const right = _TransformToScreenSpace(rightPos);
|
|
|
+
|
|
|
+ const radius = 2 * Math.max(
|
|
|
+ vec2.distance(center, up), vec2.distance(center, right));
|
|
|
+
|
|
|
+ quad.SetPosition(center[0], center[1], -10);
|
|
|
+ quad.Scale(radius, radius, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ Render(timeElapsed) {
|
|
|
+ this._constants['resolution'] = vec4.fromValues(
|
|
|
+ window.innerWidth, window.innerHeight, 0, 0);
|
|
|
+ this._camera.UpdateConstants(this._constants);
|
|
|
+
|
|
|
+ this._constants['gBuffer_Normal'] = null;
|
|
|
+ this._constants['gBuffer_Position'] = null;
|
|
|
+ this._constants['gBuffer_Colour'] = null;
|
|
|
+ this._constants['gBuffer_Light'] = null;
|
|
|
+
|
|
|
+ // Z-Prepass + normals
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, this._zFBO);
|
|
|
+ GL.drawBuffers([GL.COLOR_ATTACHMENT0, GL.COLOR_ATTACHMENT1]);
|
|
|
+
|
|
|
+ GL.clearColor(0.0, 0.0, 0.0, 0.0);
|
|
|
+ GL.clearDepth(1.0);
|
|
|
+ GL.enable(GL.DEPTH_TEST);
|
|
|
+ GL.depthMask(true);
|
|
|
+ GL.depthFunc(GL.LEQUAL);
|
|
|
+ GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
|
|
|
+
|
|
|
+ this._camera.UpdateConstants(this._constants);
|
|
|
+
|
|
|
+ for (let m of this._meshes) {
|
|
|
+ m.Bind(this._constants, 'z');
|
|
|
+ m.Draw();
|
|
|
+ }
|
|
|
+
|
|
|
+ GL.useProgram(null);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+
|
|
|
+ // Light buffer generation
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, this._lightFBO);
|
|
|
+ GL.drawBuffers([GL.COLOR_ATTACHMENT0]);
|
|
|
+
|
|
|
+ GL.clear(GL.COLOR_BUFFER_BIT);
|
|
|
+ GL.disable(GL.DEPTH_TEST);
|
|
|
+ GL.enable(GL.BLEND);
|
|
|
+ GL.blendFunc(GL.ONE, GL.ONE);
|
|
|
+
|
|
|
+ this._postCamera.UpdateConstants(this._constants);
|
|
|
+
|
|
|
+ this._constants['gBuffer_Normal'] = this._normalTexture;
|
|
|
+ this._constants['gBuffer_Position'] = this._positionTexture;
|
|
|
+
|
|
|
+ for (let l of this._lights) {
|
|
|
+ l.UpdateConstants(this._constants);
|
|
|
+
|
|
|
+ let quad = null;
|
|
|
+ if (l.Type == 'Directional') {
|
|
|
+ quad = this._quadDirectional;
|
|
|
+ } else if (l.Type == 'Point') {
|
|
|
+ quad = this._quadPoint;
|
|
|
+
|
|
|
+ // Calculate screenspace size
|
|
|
+ this._SetQuadSizeForLight(quad, l);
|
|
|
+ }
|
|
|
+ quad.Bind(this._constants, 'light');
|
|
|
+ quad.Draw();
|
|
|
+ }
|
|
|
+
|
|
|
+ GL.useProgram(null);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+
|
|
|
+ // Colour pass
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, this._colourFBO);
|
|
|
+ GL.drawBuffers([GL.COLOR_ATTACHMENT0]);
|
|
|
+ GL.disable(GL.BLEND);
|
|
|
+ GL.depthMask(false);
|
|
|
+ GL.enable(GL.DEPTH_TEST);
|
|
|
+
|
|
|
+ this._camera.UpdateConstants(this._constants);
|
|
|
+
|
|
|
+ this._constants['gBuffer_Colour'] = null;
|
|
|
+ this._constants['gBuffer_Light'] = this._lightTexture;
|
|
|
+ this._constants['gBuffer_Normal'] = null;
|
|
|
+ this._constants['gBuffer_Position'] = null;
|
|
|
+
|
|
|
+ for (let m of this._meshes) {
|
|
|
+ m.Bind(this._constants, 'colour');
|
|
|
+ m.Draw();
|
|
|
+ }
|
|
|
+
|
|
|
+ GL.useProgram(null);
|
|
|
+ GL.bindTexture(GL.TEXTURE_2D, null);
|
|
|
+ GL.disable(GL.BLEND);
|
|
|
+
|
|
|
+ // Now just draw directly to screen
|
|
|
+ GL.bindFramebuffer(GL.FRAMEBUFFER, null);
|
|
|
+ GL.disable(GL.DEPTH_TEST);
|
|
|
+ GL.disable(GL.BLEND);
|
|
|
+
|
|
|
+ this._postCamera.UpdateConstants(this._constants);
|
|
|
+
|
|
|
+ // Really fucking hate JavaScript sometimes.
|
|
|
+ this._constants['gQuadTexture'] = this._colourTexture;
|
|
|
+
|
|
|
+ this._quadColour.Bind(this._constants, 'colour');
|
|
|
+ this._quadColour.Draw();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class LightPrepassDemo {
|
|
|
+ constructor() {
|
|
|
+ this._Initialize();
|
|
|
+ }
|
|
|
+
|
|
|
+ _Initialize() {
|
|
|
+ this._renderer = new Renderer();
|
|
|
+
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ this._OnWindowResize();
|
|
|
+ }, false);
|
|
|
+
|
|
|
+ this._Init();
|
|
|
+
|
|
|
+ this._previousRAF = null;
|
|
|
+ this._RAF();
|
|
|
+ }
|
|
|
+
|
|
|
+ _OnWindowResize() {
|
|
|
+ this._renderer.Resize(window.innerWidth, window.innerHeight);
|
|
|
+ }
|
|
|
+
|
|
|
+ _Init() {
|
|
|
+ this._CreateLights();
|
|
|
+ this._CreateMeshes();
|
|
|
+ }
|
|
|
+
|
|
|
+ _CreateLights() {
|
|
|
+ this._lights = [];
|
|
|
+
|
|
|
+ for (let i = -9; i <= 9; i++) {
|
|
|
+ let l = this._renderer.CreateLight('point');
|
|
|
+
|
|
|
+ const v = vec3.fromValues(Math.random(), Math.random(), Math.random());
|
|
|
+ vec3.normalize(v, v);
|
|
|
+
|
|
|
+ const p = vec3.fromValues(
|
|
|
+ (Math.random() * 2 - 1) * 10,
|
|
|
+ 3,
|
|
|
+ -Math.random() * 10 - 10);
|
|
|
+
|
|
|
+ l.SetColour(v[0], v[1], v[2]);
|
|
|
+ l.SetPosition(p[0], p[1], p[2]);
|
|
|
+ l.SetRadius(4, 1);
|
|
|
+
|
|
|
+ this._lights.push({
|
|
|
+ light: l,
|
|
|
+ position: p,
|
|
|
+ acc: Math.random() * 10.0,
|
|
|
+ accSpeed: Math.random() * 0.5 + 0.5,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ _CreateMeshes() {
|
|
|
+ this._meshes = [];
|
|
|
+
|
|
|
+ let m = this._renderer.CreateMeshInstance(
|
|
|
+ new Quad(),
|
|
|
+ {
|
|
|
+ shader: 'default',
|
|
|
+ params: {
|
|
|
+ diffuseTexture: 'worn-bumpy-rock-albedo',
|
|
|
+ normalTexture: 'worn-bumpy-rock-normal',
|
|
|
+ }
|
|
|
+ });
|
|
|
+ m.SetPosition(0, -2, -10);
|
|
|
+ m.RotateX(-Math.PI * 0.5);
|
|
|
+ m.Scale(50, 50, 1);
|
|
|
+
|
|
|
+ for (let x = -5; x < 5; x++) {
|
|
|
+ for (let y = 0; y < 20; y++) {
|
|
|
+ let m = this._renderer.CreateMeshInstance(
|
|
|
+ new Box(),
|
|
|
+ {
|
|
|
+ shader: 'default',
|
|
|
+ params: {
|
|
|
+ diffuseTexture: 'test-diffuse',
|
|
|
+ normalTexture: 'test-normal',
|
|
|
+ }
|
|
|
+ });
|
|
|
+ m.SetPosition(x * 4, 0, -y * 4);
|
|
|
+
|
|
|
+ this._meshes.push(m);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ _RAF() {
|
|
|
+ requestAnimationFrame((t) => {
|
|
|
+ if (this._previousRAF === null) {
|
|
|
+ this._previousRAF = t;
|
|
|
+ }
|
|
|
+
|
|
|
+ this._RAF();
|
|
|
+ this._Step(t - this._previousRAF);
|
|
|
+ this._previousRAF = t;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ _Step(timeElapsed) {
|
|
|
+ const timeElapsedS = timeElapsed * 0.001;
|
|
|
+
|
|
|
+ for (let m of this._meshes) {
|
|
|
+ m.RotateY(timeElapsedS);
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let l of this._lights) {
|
|
|
+ l.acc += timeElapsed * 0.001 * l.accSpeed;
|
|
|
+
|
|
|
+ l.light.SetPosition(
|
|
|
+ l.position[0] + 10 * Math.cos(l.acc),
|
|
|
+ l.position[1],
|
|
|
+ l.position[2] + 10 * Math.sin(l.acc));
|
|
|
+ }
|
|
|
+
|
|
|
+ this._renderer.Render(timeElapsedS);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+let _APP = null;
|
|
|
+
|
|
|
+window.addEventListener('DOMContentLoaded', () => {
|
|
|
+ _APP = new LightPrepassDemo();
|
|
|
+});
|
Simon
