kaj/Kepler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
kaj dijkstra
2025-11-17 17:18:43 +01:00
parent 2286a3b782
commit bca5ef911b
905 changed files with 950521 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
engine/renderPasses/convolution.js Executable file
View File

@@ -0,0 +1,37 @@
import defaultRenderPass from '../defaultRenderPass.js';
import sampler2D from '../sampler2D.js';
import shader from '../shader.js';
class convolution extends defaultRenderPass {
prepare() {
var randomTexure = kepler.resources.getTexture("rotrandom.png");
var randomSampler = new sampler2D();
randomSampler.addTexture(randomTexure);
this.shader = new shader();
this.shader.createFromFile("shaders/convolution.shader");
this.shader.setUniform("random", randomSampler );
}
setDirection( direction ) {
if(direction == "Horizontal") {
this.shader.setUniform("imageIncrement", [1 / this.width, 0] );
} else {
this.shader.setUniform("imageIncrement", [0, 1 / this.height] );
}
}
}
export {convolution as default};

273
engine/renderPasses/deferred.js Executable file
View File

@@ -0,0 +1,273 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
class deferred {
constructor( ) {
this.realtime = true;
this.render_type = "deferred";
}
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
// Framebuffer
this.framebuffer = new framebuffer();
this.framebuffer.setViewport( this.viewport );
this.framebuffer.width = this.viewport.width;
this.framebuffer.height = this.viewport.height;
// Samplers
this.diffuseSampler = new sampler2D();
this.diffuseSampler.type = this.gl.FLOAT;
this.diffuseSampler.internalFormat = this.gl.RGBA32F;
this.normalSampler = new sampler2D();
this.normalSampler.type = this.gl.FLOAT;
this.normalSampler.internalFormat = this.gl.RGBA32F;
this.infoSampler = new sampler2D();
this.infoSampler.type = this.gl.FLOAT;
this.infoSampler.internalFormat = this.gl.RGBA32F;
this.tangentSampler = new sampler2D();
this.tangentSampler.type = this.gl.FLOAT;
this.tangentSampler.internalFormat = this.gl.RGBA32F;
// Sampler
var materialSampler = new sampler2D();
this.framebuffer.addSampler(this.diffuseSampler);
this.framebuffer.addSampler(this.normalSampler);
this.framebuffer.addSampler(this.infoSampler);
this.framebuffer.create();
}
render() {
var camera = this.viewport.mainCamera;
var viewProjection = camera.worldViewProjection;
var mode = 0;
this.gl.enableVertexAttribArray(0);
this.gl.enableVertexAttribArray(1);
this.gl.enableVertexAttribArray(2);
//this.gl.enableVertexAttribArray(3);
//this.gl.enableVertexAttribArray(4);
if(this.renderToViewport)
this.gl.bindFramebuffer( this.gl.FRAMEBUFFER, null );
else
this.gl.bindFramebuffer( this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer );
if(mode == 1) {
var sampler = this.framebuffer.samplers[0];
var texture = sampler.cubeTexture;
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.framebuffers[3]);
this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.RENDERBUFFER, this.framebuffer.renderbuffers[3]);
this.gl.texImage2D(face, 0, this.gl.RGBA, 1024, 1024, 0, this.gl.RGBA, this.gl.FLOAT, null);
this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, face, texture, 0);
}
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.gl.viewport(0, 0, this.viewport.width, this.viewport.height);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.enable(this.gl.DEPTH_TEST);
this.gl.enable(this.gl.CULL_FACE);
var scene = this.viewport.scene;
var entitys = scene.getEntitys();
for(var e = 0;e<entitys.length;e++) {
var entity = entitys[e];
this.gl.disableVertexAttribArray(3);
this.gl.disableVertexAttribArray(4);
if(entity.type == "Actor") {
var mesh = entity.mesh;
var material = mesh.material;
var shader = mesh.material.shader;
shader.update( this.viewport );
if(material.alpha == 1.0) {
if(this.render_type == "deferred")
shader.setUniform("render_type", 1);
else
shader.setUniform("render_type", 0);
var world = entity.getUpdatedWorldMatrix();
shader.setUniform("viewProjection", matrix4.mul(world, viewProjection) );
shader.setUniform("world", world );
//shader.setUniform("mode", mode );
shader.setUniform("cameraPosition", this.viewport.mainCamera.eye );
shader.setUniform("worldInverseTranspose", world );
if(material.displacementMaps.length > 0)
shader.setUniform("view", this.viewport.mainCamera.view );
// note: needs a smooting out mesh->material->shader update cycle only at startup right before render loop
mesh.setViewport(this.viewport );
mesh.createBuffers( );
material.setViewport( this.viewport );
material.updateShader( );
shader.update( this.viewport );
var attribute = shader.getAttributeByName('position');
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, mesh.vertexPositionBuffer);
this.gl.vertexAttribPointer(attribute, 3, this.gl.FLOAT, false, 0, 0);
var attribute = shader.getAttributeByName('normal');
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, mesh.vertexNormalBuffer);
this.gl.vertexAttribPointer(attribute, 3, this.gl.FLOAT, false, 0, 0);
var attribute = shader.getAttributeByName('textcoord');
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, mesh.textureCoordBuffer);
this.gl.vertexAttribPointer(attribute, 2, this.gl.FLOAT, false, 0, 0);
if(material.normals.length > 0) {
if(mesh.tangentBuffer) {
this.gl.enableVertexAttribArray(3);
this.gl.enableVertexAttribArray(4);
var attribute = shader.getAttributeByName('tangent');
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, mesh.tangentBuffer);
this.gl.vertexAttribPointer(attribute, 3, this.gl.FLOAT, false, 0, 0);
var attribute = shader.getAttributeByName('bitangent');
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, mesh.binormalBuffer);
this.gl.vertexAttribPointer(attribute, 3, this.gl.FLOAT, false, 0, 0);
}
}
var texureID = 0;
/*
if( material.textures.length > 0 ) {
var textureSampler = material.textures[0];
var texture = textureSampler.getTexture();
var textureUniform = shader.getUniformByName('diffuseSampler');
this.gl.activeTexture( this.gl.TEXTURE0 );
this.gl.bindTexture( this.gl.TEXTURE_2D, texture.glTexture );
this.gl.uniform1i(textureUniform, 0);
} else {
//shader.setUniform("diffuseColor", material.diffuseColor);
}
if(material.normals.length > 0) {
var textureSampler = material.normals[0];
var texture = textureSampler.getTexture();
var textureUniform = shader.getUniformByName('normalSampler');
this.gl.activeTexture( this.gl.TEXTURE0 + 1);
this.gl.bindTexture( this.gl.TEXTURE_2D, texture.glTexture );
this.gl.uniform1i(textureUniform, 1);
}
if(material.roughnessMaps.length > 0) {
var textureSampler = material.roughnessMaps[0];
var texture = textureSampler.getTexture();
if(texture) {
//console.log("texturetexture", texture);
var textureUniform = shader.getUniformByName('roughnessSampler');
this.gl.activeTexture( this.gl.TEXTURE0 + 2);
this.gl.bindTexture( this.gl.TEXTURE_2D, texture.glTexture );
this.gl.uniform1i(textureUniform, 2);
}
}
if(material.displacementMaps.length > 0) {
var textureSampler = material.displacementMaps[0];
var texture = textureSampler.getTexture();
var textureUniform = shader.getUniformByName('heightSampler');
this.gl.activeTexture( this.gl.TEXTURE0 + 3);
this.gl.bindTexture( this.gl.TEXTURE_2D, texture.glTexture );
this.gl.uniform1i(textureUniform, 3);
}
*/
this.gl.bindBuffer( this.gl.ELEMENT_ARRAY_BUFFER, mesh.vertexIndexBuffer);
this.gl.drawElements( mesh.draw_type, mesh.vertexIndexBuffer.numItems, this.gl.UNSIGNED_INT, 0 );
}
}
}
this.gl.disable(this.gl.DEPTH_TEST);
this.gl.disableVertexAttribArray(0);
this.gl.disableVertexAttribArray(1);
this.gl.disableVertexAttribArray(2);
this.gl.disableVertexAttribArray(3);
this.gl.disableVertexAttribArray(4);
}
}
export {deferred as default};

