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

199
demos/metalic.htm Executable file
View File

@@ -0,0 +1,199 @@
<html>
<head>
<title>Kepler</title>
<script src="../media/libs/jquery/jquery.js"></script>
</head>
<script>
var kepler;
var gl;
</script>
<script type="module">
import keplerEngine from '../engine/kepler.js';
import entity from '../engine/entity.js';
import material from '../engine/material.js';
import sampler2D from '../engine/sampler2D.js';
import samplerCube from '../engine/samplerCube.js';
import mesh from '../engine/mesh.js';
import viewport from '../engine/viewport.js';
import {matrix4} from '../engine/math.js';
import template from '../engine/renderPasses/template.js';
import scene from '../engine/scene.js';
kepler = new keplerEngine();
var ViewPort = new viewport("keplerEngine");
ViewPort.scene = new scene();
kepler.assimpLoader.load( "demo.json", ViewPort.scene );
var light = new entity( );
light.name = "skylight";
light.transform.position = [0, 20.1, -20.01];
light.type = "skyLight";
//light.type = "pointLight";
light.transform.direction = [0, -4, -0.01];
//light.showFrustum = true;
light.degrees = 60;
ViewPort.scene.addEntity( light );
//ViewPort.system.setRenderMode("deferred");
ViewPort.system.reflectionSampler = new samplerCube();
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_x.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_X);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_x.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_X);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_y.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Y);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_y.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Y);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_z.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Z);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_z.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Z);
var materialNames = ["plasticpattern1", "scuffed-plastic", "rustediron-streaks", "octostone", "paint-peeling", "wornpaintedcement", "pockedconcrete1", "hardwood-brown-planks", "darktiles1"];
for(var c = 0; c < 6; c++) {
var materialName = '';
var x = (270 * c);
createMeshInstance( materialName, [x-600, 0, 0], c, ViewPort);
}
function createMeshInstance(textureName, position, index, currentViewport ) {
console.log(textureName);
var diffuseTexture = kepler.resources.getTexture( "pbr-1024/"+textureName+"/"+textureName+"-albedo.png" );
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
var normalTexture = kepler.resources.getTexture( "pbr-1024/"+textureName+"/"+textureName+"-normal.png" );
var normalSampler = new sampler2D();
normalSampler.addTexture(normalTexture);
var roughnessTexture = kepler.resources.getTexture( "pbr-512/"+textureName+"/"+textureName+"-roughness"+".png" );
var roughnessSampler = new sampler2D();
roughnessSampler.addTexture(roughnessTexture);
var instanceMaterial = new material();
//instanceMaterial.addTexture(diffuseSampler);
//instanceMaterial.addNormal(normalSampler);
//instanceMaterial.addRoughness(roughnessSampler);
//instanceMaterial.shadingModelID = material.id;
instanceMaterial.diffuseColor = [130/256,170/256,211/256];
instanceMaterial.metallic = index / 6;
instanceMaterial.alpha = 1;
instanceMaterial.create();
instanceMaterial.roughness = .2;
console.log(currentViewport.scene);
//copyMesh
var oldEntity = ViewPort.scene.getEntityByName("GrayInlay");
var oldMesh = oldEntity.mesh;
var meshCopy = new mesh();
// old way
//meshCopy.createMeshFromArrays( oldMesh.indices,
// oldMesh.vertices,
// oldMesh.normals,
// oldMesh.textureCoordinates,
// oldMesh.tangents,
// oldMesh.binormals );
meshCopy.copyMesh( oldMesh );
meshCopy.addMaterial(instanceMaterial);
var cloneEntity = new entity();
cloneEntity.parent = ViewPort.scene.entitys[5].parent;
cloneEntity.addMesh( meshCopy );
cloneEntity.name = textureName;
cloneEntity.transform.position = position;
cloneEntity.transform.update();
currentViewport.scene.addEntity( cloneEntity );
}
ViewPort.scene.getEntityByName("GrayInlay").mesh.material.alpha = 0;
kepler.addViewport( ViewPort );
// Material
var groundMaterial = new material();
// Samplers
var normalTexture = kepler.resources.getTexture("0_floorTiles_ddn.png");
var normalSampler = new sampler2D();
normalSampler.addTexture(normalTexture);
var diffuseTexture = kepler.resources.getTexture("0_floorTiles_diff.png");
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
groundMaterial.addTexture(diffuseSampler);
groundMaterial.addNormal(normalSampler);
//groundMaterial.addRoughness(normalSampler);
// 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;
// Cube mesh
var cubeMesh = ViewPort.primitives.createCube(10);
cubeMesh.addMaterial(groundMaterial);
// Cube Entity
var cubeEntity = new entity( );
cubeEntity.addMesh( cubeMesh );
cubeEntity.name = "wireframe cube";
cubeEntity.transform.position = [0, -10, 0];
cubeEntity.transform.update();
ViewPort.scene.addEntity( cubeEntity );
var skyMaterial = new material();
skyMaterial.roughness = 0.4;
skyMaterial.diffuseColor = [179/256,199/256,217/256];
skyMaterial.alpha = 1;
skyMaterial.uvMultiplier = 6;
skyMaterial.shadingModelID = 100.0;
ViewPort.scene.getEntityByName("GrayInlay").mesh.material.diffuseColor = [1,1,1];
kepler.application();
</script>
<body style="margin: 0;">
<img src="../media/textures/logo.png" style="position: absolute;left:0; top:10px;" >
<canvas id="keplerEngine" style="width: 100%; height: 100%;"></canvas>
</body>
</html>

