Skip to content

Recent examples cleanup #8256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 1, 2016
Merged

Recent examples cleanup #8256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
450ab30
fix compatibility issues between PRs.
bhouston Mar 1, 2016
9c794f6
add exposure control to envmaps_hdr example. add async texture loadi…
bhouston Mar 1, 2016
442960a
add async texture loading to webgl_material_transparency example.
bhouston Mar 1, 2016
a723e8b
better defaults, better background and text colors.
bhouston Mar 1, 2016
4f1b093
make text descriptions more readable on small screens.
bhouston Mar 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 21 additions & 23 deletions examples/webgl_materials_envmaps_hdr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - materials</title>
<title>threejs webgl - materials - hdr environment mapping</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #fff;
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
Expand All @@ -16,6 +16,7 @@
margin: 0px;
overflow: hidden;
}
a { color: #00f }

#info {
position: absolute;
Expand Down Expand Up @@ -65,6 +66,7 @@
roughness: 1.0,
bumpScale: 0.3,
background: false,
exposure: 1.0,
};
var camera, scene, renderer, controls, objects = [];
var hdrCubeMap;
Expand All @@ -86,27 +88,12 @@
scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer( { antialias: false } );

var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
roughnessTexture.wrapS = THREE.RepeatWrapping;
roughnessTexture.wrapT = THREE.RepeatWrapping;
roughnessTexture.repeat.set( 9, 2 );

var hdrType = THREE.UnsignedByteType;

/*
if ( renderer.extensions.get( 'OES_texture_half_float' ) && renderer.extensions.get( 'OES_texture_half_float_linear' ) ) {
hdrType = THREE.HalfFloatType;
} else if ( renderer.extensions.get( 'OES_texture_float' ) && renderer.extensions.get( 'OES_texture_float_linear' ) ) {
hdrType = THREE.FloatType;
}
*/
renderer.setClearColor( new THREE.Color( 0xffffff ) );
renderer.toneMapping = THREE.LinearToneMapping;

standardMaterial = new THREE.MeshStandardMaterial( {
map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05,
bumpMap: roughnessTexture,
color: 0xffffff,
metalness: 0.9,
roughness: 1.0,
Expand Down Expand Up @@ -137,6 +124,17 @@
planeMesh1.receiveShadow = true;
scene.add( planeMesh1 );

var textureLoader = new THREE.TextureLoader();
textureLoader.load( "../examples/textures/roughness_map.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 9, 2 );
standardMaterial.roughnessMap = map;
standardMaterial.bumpMap = map;
standardMaterial.needsUpdate = true;
} );

var genCubeUrls = function( prefix, postfix ) {
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
Expand All @@ -146,7 +144,7 @@
};

var hdrUrls = genCubeUrls( "../examples/textures/cube/pisaHDR/", ".hdr" );
new THREE.HDRCubeTextureLoader().load( hdrType, hdrUrls, function ( hdrCubeMap ) {
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm why is this param now using UnsignedByteType? Doesn't that mean the PMREMGenerator is getting clamped colours?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you use half or float, it unpacks the *.hdr maps into float or half buffers as appropriate. If you specify UnsignedByte, it keeps the original RGBE byte encoding and does live decoding within the fragment shader (because texture.encoding = THREE.RGBEEncoding.) RGBE is 8bit per channel, but the E is the exponent. Thus it is 16 bit floating point with a shared 8 exponent in the former:

r = R * 2^ ( E * 255 - 128.0 )
g = G * 2^ ( E * 255 - 128.0 )
b = B * 2^ ( E * 255 - 128.0 )

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, good to know.

Switching it to FloatType produces errors on Windows (ANGLE maybe?). FloatType works fine on OSX.

Error: WebGL: generateMipmap: Texture at base level is not unsized internal format or is not color-renderable or texture-filterable.

blackuv

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FloatType worked for me on my Windows PC.

I believe it is related to asking for the right extension before using it. You need both OES_texture_float and oes_texture_float_linear available for float, and oes_texture_half_float and oes_texture_half_float_linear for Half support.


var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
Expand All @@ -158,9 +156,6 @@

standardMaterial.envMap = hdrCubeRenderTarget;
standardMaterial.needsUpdate = true;

floorMaterial.envMap = hdrCubeRenderTarget;
floorMaterial.needsUpdate = true;
} );

var ldrUrls = genCubeUrls( "../examples/textures/cube/pisa/", ".png" );
Expand Down Expand Up @@ -238,6 +233,7 @@
gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
gui.add( params, 'roughness', 0, 1 );
gui.add( params, 'bumpScale', - 1, 1 );
gui.add( params, 'exposure', 0.1, 2 );
gui.open();

}
Expand Down Expand Up @@ -280,6 +276,8 @@

}

renderer.toneMappingExposure = params.exposure;

var timer = Date.now() * 0.00025;