337
engine/renderPasses/depth.js Executable file
View File

@@ -0,0 +1,337 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
import material from '../material.js';
import entity from '../entity.js';
class depth {
constructor( ) {
this.lightPosition = [0, 4, 0.01];
this.degrees = 130;
}
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
this.near = .635;
this.far = 400;
//
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D();
this.targetSampler.type = this.gl.FLOAT;
this.framebuffer = new framebuffer();
this.framebuffer.setViewport( this.viewport );
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
//depth shader
this.depthShader = new shader();
this.depthShader.definePragma("VARIANCE", (this.shadowType == "VARIANCE") ? 1 : 0 );
this.depthShader.createFromFile("shaders/depth.shader");
this.depthShader.setUniform("far", this.far );
this.depthShader.setUniform("near", this.near );
var shadowCamera = this.createShadowCam( this.lightPosition , [0, -1, 0], [0, 1, 0] );
this.shadowCameras = [];
this.shadowCameras.push( shadowCamera );
// Material
var groundMaterial = new material();
// Properties
groundMaterial.diffuseColor = [179/256,199/256,217/256];
groundMaterial.alpha = 1;
groundMaterial.reflection = 0.2;
groundMaterial.roughness = 0.2;
groundMaterial.metalic = 0.2;
groundMaterial.uvMultiplier = 6;
if(this.showFrustum) {
// Cube mesh
//var shadowCamera = this.viewport.system.createShadowCam( [0, 10, 1], [0, -1, 0], [0, 1, 0] )
var frustumMesh = this.viewport.linePrimitives.drawFrustum( shadowCamera.projection, shadowCamera.view );
frustumMesh.addMaterial(groundMaterial);
// Cube Entity
var cubeEntity = new entity( );
cubeEntity.addMesh( frustumMesh );
cubeEntity.name = "wireframe cube";
cubeEntity.transform.position = [0, 0, 0];
cubeEntity.transform.update();
this.viewport.scene.addEntity( cubeEntity );
}
}
createShadowCam( eye, target, up ) {
var width = 2048;
var height = 2048;
var shadowCamera = {};
shadowCamera.view = matrix4.lookAt( eye, target, up );
//if(this.lightType == "skyLight")
// shadowCamera.projection = matrix4.orthographic(-10, 10, -10, 10, this.near, this.far);
//if(this.lightType == "pointLight")
shadowCamera.projection = matrix4.perspective(math.degToRad(this.degrees), width / height, this.near, this.far);
console.log(shadowCamera.projection);
this.composition = matrix4.composition(shadowCamera.view, shadowCamera.projection);
this.viewProjection = matrix4.mul(shadowCamera.view, shadowCamera.projection);
shadowCamera.far = this.far;
//if( face ) {
// shadowCamera.framebuffer.target = this.gl.TEXTURE_CUBE_MAP;
// shadowCamera.framebuffer.face = face;
// shadowCamera.framebuffer.attachment = this.gl.DEPTH_ATTACHMENT;
//} else {
//shadowCamera.framebuffer.target = this.gl.TEXTURE_2D;
this.targetSampler = new sampler2D();
//this.targetSampler.type = this.gl.FLOAT;
//this.targetSampler.filter = this.gl.LINEAR;
//this.targetSampler.internalFormat = this.gl.RGBA32F;
this.targetSampler.internalformat = this.gl.RGB;
this.targetSampler.format = this.gl.RGB;
this.targetSampler.type = this.gl.FLOAT;
this.framebuffer = new framebuffer();
this.framebuffer.setViewport( this.viewport );
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
/*
this.ambientOcclusionFramebuffer = new framebuffer();
this.ambientOcclusionFramebuffer.width = this.width;
this.ambientOcclusionFramebuffer.height = this.height;
var ambientOcclusionSampler = new sampler2D();
ambientOcclusionSampler.type = this.gl.FLOAT;
this.ambientOcclusionFramebuffer.addSampler( ambientOcclusionSampler );
this.ambientOcclusionFramebuffer.create();
*/
//shadowCamera.filter = this.gl.LINEAR;
return shadowCamera;
}
getCamera(){
return this.shadowCameras[0];
}
render() {
console.log("render depth");
//this.gl.enableVertexAttribArray(0);
this.gl.disableVertexAttribArray(1);
this.gl.disableVertexAttribArray(2);
this.gl.disableVertexAttribArray(3);
this.gl.disableVertexAttribArray(4);
this.gl.disableVertexAttribArray(5);
//this.gl.disableVertexAttribArray(6);
//this.gl.disableVertexAttribArray(7);
var shader = this.depthShader;
//var shadowCamera = this.shadowCameras[0];
for(var c = 0; c<this.shadowCameras.length; c++) {
var shadowCamera = this.shadowCameras[c];
//var framebuffer = shadowCamera.framebuffer.glFramebuffer;
//render shadow
if(this.renderToViewport)
this.gl.bindFramebuffer( this.gl.FRAMEBUFFER, null );
else
this.gl.bindFramebuffer( this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer );
//this.gl.bindFramebuffer( this.gl.FRAMEBUFFER,null );
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.gl.viewport(0, 0, this.width, this.height);
this.gl.enable( this.gl.DEPTH_TEST );
this.gl.disable(this.gl.CULL_FACE);
//this.gl.cullFace( this.gl.FRONT );
var scene = this.viewport.scene;
var entitys = scene.getEntitys();
for(var e = 0;e<entitys.length;e++) {
var entity = entitys[e];
if(entity.type == "Actor") {
var mesh = entity.mesh;
var material = mesh.material;
//if(material.alpha == 1.0) {
var shader = this.depthShader;
var world = entity.getUpdatedWorldMatrix();
//var viewProjection = this.viewport.mainCamera.worldViewProjection;
var viewProjection = this.viewProjection;
//var camera = this.viewport.mainCamera;
//var viewProjection = camera.worldViewProjection;
shader.setUniform("viewProjection", matrix4.mul(world, viewProjection) );
shader.setUniform("world", world );
//shader.setUniform("diffuseColor", material.diffuseColor);
shader.setUniform("near", this.near);
shader.setUniform("far", this.far);
//if(material.displacementMaps.length > 0)
// shader.setUniform("view", this.viewport.mainCamera.view );
mesh.setViewport(this.viewport );
mesh.createBuffers( );
material.setViewport( this.viewport );
material.updateShader( );
shader.update( this.viewport );
//shader.update();
var attribute = shader.getAttributeByName('position');
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, mesh.vertexPositionBuffer);
this.gl.vertexAttribPointer(attribute, 3, this.gl.FLOAT, false, 0, 0);
if(mesh.draw_type == this.gl.TRIANGLES) {
this.gl.bindBuffer( this.gl.ELEMENT_ARRAY_BUFFER, mesh.vertexIndexBuffer);
this.gl.drawElements( mesh.draw_type, mesh.vertexIndexBuffer.numItems, this.gl.UNSIGNED_INT, 0 );
}
//}
}
}
}
//this.gl.disable(this.gl.CULL_FACE);
this.gl.cullFace( this.gl.BACK );
this.gl.enableVertexAttribArray(1);
this.gl.enableVertexAttribArray(2);
this.gl.enableVertexAttribArray(3);
this.gl.enableVertexAttribArray(4);
//this.gl.enableVertexAttribArray(5);
}
createShadows( ) {
var lightPos = [0, 15, 0];
var shadowSampler = new samplerCube(this);
shadowSampler.internalformat = this.gl.RGB;
shadowSampler.format = this.gl.RGB;
shadowSampler.type = this.gl.FLOAT;
shadowSampler.width = 1024;
shadowSampler.height = 1024;
/*
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [1, 0, 0]), [0, -1, 0], this.gl.TEXTURE_CUBE_MAP_POSITIVE_X, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [-1, 0, 0]), [0, -1, 0], this.gl.TEXTURE_CUBE_MAP_NEGATIVE_X, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [0, 1, 0]), [0, 0, 1], this.gl.TEXTURE_CUBE_MAP_POSITIVE_Y, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [0, -1, 0]), [0, 0, -1], this.gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [0, 0, 1]), [0, -1, 0], this.gl.TEXTURE_CUBE_MAP_POSITIVE_Z, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [0, 0, -1]), [0, -1, 0], this.gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, shadowSampler);
this.shadowCameras.push(shadowCamera);
*/
//this.depthShader.update();
var shadowSampler = new sampler2D();
shadowSampler.internalformat = this.gl.RGB;
shadowSampler.format = this.gl.RGB;
shadowSampler.type = this.gl.FLOAT;
shadowSampler.width = 1024;
shadowSampler.height = 1024;
//shadowSampler.bind(this.depthShader);
//this.depthShader.setUniform("far", shadowCamera.far );
/*
this.shadowShader = new shader();
this.shadowShader.createFromFile("https://community.tensorui.com/assets/shaders/shadow.shader");
this.shadowShader.setUniform("viewProjection", this.quadViewProjection );
this.shadowShader.setUniform("shadowSampler", shadowSampler );
this.shadowShader.setUniform("far", shadowCamera.far );
this.shadowShader.setUniform("lightViewProjection", shadowCamera.viewProjection );
this.shadowShader.setUniform("lightPosition", lightPos );
*/
}
}
export {depth as default};