175
demos/new.htm Executable file
View File

@@ -0,0 +1,175 @@
<html>
<head>
<title>Kepler</title>
</head>
<link rel="stylesheet" type="text/css" href="../loading-bar.css"/>
<script type="text/javascript" src="../loading-bar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
<link rel="stylesheet" href="../style.css" type="text/css">
<script type="module">
import keplerEngine from '../engine/kepler.js';
import entity from '../engine/entity.js';
import material from '../engine/material.js';
import sampler2D from '../engine/sampler2D.js';
import {matrix4} from '../engine/math.js';
var kepler = new keplerEngine();
kepler.bar = new ldBar(".preloader");
kepler.initialize = function() {
this.resources.addTexture("media/textures/white.png", 'white');
this.resources.addTexture("media/textures/rotrandom.png", 'random');
this.resources.addTexture("media/textures/0_floorTiles_diff.png", 'floorTiles_diff');
this.resources.addTexture("media/textures/0_floorTiles_ddn.png", 'floorTiles_normal');
this.resources.addTexture("media/textures/cubemaps-1024/positive_x.png", 'positive_x');
this.resources.addTexture("media/textures/cubemaps-1024/positive_y.png", 'positive_y');
this.resources.addTexture("media/textures/cubemaps-1024/positive_z.png", 'positive_z');
this.resources.addTexture("media/textures/cubemaps-1024/negative_x.png", 'negative_x');
this.resources.addTexture("media/textures/cubemaps-1024/negative_y.png", 'negative_y');
this.resources.addTexture("media/textures/cubemaps-1024/negative_z.png", 'negative_z');
//this.assimpLoader.load("room.json");
//this.assimpLoader.load("laren2.json");
}
kepler.callback = function() {
var engine = this;
var light = new entity( engine );
light.type = "PointLight";
light.name = "PhotometricLight003";
light.transform.local = matrix4.identity();
light.transform.world = matrix4.setTranslation( light.transform.local, [100.0702958800057496, 120.042, 4100] );
light.mesh = false;
light.attenuation = 1.5;
light.SourceRadius = 0;
light.SourceLength = 0;
engine.system.scene.rootEntity.addChild(light);
engine.system.scene.addEntity( light );
console.log(engine);
var currentMaterial = new material(engine);
var normalTexture = engine.resources.getTexture("floorTiles_normal");
var normalSampler = new sampler2D(engine);
normalSampler.addTexture(normalTexture);
currentMaterial.addNormal(normalSampler);
var diffuseTexture = engine.resources.getTexture("floorTiles_diff");
var diffuseSampler = new sampler2D(engine);
diffuseSampler.addTexture(diffuseTexture);
currentMaterial.addTexture( diffuseSampler );
currentMaterial.roughness = .0;
currentMaterial.shadingModelID = 256;
//material.diffuseColor = [88,175,255];
currentMaterial.alpha = 1;
var currentMesh = engine.primitives.createCube(10);
//var mesh = this.primitives.createSphere(2.6, 200, 200)
currentMesh.addMaterial(currentMaterial);
var box = new entity( engine );
box.addMesh(currentMesh);
box.name = "new box";
box.alpha = 0;
box.transform.position = [0, -10, 0];
box.transform.update();
box.mesh.boundingBox.fitBoxToPoints_(box.mesh.vertexPositionBuffer.data, box.transform.world);
engine.system.scene.addEntity( box );
engine.system.scene.rootEntity.addChild(box);
var skyMaterial = new material(engine);
var diffuseTexture = engine.resources.getTexture("white");
var diffuseSampler = new sampler2D( engine );
diffuseSampler.addTexture(diffuseTexture);
skyMaterial.addTexture(diffuseSampler);
skyMaterial.roughness = .0;
skyMaterial.shadingModelID = 100.0;
skyMaterial.diffuseColor = [88,175,255];
skyMaterial.alpha = 1;
skyMaterial.create();
var sphere = engine.primitives.createSphere(712.6, 200, 200)
sphere.addMaterial(skyMaterial);
var sky = new entity( engine );
sky.addMesh(sphere);
sky.name = "sky sphere";
sky.transform.position = [0, 20, 0];
sky.transform.update();
//engine.system.scene.addEntity( sky );
//engine.system.scene.rootEntity.addChild( sky );
}
kepler.application();
</script>
<body style="margin: 0;">
<div class="preloader_holder">
<div class="preloader"
data-preset="fan"
class="ldBar label-center"
style="width:100%;height:100%;margin:auto"
>
</div>
<div class="preloader_text">
</div>
</div>
<img src="media/textures/logo.png" style="position: absolute;left:0; top:10px;" >
<canvas id="keplerEngine" style="width: 100%; height: 100%;"></canvas>
</body>
</html>