camera.lookAt( scene.position );
Expand Down
46 changes: 27 additions & 19 deletions examples/webgl_materials_transparency.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - materials</title>
<title>threejs webgl - materials - transparency</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
Expand All @@ -16,6 +16,7 @@
margin: 0px;
overflow: hidden;
}
a { color: #eee }

#info {
position: absolute;
Expand All @@ -27,7 +28,7 @@
<body>

<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Transparency with Non-Premultipled Alpha (left) versus Premultiplied Alpha (right) with RGBA8 Buffers by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Transparency with Premultiplied Alpha (right) and without (left)<br /> using RGBA8 Buffers by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>

<script src="../build/three.min.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
Expand All @@ -53,7 +54,7 @@

var container, stats;
var params = {
opacity: 0.5,
opacity: 0.2,
roughness: 1.0,
bumpScale: 0.3
};
Expand All @@ -76,44 +77,51 @@

renderer = new THREE.WebGLRenderer( { antialias: false } );

var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
roughnessTexture.wrapS = THREE.RepeatWrapping;
roughnessTexture.wrapT = THREE.RepeatWrapping;
roughnessTexture.repeat.set( 9, 2 );

standardMaterial = new THREE.MeshStandardMaterial( {
map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05,
bumpMap: roughnessTexture,
color: 0xffffff,
color: 0x0304ff,
metalness: 0.9,
roughness: 1.0,
roughness: 0.5,
shading: THREE.SmoothShading,
transparent: true
} );
var geometry = new THREE.SphereGeometry( 18, 30, 30 );
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
torusMesh1.position.x = -20.0;
torusMesh1.position.x = 20.0;
torusMesh1.castShadow = true;
scene.add( torusMesh1 );
objects.push( torusMesh1 );

standardMaterialPremultiplied = new THREE.MeshStandardMaterial( {
map: null,
roughnessMap: roughnessTexture,
bumpScale: - 0.05,
bumpMap: roughnessTexture,
color: 0xffffff,
color: 0x0304ff,
metalness: 0.9,
roughness: 1.0,
roughness: 0.5,
shading: THREE.SmoothShading,
blending: THREE.PremultipliedAlphaBlending,
transparent: true
} );

var textureLoader = new THREE.TextureLoader();
textureLoader.load( "../examples/textures/roughness_map.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 2, 2 );
standardMaterial.map = map;
standardMaterial.roughnessMap = map;
//standardMaterial.bumpMap = map;
standardMaterial.needsUpdate = true;
standardMaterialPremultiplied.map = map;
standardMaterialPremultiplied.roughnessMap = map;
//standardMaterialPremultiplied.bumpMap = map;
standardMaterialPremultiplied.needsUpdate = true;
} );

var torusMesh2 = new THREE.Mesh( geometry, standardMaterialPremultiplied );
torusMesh2.position.x = 20.0;
torusMesh2.position.x = -20.0;
torusMesh2.castShadow = true;
scene.add( torusMesh2 );
objects.push( torusMesh2 );
Expand All @@ -134,7 +142,6 @@
planeMesh1.receiveShadow = true;
scene.add( planeMesh1 );


// Lights

scene.add( new THREE.AmbientLight( 0x222222 ) );
Expand All @@ -143,6 +150,7 @@
spotLight.position.set( 50, 100, 50 );
spotLight.angle = Math.PI / 7;
spotLight.penumbra = 0.8
spotLight.intensity = 5;
spotLight.castShadow = true;
scene.add( spotLight );

Expand Down
17 changes: 10 additions & 7 deletions examples/webgl_tonemapping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - materials</title>
<title>threejs webgl - inline tone mapping</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #fff;
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
Expand All @@ -17,6 +17,8 @@
overflow: hidden;
}

a { color: #222 }

#info {
position: absolute;
top: 0px; width: 100%;
Expand All @@ -27,7 +29,7 @@
<body>

<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Inline Tone Mapping (within a Material's fragment shader) without using a pre-processing step or float/half buffers by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Inline Tone Mapping (within a Material's fragment shader) without<br/>using a pre-processing step or float/half buffers by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>

<script src="../build/three.min.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
Expand All @@ -39,7 +41,7 @@
<script src="../examples/js/libs/dat.gui.min.js"></script>
<script src="../src/loaders/BinaryTextureLoader.js"></script>
<script src="../examples/js/loaders/RGBELoader.js"></script>
<script src="../examples/js/loaders/HDRCubeMapLoader.js"></script>
<script src="../examples/js/loaders/HDRCubeTextureLoader.js"></script>
<script src="../examples/js/Half.js"></script>
<script src="../examples/js/Encodings.js"></script>
<script src="../examples/js/pmrem/PMREMGenerator.js"></script>
Expand All @@ -64,8 +66,8 @@
roughness: 1.0,
bumpScale: 1.0,
exposure: 3.0,
whitePoint: 1.0,
toneMapping: "Cineon",
whitePoint: 5.0,
toneMapping: "Uncharted2",
renderMode: "Renderer"
};

Expand Down Expand Up @@ -95,6 +97,7 @@
scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( new THREE.Color( 0xffffff ) );

standardMaterial = new THREE.MeshStandardMaterial( {
bumpScale: - 0.05,
Expand Down Expand Up @@ -165,7 +168,7 @@
hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
];

var hdrCubeMap = new THREE.HDRCubeMapLoader().load( THREE.UnsignedByteType, hdrurls, function ( hdrCubeMap ) {
var hdrCubeMap = new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrurls, function ( hdrCubeMap ) {

var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
Expand Down