362
engine/renderPasses/depth_old.js Executable file
View File

@@ -0,0 +1,362 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
import material from '../material.js';
import entity from '../entity.js';
class depth {
constructor( ) {
this.lightPosition = [0, 4, 0.01];
this.degrees = 130;
}
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
this.near = .635;
this.far = 400;
//
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D();
this.targetSampler.type = this.gl.FLOAT;
this.targetSampler.internalFormat = gl.DEPTH_COMPONENT16;
this.targetSampler.format = gl.DEPTH_COMPONENT;
this.targetSampler.type = gl.UNSIGNED_SHORT;
//this.targetSampler.internalFormat = this.gl.RGBA32F;
this.framebuffer = new framebuffer();
this.framebuffer.setViewport( this.viewport );
this.framebuffer.attachment = gl.DEPTH_ATTACHMENT;
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
//depth shader
this.depthShader = new shader();
this.depthShader.definePragma("VARIANCE", (this.shadowType == "VARIANCE") ? 1 : 0 );
this.depthShader.createFromFile("shaders/depth.shader");
this.depthShader.setUniform("far", this.far );
this.depthShader.setUniform("near", this.near );
var shadowCamera = this.createShadowCam( this.lightPosition , [0, -1, 0], [0, 1, 0] );
this.shadowCameras = [];
this.shadowCameras.push( shadowCamera );
// Material
var groundMaterial = new material();
// Properties
groundMaterial.diffuseColor = [179/256,199/256,217/256];
groundMaterial.alpha = 1;
groundMaterial.reflection = 0.2;
groundMaterial.roughness = 0.2;
groundMaterial.metalic = 0.2;
groundMaterial.uvMultiplier = 6;
if(this.showFrustum) {
// Cube mesh
//var shadowCamera = this.viewport.system.createShadowCam( [0, 10, 1], [0, -1, 0], [0, 1, 0] )
var frustumMesh = this.viewport.linePrimitives.drawFrustum( shadowCamera.projection, shadowCamera.view );
frustumMesh.addMaterial(groundMaterial);
// Cube Entity
var cubeEntity = new entity( );
cubeEntity.addMesh( frustumMesh );
cubeEntity.name = "wireframe cube";
cubeEntity.transform.position = [0, 0, 0];
cubeEntity.transform.update();
this.viewport.scene.addEntity( cubeEntity );
}
}
createShadowCam( eye, target, up ) {
var width = 2048;
var height = 2048;
var shadowCamera = {};
shadowCamera.view = matrix4.lookAt( eye, target, up );
//if(this.lightType == "skyLight")
// shadowCamera.projection = matrix4.orthographic(-10, 10, -10, 10, this.near, this.far);
//if(this.lightType == "pointLight")
shadowCamera.projection = matrix4.perspective(math.degToRad(this.degrees), width / height, this.near, this.far);
console.log(shadowCamera.projection);
this.composition = matrix4.composition(shadowCamera.view, shadowCamera.projection);
this.viewProjection = matrix4.mul(shadowCamera.view, shadowCamera.projection);
shadowCamera.far = this.far;
//if( face ) {
// shadowCamera.framebuffer.target = this.gl.TEXTURE_CUBE_MAP;
// shadowCamera.framebuffer.face = face;
// shadowCamera.framebuffer.attachment = this.gl.DEPTH_ATTACHMENT;
//} else {
//shadowCamera.framebuffer.target = this.gl.TEXTURE_2D;
/*
this.targetSampler = new sampler2D();
//this.targetSampler.type = this.gl.FLOAT;
//this.targetSampler.filter = this.gl.LINEAR;
//this.targetSampler.internalFormat = this.gl.RGBA32F;
//this.targetSampler.internalformat = this.gl.RGB;
//this.targetSampler.format = this.gl.RGB;
this.targetSampler.type = this.gl.FLOAT;
this.targetSampler.internalFormat = this.gl.RGBA32F;
this.framebuffer = new framebuffer();
this.framebuffer.setViewport( this.viewport );
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
/*
this.ambientOcclusionFramebuffer = new framebuffer();
this.ambientOcclusionFramebuffer.width = this.width;
this.ambientOcclusionFramebuffer.height = this.height;
var ambientOcclusionSampler = new sampler2D();
ambientOcclusionSampler.type = this.gl.FLOAT;
this.ambientOcclusionFramebuffer.addSampler( ambientOcclusionSampler );
this.ambientOcclusionFramebuffer.create();
*/
//shadowCamera.filter = this.gl.LINEAR;
return shadowCamera;
}
getCamera(){
return this.shadowCameras[0];
}
render() {
console.log("render depth");
//this.gl.enableVertexAttribArray(0);
this.gl.disableVertexAttribArray(1);
this.gl.disableVertexAttribArray(2);
this.gl.disableVertexAttribArray(3);
this.gl.disableVertexAttribArray(4);
this.gl.disableVertexAttribArray(5);
//this.gl.disableVertexAttribArray(6);
//this.gl.disableVertexAttribArray(7);
var shader = this.depthShader;
//var shadowCamera = this.shadowCameras[0];
for(var c = 0; c<this.shadowCameras.length; c++) {
var shadowCamera = this.shadowCameras[c];
//var framebuffer = shadowCamera.framebuffer.glFramebuffer;
//render shadow
if(this.renderToViewport)
this.gl.bindFramebuffer( this.gl.FRAMEBUFFER, null );
else
this.gl.bindFramebuffer( this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer );
//this.gl.bindFramebuffer( this.gl.FRAMEBUFFER,null );
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.gl.viewport(0, 0, this.width, this.height);
this.gl.enable( this.gl.DEPTH_TEST );
this.gl.disable(this.gl.CULL_FACE);
this.gl.cullFace( this.gl.FRONT );
var scene = this.viewport.scene;
var entitys = scene.getEntitys();
for(var e = 0;e<entitys.length;e++) {
var entity = entitys[e];
if(entity.type == "Actor") {
var mesh = entity.mesh;
var material = mesh.material;
//if(material.alpha == 1.0) {
var shader = this.depthShader;
var world = entity.getUpdatedWorldMatrix();
//var viewProjection = this.viewport.mainCamera.worldViewProjection;
var viewProjection = this.viewProjection;
//var camera = this.viewport.mainCamera;
//var viewProjection = camera.worldViewProjection;
shader.setUniform("viewProjection",viewProjection );
shader.setUniform("worldViewProjection", matrix4.mul(world, viewProjection) );
shader.setUniform("world", world );
if(entity.instancing) {
shader.setUniform("instancing", 1 );
}
//shader.setUniform("diffuseColor", material.diffuseColor);
shader.setUniform("near", this.near);
shader.setUniform("far", this.far);
//if(material.displacementMaps.length > 0)
// shader.setUniform("view", this.viewport.mainCamera.view );
mesh.setViewport(this.viewport );
mesh.createBuffers( );
material.setViewport( this.viewport );
material.updateShader( );
shader.update( this.viewport );
//shader.update();
var attribute = shader.getAttributeByName('position');
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, mesh.vertexPositionBuffer);
this.gl.vertexAttribPointer(attribute, 3, this.gl.FLOAT, false, 0, 0);
this.gl.bindBuffer( this.gl.ELEMENT_ARRAY_BUFFER, mesh.vertexIndexBuffer);
if(entity.instancing) {
this.gl.drawElementsInstanced( mesh.draw_type, mesh.vertexIndexBuffer.numItems, this.gl.UNSIGNED_INT, 0, 30 );
} else {
this.gl.drawElements( mesh.draw_type, mesh.vertexIndexBuffer.numItems, this.gl.UNSIGNED_INT, 0 );
}
//}
}
}
}
//this.gl.disable(this.gl.CULL_FACE);
this.gl.cullFace( this.gl.BACK );
this.gl.enableVertexAttribArray(1);
this.gl.enableVertexAttribArray(2);
this.gl.enableVertexAttribArray(3);
this.gl.enableVertexAttribArray(4);
//this.gl.enableVertexAttribArray(5);
}
createShadows( ) {
var lightPos = [0, 15, 0];
var shadowSampler = new samplerCube(this);
shadowSampler.internalformat = this.gl.RGB;
shadowSampler.format = this.gl.RGB;
shadowSampler.type = this.gl.FLOAT;
shadowSampler.width = 1024;
shadowSampler.height = 1024;
/*
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [1, 0, 0]), [0, -1, 0], this.gl.TEXTURE_CUBE_MAP_POSITIVE_X, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [-1, 0, 0]), [0, -1, 0], this.gl.TEXTURE_CUBE_MAP_NEGATIVE_X, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [0, 1, 0]), [0, 0, 1], this.gl.TEXTURE_CUBE_MAP_POSITIVE_Y, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [0, -1, 0]), [0, 0, -1], this.gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [0, 0, 1]), [0, -1, 0], this.gl.TEXTURE_CUBE_MAP_POSITIVE_Z, shadowSampler);
this.shadowCameras.push(shadowCamera);
var shadowCamera = this.createShadowCam(lightPos, kepler.vector3.add(lightPos, [0, 0, -1]), [0, -1, 0], this.gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, shadowSampler);
this.shadowCameras.push(shadowCamera);
*/
//this.depthShader.update();
var shadowSampler = new sampler2D();
shadowSampler.internalformat = this.gl.RGB;
shadowSampler.format = this.gl.RGB;
shadowSampler.type = this.gl.FLOAT;
shadowSampler.width = 1024;
shadowSampler.height = 1024;
//shadowSampler.bind(this.depthShader);
//this.depthShader.setUniform("far", shadowCamera.far );
/*
this.shadowShader = new shader();
this.shadowShader.createFromFile("https://community.tensorui.com/assets/shaders/shadow.shader");
this.shadowShader.setUniform("viewProjection", this.quadViewProjection );
this.shadowShader.setUniform("shadowSampler", shadowSampler );
this.shadowShader.setUniform("far", shadowCamera.far );
this.shadowShader.setUniform("lightViewProjection", shadowCamera.viewProjection );
this.shadowShader.setUniform("lightPosition", lightPos );
*/
}
}
export {depth as default};