300
demos/pointLight.htm Executable file
View File

@@ -0,0 +1,300 @@
<html>
<head>
<title>Kepler</title>
<script src="../media/libs/jquery/jquery.js"></script>
</head>
<script>
var kepler;
var gl;
var gl2;
</script>
<script type="module">
import keplerEngine from '../engine/kepler.js';
import entity from '../engine/entity.js';
import material from '../engine/material.js';
import sampler2D from '../engine/sampler2D.js';
import samplerCube from '../engine/samplerCube.js';
import mesh from '../engine/mesh.js';
import viewport from '../engine/viewport.js';
import {matrix4} from '../engine/math.js';
import template from '../engine/renderPasses/template.js';
import sceneNode from '../engine/scene.js';
kepler = new keplerEngine();
var ViewPort = new viewport("keplerEngine");
kepler.assimpLoader.load( "lamp.json", ViewPort.scene );
//kepler.assimpLoader.load( "demo.json", ViewPort.scene );
//ViewPort.system.setRenderMode("deferred");
ViewPort.system.reflectionSampler = new samplerCube();
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_x.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_X);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_x.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_X);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_y.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Y);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_y.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Y);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_z.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Z);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_z.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Z);
var light = new entity( );
light.name = "pointLight";
light.transform.position = [0, 4.1, 0.01];
//light.transform.position = [0, 15.1, 0.01];
light.type = "pointLight";
light.transform.direction = [0, -4, -0.01];
light.showFrustum = true;
//light.degrees = 30;
light.degrees = 130;
light.transform.update();
ViewPort.scene.addEntity( light );
/*
var light = new entity( );
light.name = "skylight";
light.transform.position = [0, 3.4, 12.01];
light.type = "pointLight";
light.showFrustum = true;
light.transform.update();
ViewPort.scene.addEntity( light );
*/
var found = ViewPort.scene.getLights();
console.log('found', found );
var materialNames = ["plasticpattern1", "scuffed-plastic", "rustediron-streaks", "octostone", "paint-peeling", "wornpaintedcement", "pockedconcrete1", "hardwood-brown-planks", "darktiles1"];
for(var c = 0; c < materialNames.length; c++) {
var materialName = materialNames[c];
var x = (3 * c) % 12;
var y = Math.floor(c / 3) * 3;
//if(c != 4)
//createMeshInstance( materialName, [x-3, -2.5, y-3],5, ViewPort);
}
function createMeshInstance(textureName, position, index, currentViewport ) {
console.log(textureName);
var diffuseTexture = kepler.resources.getTexture( "pbr-1024/"+textureName+"/"+textureName+"-albedo.png" );
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
var normalTexture = kepler.resources.getTexture( "pbr-1024/"+textureName+"/"+textureName+"-normal.png" );
var normalSampler = new sampler2D();
normalSampler.addTexture(normalTexture);
var roughnessTexture = kepler.resources.getTexture( "pbr-512/"+textureName+"/"+textureName+"-roughness"+".png" );
var roughnessSampler = new sampler2D();
roughnessSampler.addTexture(roughnessTexture);
var instanceMaterial = new material();
instanceMaterial.addTexture(diffuseSampler);
instanceMaterial.addNormal(normalSampler);
//instanceMaterial.addRoughness(roughnessSampler);
//instanceMaterial.shadingModelID = material.id;
instanceMaterial.alpha = 1;
instanceMaterial.create();
instanceMaterial.roughness = .2;
console.log(currentViewport.scene);
//copyMesh
var oldEntity = ViewPort.scene.getEntityByName("Almerich_Coco_S_mat(1)");
var oldMesh = oldEntity.mesh;
var meshCopy = new mesh();
// old way
//meshCopy.createMeshFromArrays( oldMesh.indices,
// oldMesh.vertices,
// oldMesh.normals,
// oldMesh.textureCoordinates,
// oldMesh.tangents,
// oldMesh.binormals );
meshCopy.copyMesh( oldMesh );
meshCopy.addMaterial(instanceMaterial);
var cloneEntity = new entity();
cloneEntity.parent = ViewPort.scene.rootEntity;
cloneEntity.addMesh( meshCopy );
cloneEntity.name = textureName;
cloneEntity.transform.position = position;
cloneEntity.transform.scale = [0.3, 0.3, 0.3];
cloneEntity.transform.rotateY(90);
cloneEntity.transform.update();
currentViewport.scene.addEntity( cloneEntity );
}
var oldEntity = ViewPort.scene.getEntityByName("GrayInlay");
//ViewPort.scene.getEntityByName("GrayInlay").mesh.material.diffuseColor = [1,1,1];
kepler.addViewport( ViewPort );
/*
// 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;
// Cube mesh
//var cubeMesh = ViewPort.primitives.createCube(10);
//radius, subdivisions, maxTexCoord
var frustumMesh = ViewPort.linePrimitives.createLineRingVertices(10, 10, 10);
var shadowCamera = ViewPort.system.createShadowCam( [0, 10, 1], [0, -1, 0], [0, 1, 0] )
var frustumMesh = ViewPort.linePrimitives.drawFrustum( shadowCamera.projection, shadowCamera.view );
//var depthpass = ViewPort.system.deferredRenderPipeline.getRenderpass("depth");
//depthpass.shadowCameras.push( shadowCamera );
//console.log("wireframe cube", cubeMesh);
console.log("wireframe frustum", frustumMesh);
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();
ViewPort.scene.addEntity( cubeEntity );
*/
// Samplers
var normalTexture = kepler.resources.getTexture("0_floorTiles_ddn.png");
var normalSampler = new sampler2D();
normalSampler.addTexture(normalTexture);
var diffuseTexture = kepler.resources.getTexture("0_floorTiles_diff.png");
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
var skyMaterial = new material();
skyMaterial.roughness = 0.4;
skyMaterial.diffuseColor = [179/256,199/256,217/256];
skyMaterial.alpha = 1;
skyMaterial.uvMultiplier = 6;
skyMaterial.addNormal(normalSampler);
skyMaterial.addTexture(diffuseSampler);
//skyMaterial.shadingModelID = 100.0;
var sphere = ViewPort.primitives.createSphere(2, 200, 200)
sphere.addMaterial(skyMaterial);
var box = new entity( );
box.addMesh(sphere);
box.name = "sky sphere";
box.transform.position = [1100, 0, 0];
box.transform.update();
ViewPort.scene.addEntity( box );
// Cube mesh
var cubeMesh = ViewPort.primitives.createCube(10);
var diffuseTexture = kepler.resources.getTexture("lamp/wood_diff.png");
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
var cubeMaterial = new material();
cubeMaterial.roughness = 0.4;
cubeMaterial.diffuseColor = [179/256,199/256,217/256];
cubeMaterial.alpha = 1;
cubeMaterial.uvMultiplier = 4;
//cubeMaterial.shadingModelID = 100.0;
//cubeMaterial.addNormal(normalSampler);
cubeMaterial.addTexture(diffuseSampler);
cubeMesh.addMaterial(cubeMaterial);
// Cube Entity
var cubeEntity = new entity( );
cubeEntity.addMesh( cubeMesh );
cubeEntity.name = "wireframe cube";
cubeEntity.transform.position = [0, -10, 0];
cubeEntity.transform.update();
ViewPort.scene.addEntity( cubeEntity );
var skyMaterial = new material();
skyMaterial.roughness = 0.4;
skyMaterial.diffuseColor = [179/256,199/256,217/256];
skyMaterial.alpha = 1;
skyMaterial.uvMultiplier = 1;
skyMaterial.shadingModelID = 100.0;
var sphere = ViewPort.primitives.createSphere(100, 200, 200)
sphere.addMaterial(skyMaterial);
var box = new entity( );
box.addMesh(sphere);
box.name = "sky sphere";
box.transform.position = [0, 0, 0];
box.transform.update();
//ViewPort.scene.addEntity( box );
kepler.application();
</script>
<body style="margin: 0; padding: 0;">
<img src="../media/textures/logo.png" style="position: absolute;left:0; top:10px;" >
<canvas id="keplerEngine" style="width: 100%; height: 100%; float:left;"></canvas>
</body>
</html>

