300 lines
8.8 KiB
HTML
300 lines
8.8 KiB
HTML
|
<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>
|