23
engine/renderPasses/edgeDetection.js Executable file
View File

@@ -0,0 +1,23 @@
import defaultRenderPass from '../defaultRenderPass.js';
import sampler2D from '../sampler2D.js';
import shader from '../shader.js';
class convolution extends defaultRenderPass {
prepare() {
this.blend = true;
this.shader = new shader();
this.shader.createFromFile("shaders/edgeDetection.shader");
this.shader.setUniform("res", [1 / this.viewport.width, 1 / this.viewport.height] );
}
}
export {convolution as default};

185
engine/renderPasses/fxaa.js Executable file
View File

@@ -0,0 +1,185 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
import texture from '../texture.js';
class fxaa {
constructor( ) {
this.realtime = true;
}
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
console.log("prepare uber");
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D();
this.targetSampler.type = this.gl.FLOAT;
this.targetSampler.filter = this.gl.LINEAR;
this.framebuffer = new framebuffer();
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.multiSample = true;
this.framebuffer.setViewport( this.viewport );
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
this.shader = new shader();
this.shader.createFromFile("shaders/fxaa4.shader");
this.shader.setUniform("viewProjection", this.viewport.quad.viewProjection );
this.shader.setUniform("res", [this.width, this.height] );
this.shader.setUniform("screenSize", [this.width, this.height] );
this.shader.setUniform("inverseScreenSize", [1 /this.width, 1 /this.height] );
this.shader.setUniform("u_lumaThreshold", 0.5 );
this.shader.setUniform("u_mulReduce", 8 );
this.shader.setUniform("u_minReduce", 128 );
this.shader.setUniform("u_maxSpan", 8 );
this.shader.setUniform("u_showEdges", 0.0 );
this.shader.setUniform("u_fxaaOn", 1.0 );
this.msFB = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.msFB );
this.msRB = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, this.msRB);
const samples = 4;
const internalFormat = gl.RGBA32F;
const width = this.viewport.width;
const height = this.viewport.height;
gl.renderbufferStorageMultisample( gl.RENDERBUFFER, samples, internalFormat, width, height);
gl.framebufferRenderbuffer( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, this.msRB);
//checkFramebuffer(gl);
//gl.clearColor(1,0,0,1);
//gl.clear(gl.COLOR_BUFFER_BIT);
/*
this.texFB = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.texFB);
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
const levels = 1;
gl.texStorage2D(gl.TEXTURE_2D, levels, internalFormat, width, height);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
*/
}
render() {
//this.gl.bindFramebuffer(this.gl.READ_FRAMEBUFFER, this.fxaaFramebuffer.msaaFramebuffer );
//this.gl.bindFramebuffer(this.gl.DRAW_FRAMEBUFFER, this.fxaaFramebuffer.glFramebuffer );
//this.gl.blitFramebuffer(0, 0, this.width, this.height,
// 0, 0, this.width, this.height,
// this.gl.COLOR_BUFFER_BIT, this.gl.LINEAR);
/*
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer.glFramebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
*/
//this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
// this.msaaFramebuffer //Framebuffer
// this.msaaColorRenderBuffer //Renderbuffer
// this.msaaDepthRenderBuffer //Renderbuffer
//console.log(this.framebuffer.glFramebuffer);
//this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer);
//this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, this.framebuffer.msaaColorRenderBuffer);
//this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.msaaFramebuffer);
//if(this.renderToViewport)
// this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null );
//else
//this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.msFB );//msaaFramebuffer
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null );
//this.gl.bindRenderbuffer(this.gl.FRAMEBUFFER, this.msRB );
//this.shader.setUniform("cameraPosition", camera.eye );
this.shader.update(this.viewport);
this.gl.viewport(0, 0, this.viewport.width, this.viewport.height);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear( this.gl.COLOR_BUFFER_BIT );//this.gl.clear( this.gl.DEPTH_BUFFER_BIT );
this.gl.disable(this.gl.DEPTH_TEST);
this.viewport.quad.draw( this.shader, null );
/*
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.msFB);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer.glFramebuffer);
gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
gl.blitFramebuffer(
0, 0, this.width, this.height,
0, 0, this.width, this.height,
gl.COLOR_BUFFER_BIT, gl.LINEAR);
*/
/*
this.gl.bindFramebuffer(this.gl.READ_FRAMEBUFFER, this.framebuffer.msaaFramebuffer);
//this.gl.bindFramebuffer(this.gl.DRAW_FRAMEBUFFER, this.framebuffer.glFramebuffer);
this.gl.clearBufferfv(this.gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
this.gl.blitFramebuffer(
0, 0, this.width, this.height,
0, 0, this.width, this.height,
this.gl.COLOR_BUFFER_BIT, this.gl.NEAREST
);
this.gl.bindFramebuffer(this.gl.READ_FRAMEBUFFER, this.msaaFramebuffer );
this.gl.bindFramebuffer(this.gl.DRAW_FRAMEBUFFER, this.glFramebuffer );
this.gl.blitFramebuffer(0, 0, this.width, this.height,
0, 0, this.width, this.height,
this.gl.COLOR_BUFFER_BIT, this.gl.LINEAR);//this.gl.LINEAR
*/
}
}
export {fxaa as default};