200
demos/reflectance.htm Executable file
View File

@@ -0,0 +1,200 @@
<html>
<head>
<title>Kepler</title>
<script src="../media/libs/jquery/jquery.js"></script>
</head>
<script>
var kepler;
var gl;
</script>
<script type="module">
import keplerEngine from '../engine/kepler.js';
import entity from '../engine/entity.js';
import material from '../engine/material.js';
import sampler2D from '../engine/sampler2D.js';
import samplerCube from '../engine/samplerCube.js';
import mesh from '../engine/mesh.js';
import viewport from '../engine/viewport.js';
import {matrix4} from '../engine/math.js';
import template from '../engine/renderPasses/template.js';
import scene from '../engine/scene.js';
kepler = new keplerEngine();
var ViewPort = new viewport("keplerEngine");
ViewPort.scene = new scene();
kepler.assimpLoader.load( "demo.json", ViewPort.scene );
var light = new entity( );
light.name = "skylight";
light.transform.position = [0, 20.1, -20.01];
light.type = "skyLight";
//light.type = "pointLight";
light.transform.direction = [0, -4, -0.01];
//light.showFrustum = true;
light.degrees = 60;
ViewPort.scene.addEntity( light );
//ViewPort.system.setRenderMode("deferred");
ViewPort.system.reflectionSampler = new samplerCube();
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_x.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_X);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_x.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_X);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_y.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Y);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_y.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Y);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_z.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Z);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_z.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Z);
var materialNames = ["plasticpattern1", "scuffed-plastic", "rustediron-streaks", "octostone", "paint-peeling", "wornpaintedcement", "pockedconcrete1", "hardwood-brown-planks", "darktiles1"];
for(var c = 0; c < 6; c++) {
var materialName = '';
var x = (270 * c);
createMeshInstance( materialName, [x-600, 0, 0], c, ViewPort);
}
function createMeshInstance(textureName, position, index, currentViewport ) {
console.log(textureName);
var diffuseTexture = kepler.resources.getTexture( "pbr-1024/"+textureName+"/"+textureName+"-albedo.png" );
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
var normalTexture = kepler.resources.getTexture( "pbr-1024/"+textureName+"/"+textureName+"-normal.png" );
var normalSampler = new sampler2D();
normalSampler.addTexture(normalTexture);
var roughnessTexture = kepler.resources.getTexture( "pbr-512/"+textureName+"/"+textureName+"-roughness"+".png" );
var roughnessSampler = new sampler2D();
roughnessSampler.addTexture(roughnessTexture);
var instanceMaterial = new material();
//instanceMaterial.addTexture(diffuseSampler);
//instanceMaterial.addNormal(normalSampler);
//instanceMaterial.addRoughness(roughnessSampler);
//instanceMaterial.shadingModelID = material.id;
instanceMaterial.diffuseColor = [130/256,170/256,211/256];
instanceMaterial.metallic = index / 6;
instanceMaterial.alpha = 1;
instanceMaterial.create();
instanceMaterial.roughness = .2;
console.log(currentViewport.scene);
//copyMesh
var oldEntity = ViewPort.scene.getEntityByName("GrayInlay");
var oldMesh = oldEntity.mesh;
var meshCopy = new mesh();
// old way
//meshCopy.createMeshFromArrays( oldMesh.indices,
// oldMesh.vertices,
// oldMesh.normals,
// oldMesh.textureCoordinates,
// oldMesh.tangents,
// oldMesh.binormals );
meshCopy.copyMesh( oldMesh );
meshCopy.addMaterial(instanceMaterial);
var cloneEntity = new entity();
cloneEntity.parent = ViewPort.scene.entitys[5].parent;
cloneEntity.addMesh( meshCopy );
cloneEntity.name = textureName;
cloneEntity.transform.position = position;
cloneEntity.transform.update();
currentViewport.scene.addEntity( cloneEntity );
}
ViewPort.scene.getEntityByName("GrayInlay").mesh.material.alpha = 0;
kepler.addViewport( ViewPort );
// Material
var groundMaterial = new material();
// Samplers
var normalTexture = kepler.resources.getTexture("0_floorTiles_ddn.png");
var normalSampler = new sampler2D();
normalSampler.addTexture(normalTexture);
var diffuseTexture = kepler.resources.getTexture("0_floorTiles_diff.png");
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
groundMaterial.addTexture(diffuseSampler);
groundMaterial.addNormal(normalSampler);
//groundMaterial.addRoughness(normalSampler);
// 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;
// Cube mesh
var cubeMesh = ViewPort.primitives.createCube(10);
cubeMesh.addMaterial(groundMaterial);
// Cube Entity
var cubeEntity = new entity( );
cubeEntity.addMesh( cubeMesh );
cubeEntity.name = "wireframe cube";
cubeEntity.transform.position = [0, -10, 0];
cubeEntity.transform.update();
ViewPort.scene.addEntity( cubeEntity );
var skyMaterial = new material();
skyMaterial.reflectance = 0.4;
skyMaterial.diffuseColor = [179/256,199/256,217/256];
skyMaterial.alpha = 1;
skyMaterial.uvMultiplier = 6;
skyMaterial.shadingModelID = 100.0;
ViewPort.scene.getEntityByName("GrayInlay").mesh.material.diffuseColor = [1,1,1];
kepler.application();
</script>
<body style="margin: 0;">
<img src="../media/textures/logo.png" style="position: absolute;left:0; top:10px;" >
<canvas id="keplerEngine" style="width: 100%; height: 100%;"></canvas>
</body>
</html>

