Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 b98a2f51 编写于 作者: B Ben Houston
浏览文件
操作

add IBL maps to the physical and standard variations to better catch bugs with IBL.

上级 532c223d
隐藏空白更改
内联 并排
Showing with 139 addition and 68 deletion
examples/webgl_materials_variations_physical.html
浏览文件 @ b98a2f51
......@@ -26,13 +26,20 @@
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Physical Material Variations by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Physical Material Variations by <a href="http://clara.io/" target="_blank">Ben Houston</a>.<br/><br/>
Note: Every second sphere has an IBL environment map on it.</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/RGBELoader.js"></script>
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
......@@ -61,54 +68,82 @@
//
var reflectionCube = new THREE.CubeTextureLoader()
.setPath( 'textures/cube/SwedishRoyalCastle/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
reflectionCube.format = THREE.RGBFormat;
var genCubeUrls = function( prefix, postfix ) {
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
};
var textureCube = new THREE.CubeTextureLoader()
.setPath( 'textures/cube/pisa/' )
.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
scene = new THREE.Scene();
scene.background = reflectionCube;
scene.background = textureCube;
var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
var hdrCubeRenderTarget = null;
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
// Materials
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
// Materials
var cubeWidth = 400;
var numberOfSphersPerSide = 5;
var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
var stepSize = 1.0 / numberOfSphersPerSide;
var cubeWidth = 400;
var numberOfSphersPerSide = 5;
var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
var stepSize = 1.0 / numberOfSphersPerSide;
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
var index = 0;
for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
var material = new THREE.MeshPhysicalMaterial( {
color: diffuseColor,
metalness: 0,
roughness: 0.5,
clearCoat: 1.0 - alpha,
clearCoatRoughness: 1.0 - beta,
reflectivity: 1.0 - gamma,
envMap: reflectionCube
} );
var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.25 );
var mesh = new THREE.Mesh( geometry, material );
var material = new THREE.MeshPhysicalMaterial( {
color: diffuseColor,
metalness: 0,
roughness: 0.5,
clearCoat: 1.0 - alpha,
clearCoatRoughness: 1.0 - beta,
reflectivity: 1.0 - gamma,
envMap: ( index % 2 ) == 1 ? hdrCubeRenderTarget.texture : null
} );
mesh.position.x = alpha * 400 - 200;
mesh.position.y = beta * 400 - 200;
mesh.position.z = gamma * 400 - 200;
index ++;
scene.add( mesh );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = alpha * 400 - 200;
mesh.position.y = beta * 400 - 200;
mesh.position.z = gamma * 400 - 200;
scene.add( mesh );
}
index ++;
}
index ++;
}
}
});
function addLabel( name, location ) {
......@@ -161,6 +196,8 @@
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMappingExposure = 0.75;
//
......
examples/webgl_materials_variations_standard.html
浏览文件 @ b98a2f51
......@@ -26,10 +26,16 @@
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Standard Material Variations by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Standard Material Variations by <a href="http://clara.io/" target="_blank">Ben Houston</a>.<br/><br/>
Note: Every second sphere has an IBL environment map on it.</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/RGBELoader.js"></script>
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
......@@ -60,14 +66,23 @@
camera.position.set( 0.0, 400, 400 * 3.5 );
//
var reflectionCube = new THREE.CubeTextureLoader()
.setPath( 'textures/cube/SwedishRoyalCastle/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
reflectionCube.format = THREE.RGBFormat;
var genCubeUrls = function( prefix, postfix ) {
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
};
var textureCube = new THREE.CubeTextureLoader()
.setPath( 'textures/cube/pisa/' )
.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
scene = new THREE.Scene();
scene.background = reflectionCube;
scene.background = textureCube;
var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
var hdrCubeRenderTarget = null;
// Materials
......@@ -76,50 +91,67 @@
imgTexture.anisotropy = 16;
imgTexture = null;
var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading;
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
var materials = [];
var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading;
var cubeWidth = 400;
var numberOfSphersPerSide = 5;
var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
var stepSize = 1.0 / numberOfSphersPerSide;
var materials = [];
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
var cubeWidth = 400;
var numberOfSphersPerSide = 5;
var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
var stepSize = 1.0 / numberOfSphersPerSide;
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
var index = 0;
for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
// basic monochromatic energy preservation
var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 );
for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
var material = new THREE.MeshStandardMaterial( {
map: imgTexture,
bumpMap: imgTexture,
bumpScale: bumpScale,
color: diffuseColor,
metalness: beta,
roughness: 1.0 - alpha,
shading: THREE.SmoothShading,
envMap: alphaIndex % 2 === 0 ? null : reflectionCube
} );
// basic monochromatic energy preservation
var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 );
var mesh = new THREE.Mesh( geometry, material );
var material = new THREE.MeshStandardMaterial( {
map: imgTexture,
bumpMap: imgTexture,
bumpScale: bumpScale,
color: diffuseColor,
metalness: beta,
roughness: 1.0 - alpha,
shading: THREE.SmoothShading,
envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture
} );
mesh.position.x = alpha * 400 - 200;
mesh.position.y = beta * 400 - 200;
mesh.position.z = gamma * 400 - 200;
index ++;
scene.add( mesh );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = alpha * 400 - 200;
mesh.position.y = beta * 400 - 200;
mesh.position.z = gamma * 400 - 200;
scene.add( mesh );
}
}
index ++;
}
}
});
function addLabel( name, location ) {
......@@ -172,6 +204,8 @@
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMappingExposure = 0.75;
//
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或