62
engine/renderPasses/hdr.js Executable file
View File

@@ -0,0 +1,62 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
class hdr {
constructor( ) {
}
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
this.gl = this.engine.gl;
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D();
this.targetSampler.type = this.gl.FLOAT;
this.framebuffer = new framebuffer();
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
this.shader = new shader();
this.shader.createFromFile("shaders/hdr.shader");
this.shader.setUniform("viewProjection", this.viewport.quad.viewProjection );
this.shader.setUniform("screenSize", [this.width, this.height] );
}
render() {
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer);
//this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.shader.update();
this.viewport.quad.draw( this.shader, null );
}
}
export {hdr as default};

62
engine/renderPasses/highpassFilter.js Executable file
View File

@@ -0,0 +1,62 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
class highpassFilter {
constructor( ) {
}
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
this.gl = this.engine.gl;
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D();
this.targetSampler.type = this.gl.FLOAT;
this.framebuffer = new framebuffer();
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
this.shader = new shader();
this.shader.createFromFile("shaders/highpass.shader");
this.shader.setUniform("viewProjection", this.viewport.quad.viewProjection );
this.shader.setUniform("screenSize", [this.width, this.height] );
}
render() {
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer);
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.shader.update();
this.viewport.quad.draw( this.shader, null );
}
}
export {highpassFilter as default};