199
demos/rough.htm Executable file
View File

@@ -0,0 +1,199 @@
<html>
<head>
<title>Kepler</title>
<script src="../media/libs/jquery/jquery.js"></script>
</head>
<script>
var kepler;
var gl;
</script>
<script type="module">
import keplerEngine from '../engine/kepler.js';
import entity from '../engine/entity.js';
import material from '../engine/material.js';
import sampler2D from '../engine/sampler2D.js';
import samplerCube from '../engine/samplerCube.js';
import mesh from '../engine/mesh.js';
import viewport from '../engine/viewport.js';
import {matrix4} from '../engine/math.js';
import template from '../engine/renderPasses/template.js';
import scene from '../engine/scene.js';
kepler = new keplerEngine();
var ViewPort = new viewport("keplerEngine");
ViewPort.scene = new scene();
kepler.assimpLoader.load( "demo.json", ViewPort.scene );
var light = new entity( );
light.name = "skylight";
light.transform.position = [0, 20.1, -20.01];
light.type = "skyLight";
//light.type = "pointLight";
light.transform.direction = [0, -4, -0.01];
//light.showFrustum = true;
light.degrees = 70;
ViewPort.scene.addEntity( light );
//ViewPort.system.setRenderMode("deferred");
ViewPort.system.reflectionSampler = new samplerCube();
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_x.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_X);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_x.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_X);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_y.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Y);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_y.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Y);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/positive_z.png"), gl.TEXTURE_CUBE_MAP_POSITIVE_Z);
ViewPort.system.reflectionSampler.addTexture(kepler.resources.getTexture("cubemaps-1024/negative_z.png"), gl.TEXTURE_CUBE_MAP_NEGATIVE_Z);
var materialNames = ["plasticpattern1", "scuffed-plastic", "rustediron-streaks", "octostone", "paint-peeling", "wornpaintedcement", "pockedconcrete1", "hardwood-brown-planks", "darktiles1"];
for(var c = 0; c < 6; c++) {
var materialName = '';
var x = (270 * c);
createMeshInstance( materialName, [x-600, 0, 0], c, ViewPort);
}
function createMeshInstance(textureName, position, index, currentViewport ) {
console.log(textureName);
var diffuseTexture = kepler.resources.getTexture( "pbr-1024/"+textureName+"/"+textureName+"-albedo.png" );
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
var normalTexture = kepler.resources.getTexture( "pbr-1024/"+textureName+"/"+textureName+"-normal.png" );
var normalSampler = new sampler2D();
normalSampler.addTexture(normalTexture);
var roughnessTexture = kepler.resources.getTexture( "pbr-512/"+textureName+"/"+textureName+"-roughness"+".png" );
var roughnessSampler = new sampler2D();
roughnessSampler.addTexture(roughnessTexture);
var instanceMaterial = new material();
//instanceMaterial.addTexture(diffuseSampler);
//instanceMaterial.addNormal(normalSampler);
//instanceMaterial.addRoughness(roughnessSampler);
//instanceMaterial.shadingModelID = material.id;
instanceMaterial.diffuseColor = [130/256,170/256,211/256];
instanceMaterial.roughness = index / 6;
instanceMaterial.alpha = 1;
instanceMaterial.create();
console.log(currentViewport.scene);
//copyMesh
var oldEntity = ViewPort.scene.getEntityByName("GrayInlay");
var oldMesh = oldEntity.mesh;
var meshCopy = new mesh();
// old way
//meshCopy.createMeshFromArrays( oldMesh.indices,
// oldMesh.vertices,
// oldMesh.normals,
// oldMesh.textureCoordinates,
// oldMesh.tangents,
// oldMesh.binormals );
meshCopy.copyMesh( oldMesh );
meshCopy.addMaterial(instanceMaterial);
var cloneEntity = new entity();
cloneEntity.parent = ViewPort.scene.entitys[5].parent;
cloneEntity.addMesh( meshCopy );
cloneEntity.name = textureName;
cloneEntity.transform.position = position;
cloneEntity.transform.update();
currentViewport.scene.addEntity( cloneEntity );
}
ViewPort.scene.getEntityByName("GrayInlay").mesh.material.alpha = 0;
kepler.addViewport( ViewPort );
// Material
var groundMaterial = new material();
// Samplers
var normalTexture = kepler.resources.getTexture("0_floorTiles_ddn.png");
var normalSampler = new sampler2D();
normalSampler.addTexture(normalTexture);
var diffuseTexture = kepler.resources.getTexture("0_floorTiles_diff.png");
var diffuseSampler = new sampler2D();
diffuseSampler.addTexture(diffuseTexture);
groundMaterial.addTexture(diffuseSampler);
groundMaterial.addNormal(normalSampler);
//groundMaterial.addRoughness(normalSampler);
// 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;
// Cube mesh
var cubeMesh = ViewPort.primitives.createCube(10);
cubeMesh.addMaterial(groundMaterial);
// Cube Entity
var cubeEntity = new entity( );
cubeEntity.addMesh( cubeMesh );
cubeEntity.name = "wireframe cube";
cubeEntity.transform.position = [0, -10, 0];
cubeEntity.transform.update();
ViewPort.scene.addEntity( cubeEntity );
var skyMaterial = new material();
skyMaterial.reflectance = 0.4;
skyMaterial.diffuseColor = [179/256,199/256,217/256];
skyMaterial.alpha = 1;
skyMaterial.uvMultiplier = 6;
skyMaterial.shadingModelID = 100.0;
ViewPort.scene.getEntityByName("GrayInlay").mesh.material.diffuseColor = [1,1,1];
kepler.application();
</script>
<body style="margin: 0;">
<img src="../media/textures/logo.png" style="position: absolute;left:0; top:10px;" >
<canvas id="keplerEngine" style="width: 100%; height: 100%;"></canvas>
</body>
</html>