67
engine/renderPasses/selectEntity.js Executable file
View File

@@ -0,0 +1,67 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
class fxaa {
constructor( ) {
}
/**
* set viewport
* @param {(viewport)} viewport
**/
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D();
this.targetSampler.type = this.gl.FLOAT;
this.framebuffer = new framebuffer();
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
this.shader = new shader();
this.shader.createFromFile("shaders/template.shader");
this.shader.setUniform("viewProjection", this.viewport.quadViewProjection );
this.shader.setUniform("screenSize", [this.width, this.height] );
}
render() {
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer);
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.shader.update();
this.viewport.quad.draw( this.shader, null );
}
}
export {fxaa as default};

31
engine/renderPasses/shadow.js Executable file
View File

@@ -0,0 +1,31 @@
import defaultRenderPass from '../defaultRenderPass.js';
import sampler2D from '../sampler2D.js';
import shader from '../shader.js';
class shadow extends defaultRenderPass {
prepare() {
var randomTexure = kepler.resources.getTexture("rotrandom.png");
var randomSampler = new sampler2D();
randomSampler.addTexture(randomTexure);
var depthPasses = this.viewport.system.depthPasses;
var depthpass = depthPasses[0];
this.shader = new shader();
this.shader.createFromFile("shaders/shadow.shader");
this.shader.setUniform("bias", 0.36 );
this.shader.setUniform("minVariance", 0.0001 );
this.shader.setUniform("shadowNoiseSampler", randomSampler );
this.shader.setUniform("lightPosition", depthpass.lightPosition );
this.shader.setUniform("shadowDepthSampler", depthpass.framebuffer.getSampler() );
this.shader.setUniform("lightViewProjection", depthpass.viewProjection );
}
}
export {shadow as default};

67
engine/renderPasses/sobel.js Executable file
View File

@@ -0,0 +1,67 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
class fxaa {
constructor( ) {
}
/**
* set viewport
* @param {(viewport)} viewport
**/
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D();
this.targetSampler.type = this.gl.FLOAT;
this.framebuffer = new framebuffer();
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
this.shader = new shader();
this.shader.createFromFile("shaders/template.shader");
this.shader.setUniform("viewProjection", this.viewport.quad.viewProjection );
this.shader.setUniform("screenSize", [this.width, this.height] );
}
render() {
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer);
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.shader.update();
this.viewport.quad.draw( this.shader, null );
}
}
export {fxaa as default};

155
engine/renderPasses/ssao.js Executable file
View File

@@ -0,0 +1,155 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
class ssao {
constructor( ) {
this.realtime = true;
}
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
this.framebuffer = new framebuffer();
this.framebuffer.width = this.viewport.width;
this.framebuffer.height = this.viewport.height;
var ambientOcclusionSampler = new sampler2D();
ambientOcclusionSampler.type = this.gl.FLOAT;
this.framebuffer.setViewport( this.viewport );
this.framebuffer.addSampler( ambientOcclusionSampler );
this.framebuffer.create();
var randomImage2 = new Uint8Array ( [149,123,253,255, 126,3,96,255, 164,246,98,255, 154,177,13,255,
52,83,220,255, 1,142,142,255, 32,57,79,255, 48,159,32,255,
56,232,114,255, 177,216,203,255, 69,196,217,255, 240,165,81,255,
224,56,85,255, 232,89,189,255, 143,25,202,255, 117,73,12,255] );
var diffuseTexture = kepler.textureFromTypedArray( randomImage2, 4, 4 );
var randomSampler = new sampler2D();
randomSampler.texture = diffuseTexture;
this.shader = new shader();
this.shader.createFromFile("shaders/ambientOcclusion.shader");
this.shader.setUniform("viewProjection", this.viewport.quad.viewProjection );
this.shader.setUniform("screenWidth", this.viewport.width );
this.shader.setUniform("screenHeight", this.viewport.height );
this.shader.setUniform("far", this.viewport.mainCamera.far );
this.shader.setUniform("randomSampler", randomSampler);
var radius = 0.1;
var scale = [ vector3.scale( new vector3(-0.556641,-0.037109,-0.654297), radius ),
vector3.scale( new vector3(0.173828,0.111328,0.064453), radius ),
vector3.scale( new vector3(0.001953,0.082031,-0.060547), radius ),
vector3.scale( new vector3(0.220703,-0.359375,-0.062500), radius ),
vector3.scale( new vector3(0.242188,0.126953,-0.250000), radius ),
vector3.scale( new vector3(0.070313,-0.025391,0.148438), radius ),
vector3.scale( new vector3(-0.078125,0.013672,-0.314453), radius ),
vector3.scale( new vector3(0.117188,-0.140625,-0.199219), radius ),
vector3.scale( new vector3(-0.251953,-0.558594,0.082031), radius ),
vector3.scale( new vector3(0.308594,0.193359,0.324219), radius ),
vector3.scale( new vector3(0.173828,-0.140625,0.031250), radius ),
vector3.scale( new vector3(0.179688,-0.044922,0.046875), radius ),
vector3.scale( new vector3(-0.146484,-0.201172,-0.029297), radius ),
vector3.scale( new vector3(-0.300781,0.234375,0.539063), radius ),
vector3.scale( new vector3(0.228516,0.154297,-0.119141), radius ),
vector3.scale( new vector3(-0.119141,-0.003906,-0.066406), radius ),
vector3.scale( new vector3(-0.218750,0.214844,-0.250000), radius ),
vector3.scale( new vector3(0.113281,-0.091797,0.212891), radius ),
vector3.scale( new vector3(0.105469,-0.039063,-0.019531), radius ),
vector3.scale( new vector3(-0.705078,-0.060547,0.023438), radius ),
vector3.scale( new vector3(0.021484,0.326172,0.115234), radius ),
vector3.scale( new vector3(0.353516,0.208984,-0.294922), radius ),
vector3.scale( new vector3(-0.029297,-0.259766,0.089844), radius ),
vector3.scale( new vector3(-0.240234,0.146484,-0.068359), radius ),
vector3.scale( new vector3(-0.296875,0.410156,-0.291016), radius ),
vector3.scale( new vector3(0.078125,0.113281,-0.126953), radius ),
vector3.scale( new vector3(-0.152344,-0.019531,0.142578), radius ),
vector3.scale( new vector3(-0.214844,-0.175781,0.191406), radius ),
vector3.scale( new vector3(0.134766,0.414063,-0.707031), radius ),
vector3.scale( new vector3(0.291016,-0.833984,-0.183594), radius ),
vector3.scale( new vector3(-0.058594,-0.111328,0.457031), radius ),
vector3.scale( new vector3(-0.115234,-0.287109,-0.259766), radius ) ];
var kernelRad = [[1.163003/radius,4.624262/radius,9.806342/radius,2.345541/radius],
[2.699039/radius,6.016871/radius,3.083554/radius,3.696197/radius],
[1.617461/radius,2.050939/radius,4.429457/radius,5.234036/radius],
[3.990876/radius,1.514475/radius,3.329241/radius,7.328508/radius],
[2.527725/radius,3.875453/radius,8.760140/radius,1.412308/radius],
[2.885205/radius,1.977866/radius,3.617674/radius,3.453552/radius],
[1.712336/radius,5.341163/radius,4.771728/radius,2.965737/radius],
[1.204293/radius,1.108428/radius,2.109570/radius,2.475453/radius] ];
//this.shader.setUniform("scale", scale );
//this.shader.setUniform("kernelRad", kernelRad );
//this.shader.setUniform("kernel", scale );
//this.shader.setUniform("kernelRad", kernelRad );
this.shader.setUniform("far", this.viewport.mainCamera.far );
console.log("this.viewport.mainCamera.far", this.viewport.mainCamera.far);
//this.shader.setUniform("positionSampler", this.infoSampler );
//this.shader.setUniform("positionSampler", this.infoSampler );
// ssaoConvolutionFinalSampler );
var ssaoKernel = [];
for (var i = 0; i < 64; ++i)
{
var sample = [
Math.random() * 2.0 - 1.0,
Math.random() * 2.0 - 1.0,
Math.random()
];
sample = vector3.normalize(sample);
sample *= Math.random();
scale = i / 64.0;
ssaoKernel.push(sample);
}
this.shader.setUniform("samples", ssaoKernel );
this.shader.setUniform("parameters", [0.6, 0.075, 1.0, 1.0] );
}
render() {
if(this.renderToViewport)
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null );
else
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer );
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.viewport(0, 0, this.viewport.width, this.viewport.height);
this.viewport.quad.draw( this.shader, null );
}
}
export {ssao as default};

63
engine/renderPasses/template.js Executable file
View File

@@ -0,0 +1,63 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
class template {
constructor( ) {
}
/**
* set viewport
* @param {(viewport)} viewport
**/
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D( );
this.targetSampler.type = this.gl.FLOAT;
this.framebuffer = new framebuffer( );
this.framebuffer.setViewport( this.viewport );
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
this.shader = new shader();
this.shader.createFromFile("shaders/template.shader");
this.shader.setUniform("viewProjection", this.viewport.quad.viewProjection );
}
render() {
//this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer);
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.viewport.quad.draw( this.shader );
}
}
export {template as default};

20
engine/renderPasses/tonemap.js Executable file
View File

@@ -0,0 +1,20 @@
import defaultRenderPass from '../defaultRenderPass.js';
import sampler2D from '../sampler2D.js';
import shader from '../shader.js';
class tonemap extends defaultRenderPass {
prepare() {
this.shader = new shader();
this.shader.createFromFile("shaders/tonemap.shader");
this.shader.setUniform("viewProjection", this.viewport.quad.viewProjection );
}
}
export {tonemap as default};

227
engine/renderPasses/uber.js Executable file
View File

@@ -0,0 +1,227 @@
import framebuffer from '../framebuffer.js';
import sampler2D from '../sampler2D.js';
import {math, vector3, matrix4} from '../math.js';
import samplerCube from '../samplerCube.js';
import shader from '../shader.js';
class uber {
constructor( ) {
this.realtime = true;
}
setViewport( viewport ){
this.viewport = viewport;
this.gl = viewport.gl;
}
prepare() {
console.log("prepare uber");
this.width = this.viewport.width;
this.height = this.viewport.height;
this.targetSampler = new sampler2D();
this.targetSampler.type = this.gl.FLOAT;
this.targetSampler.filter = this.gl.LINEAR;
this.framebuffer = new framebuffer();
this.framebuffer.width = this.width;
this.framebuffer.height = this.height;
this.framebuffer.setViewport( this.viewport );
this.framebuffer.addSampler( this.targetSampler );
this.framebuffer.create();
var shadowNoiseTexure = kepler.resources.getTexture("rotrandom.png");
var shadowNoiseSampler = new sampler2D();
shadowNoiseSampler.addTexture(shadowNoiseTexure);
var sphericalHarmonics = [];
for(var c = 0; c<8; c++) {
sphericalHarmonics.push([Math.random, Math.random, Math.random]);
}
//this.reflectionSampler = new samplerCube();
//this.reflectionSampler.addTexture(kepler.resources.getTexture("positive_x"), this.gl.TEXTURE_CUBE_MAP_POSITIVE_X);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("negative_x"), this.gl.TEXTURE_CUBE_MAP_NEGATIVE_X);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("negative_y"), this.gl.TEXTURE_CUBE_MAP_POSITIVE_Y);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("positive_y"), this.gl.TEXTURE_CUBE_MAP_NEGATIVE_Y);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("positive_z"), this.gl.TEXTURE_CUBE_MAP_POSITIVE_Z);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("negative_z"), this.gl.TEXTURE_CUBE_MAP_NEGATIVE_Z);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_x.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_X);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_x.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_X);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_y.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Y);
///this.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_y.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Y);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_z.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Z);
//this.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_z.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Z);
this.reflectionSampler = this.viewport.system.reflectionSampler;
//deferredSampler.internalFormat = this.gl.RGBA8;
//deferredSampler.filter = this.gl.UNSIGNED_BYTE
this.shader = new shader();
this.shader.createFromFile( "shaders/deferred.shader");
this.shader.setUniform("viewProjection", this.viewport.quad.viewProjection );
this.shader.setUniform("reflectionSampler", this.reflectionSampler );
//this.shader.setUniform("materialSampler", materialSampler );
//this.shader.setUniform("shadowDepthSampler", this.viewport.shadowCameras[0].sampler );
this.shader.setUniform("shadowNoiseSampler", shadowNoiseSampler );
this.shader.setUniform("shadowBias", .6 );//0.03
var depthPasses = this.viewport.system.depthPasses;
var depthpass = depthPasses[0];
this.shader.setUniform("lightPosition", depthpass.lightPosition );
this.shader.setUniform("lightType", depthpass.lightType == "pointLight" ? 0 : 1 );
this.shader.setUniform("SpotAngles", [30, 0.1]);
this.shader.setUniform("LightColor", [1, 1, 1] );
this.shader.setUniform("far", this.viewport.mainCamera.far );
this.shader.setUniform("shadowFar", this.viewport.mainCamera.far );
this.shader.setUniform("anisotropy", 0.1 );
this.shader.setUniform("lightGeometry", [1.0 / 145.0, 4.0, 0.1] );
this.shader.setUniform("clearCoatColor", [1.0, 1.0, 1.0] );
this.shader.setUniform("lightColor", [1,1,1] ); //colorTemperatureToSRGB(6000.0) );
this.shader.setUniform("lightDirection", [0.0, -0.7, 0.5] );
this.shader.setUniform("luma_z", 1 );
//this.shader.setUniform("lightPosition", [0, 12, 12] );
this.shader.setUniform("lightIntensity", .81);
this.shader.setUniform("environmentLuminance", 0.6);
//this.shader.setUniform("lightIntensity", 1.3);
//this.shader.setUniform("environmentLuminance", 0.35);
this.shader.setUniform("roughness", 1. );
this.shader.setUniform("clearCoatRoughness", .2 );
this.shader.setUniform("clearCoat", 0.3 );
this.shader.setUniform("clearCoatThickness", 0.2 );
this.shader.setUniform("metallic", .0 );
this.shader.setUniform("reflectance", 0.1);
this.shader.setUniform("reflectance", 0.0);
this.shader.setUniform("sphericalHarmonics", sphericalHarmonics );
this.shader.setUniform("attenuation", 3 );
}
toViewport( yeas ) {
this.renderToViewport = yeas;
this.shader.setUniform("luma_z", this.renderToViewport ? 0 : 1 );
}
colorTemperatureToSRGB(T) {
// Compute CCT in CIE 1960 space
var u = (0.860117757 + 1.54118254e-4 * T + 1.28641212e-7 * T * T) /
(1 + 8.42420235e-4 * T + 7.08145163e-7 * T * T);
var v = (0.317398726 + 4.22806245e-5 * T + 4.20481691e-8 * T * T) /
(1 - 2.89741816e-5 * T + 1.61456053e-7 * T * T);
// Convert to xyY
var x = (3.0 * u) / (2.0 * u - 8.0 * v + 4.0);
var y = (2.0 * v) / (2.0 * u - 8.0 * v + 4.0);
// Convert to XYZ
var XYZ = [x / y, 1.0, (1.0 - x - y) / y];
// Convert to linear sRGB
var rgb = [
XYZ[0] * 3.2406 + XYZ[1] * -1.5372 + XYZ[2] * -0.4986,
XYZ[0] * -0.9689 + XYZ[1] * 1.8758 + XYZ[2] * 0.0415,
XYZ[0] * 0.0557 + XYZ[1] * -0.2040 + XYZ[2] * 1.0570
];
var max = Math.max(rgb[0], Math.max(rgb[1], rgb[2]));
rgb[0] /= max;
rgb[1] /= max;
rgb[2] /= max;
return rgb;
}
render() {
//console.log("render uber");
var camera = this.viewport.mainCamera;
var scene = this.viewport.scene;
var entitys = scene.getEntitys();
var deferredShader = this.shader;
if(this.renderToViewport)
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null );
else
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer.glFramebuffer );//msaaFramebuffer
deferredShader.setUniform("cameraPosition", camera.eye );
deferredShader.update(this.viewport);
this.gl.viewport(0, 0, this.viewport.width, this.viewport.height);
this.gl.clearColor( 0, 0, 0, 1 );
this.gl.clear( this.gl.DEPTH_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT );//this.gl.clear( this.gl.DEPTH_BUFFER_BIT );
this.gl.enable( this.gl.DEPTH_TEST );
this.gl.enable( this.gl.CULL_FACE );
//this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
//this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
//nnee
//this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);//nnee
//this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
//var lights = 0;
//this.gl.disable(this.gl.DEPTH_TEST);
//this.gl.enable(this.gl.BLEND);
//this.gl.enable(this.gl.DEPTH_TEST);
//this.gl.enable(this.gl.BLEND);
//this.gl.blendEquation(this.gl.FUNC_ADD);
//this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
//deferredShader.setUniform("lightViewProjection", this.viewport.shadowCameras[0].viewProjection );
//this.shader.setUniform("lightPosition", [1,1999, 1000], true );
var depthPasses = this.viewport.system.depthPasses;
this.viewport.quad.draw( deferredShader, null );
//for(var e = 0;e<depthPasses.length;e++) {
//this.gl.clear( this.gl.DEPTH_BUFFER_BIT);
//var depthPass = depthPasses[e];
//this.shader.setUniform("lightPosition", depthPass.lightPosition, true );
//}
}
}
export {uber as default};