Skip to content

Commit

Permalink
Merge pull request #1 from DanielSturk/fix-textureCubeNode
Browse files Browse the repository at this point in the history 
Fix texture cube node
  • Loading branch information
@sunag
sunag authored Jun 15, 2019
2 parents 895829f + b1a14ec commit 57e588b
Show file tree
Hide file tree
Showing 2 changed files with 328 additions and 2 deletions.
17 changes: 15 additions & 2 deletions examples/js/nodes/misc/TextureCubeNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

import { TempNode } from '../core/TempNode.js';
import { TextureCubeUVNode } from './TextureCubeUVNode.js';
import { ColorSpaceNode } from '../utils/ColorSpaceNode.js';

function TextureCubeNode( value, uv ) {

Expand All @@ -26,8 +27,20 @@ TextureCubeNode.prototype.generate = function ( builder, output ) {
uv_20 = this.uv.build( builder ) + '.uv_20',
t = this.uv.build( builder ) + '.t';

var color10 = builder.getTexelDecodingFunctionFromTexture( 'texture2D( ' + this.value.build( builder, 'sampler2D' ) + ', ' + uv_10 + ' )', this.value.value ),
color20 = builder.getTexelDecodingFunctionFromTexture( 'texture2D( ' + this.value.build( builder, 'sampler2D' ) + ', ' + uv_20 + ' )', this.value.value );
var texture = this.value && this.value.value;
var format = texture && texture.encoding || THREE.LinearEncoding;
var decoding = ColorSpaceNode.prototype.getDecodingMethod(format);
function decode(input) {
return decoding[0] + '( ' + input +
(decoding[1] !== undefined ? ', ' + decoding[1] : '') +
' )';
}

var color10 = 'texture2D( ' + this.value.build( builder, 'sampler2D' ) + ', ' + uv_10 + ' )';
color10 = decode(color10);

var color20 = 'texture2D( ' + this.value.build( builder, 'sampler2D' ) + ', ' + uv_20 + ' )';
color20 = decode(color20);

return builder.format( 'vec4( mix( ' + color10 + ', ' + color20 + ', ' + t + ' ).rgb, 1.0 )', this.getType( builder ), output );

Expand Down
313 changes: 313 additions & 0 deletions examples/webgl_materials_envmaps_node.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,313 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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;
font-family:Monospace;
font-size:13px;
text-align:center;

background-color: #000;

margin: 0px;
overflow: hidden;
}
a { color: #00f }

#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
</style>
</head>
<body>

<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - High dynamic range (RGBE) Image-based Lighting (IBL)<br />using run-time generated pre-filtered roughness mipmaps (PMREM)<br/>
Created by Prashant Sharma and <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</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/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>

<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
<script src="js/libs/dat.gui.min.js"></script>

<script type="module">
/*
* COPIED FROM webgl_materials_envmaps_hdr.html
*
*
*
*/
import './js/nodes/THREE.Nodes.js';

if ( WEBGL.isWebGLAvailable() === false ) {

document.body.appendChild( WEBGL.getWebGLErrorMessage() );

}

var params = {
envMap: 'HDR',
roughness: 0.0,
metalness: 0.0,
exposure: 1.0,
debug: false,
};

var container, stats;
var camera, scene, renderer, controls;
var torusMesh, planeMesh;
var nodeMaterial;
var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
var ldrCubeMap, hdrCubeMap, rgbmCubeMap;

init();
animate();

function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 120 );

scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );

renderer = new THREE.WebGLRenderer();
renderer.toneMapping = THREE.LinearToneMapping;

//

var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
//geometry = new THREE.SphereBufferGeometry(20, 100, 100);
var material = new THREE.MeshStandardMaterial( {
color: 0xffffff,
metalness: params.metalness,
roughness: params.roughness
} );

torusMesh = new THREE.Mesh( geometry, material );
torusMesh.position.y = 35;
scene.add( torusMesh );

nodeMaterial = new THREE.StandardNodeMaterial();
nodeMaterial.color = new THREE.ColorNode(new THREE.Color(1, 1, 1))
nodeMaterial.roughness = new THREE.FloatNode(params.metalness);
nodeMaterial.metalness = new THREE.FloatNode(params.roguhness);

var torusMeshNode = new THREE.Mesh( geometry, nodeMaterial );
torusMeshNode.position.y = -35;
scene.add( torusMeshNode );


var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
var material = new THREE.MeshBasicMaterial();

planeMesh = new THREE.Mesh( geometry, material );
planeMesh.position.y = - 50;
planeMesh.rotation.x = - Math.PI * 0.5;
scene.add( planeMesh );

var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
hdrCubeMap = new THREE.HDRCubeTextureLoader()
.setPath( './textures/cube/pisaHDR/' )
.load( THREE.UnsignedByteType, hdrUrls, function () {

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

var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );

hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;

hdrCubeMap.magFilter = THREE.LinearFilter;
hdrCubeMap.needsUpdate = true;

pmremGenerator.dispose();
pmremCubeUVPacker.dispose();

} );

var ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
ldrCubeMap = new THREE.CubeTextureLoader()
.setPath( './textures/cube/pisa/' )
.load( ldrUrls, function () {

ldrCubeMap.encoding = THREE.GammaEncoding;

var pmremGenerator = new THREE.PMREMGenerator( ldrCubeMap );
pmremGenerator.update( renderer );

var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );

ldrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;

pmremGenerator.dispose();
pmremCubeUVPacker.dispose();

} );


var rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
rgbmCubeMap = new THREE.CubeTextureLoader()
.setPath( './textures/cube/pisaRGBM16/' )
.load( rgbmUrls, function () {

rgbmCubeMap.encoding = THREE.RGBM16Encoding;
rgbmCubeMap.format = THREE.RGBAFormat;

var pmremGenerator = new THREE.PMREMGenerator( rgbmCubeMap );
pmremGenerator.update( renderer );

var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );

rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;

rgbmCubeMap.magFilter = THREE.LinearFilter;
rgbmCubeMap.needsUpdate = true;

pmremGenerator.dispose();
pmremCubeUVPacker.dispose();

} );

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

//renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.gammaInput = true; // ???
renderer.gammaOutput = true;

stats = new Stats();
container.appendChild( stats.dom );

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 50;
controls.maxDistance = 300;

window.addEventListener( 'resize', onWindowResize, false );

var gui = new dat.GUI();

gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
gui.add( params, 'roughness', 0, 1, 0.01 );
gui.add( params, 'metalness', 0, 1, 0.01 );
gui.add( params, 'exposure', 0, 2, 0.01 );
gui.add( params, 'debug', false );
gui.open();

}

function onWindowResize() {

var width = window.innerWidth;
var height = window.innerHeight;

camera.aspect = width / height;
camera.updateProjectionMatrix();

renderer.setSize( width, height );

}

function animate() {

requestAnimationFrame( animate );

stats.begin();
render();
stats.end();

}

function render() {

torusMesh.material.roughness = params.roughness;
torusMesh.material.metalness = params.metalness;

nodeMaterial.roughness.value = params.roughness;
nodeMaterial.metalness.value = params.metalness;

var renderTarget, cubeMap;

switch ( params.envMap ) {

case 'LDR':
renderTarget = ldrCubeRenderTarget;
cubeMap = ldrCubeMap;
break;
case 'HDR':
renderTarget = hdrCubeRenderTarget;
cubeMap = hdrCubeMap;
break;
case 'RGBM16':
renderTarget = rgbmCubeRenderTarget;
cubeMap = rgbmCubeMap;
break;
}

var newEnvMap = renderTarget ? renderTarget.texture : null;

if ( newEnvMap && newEnvMap !== torusMesh.material.envMap ) {

torusMesh.material.envMap = newEnvMap;
torusMesh.material.needsUpdate = true;

planeMesh.material.map = newEnvMap;
planeMesh.material.needsUpdate = true;

var textureNode = new THREE.TextureNode(newEnvMap);
textureNode.encodingOverride = newEnvMap.encoding;

nodeMaterial.environment = new THREE.TextureCubeNode(
textureNode
);
nodeMaterial.environment.uv.blinnExponentToRoughness = nodeMaterial.roughness;

nodeMaterial.ambient = new THREE.TextureCubeNode(
textureNode
);
nodeMaterial.ambient.uv.blinnExponentToRoughness = new THREE.FloatNode(1);
nodeMaterial.ambient.uv.uv = new THREE.NormalNode(THREE.NormalNode.WORLD);
nodeMaterial.ambient = new THREE.OperatorNode(
nodeMaterial.ambient,
new THREE.FloatNode(Math.PI),
THREE.OperatorNode.MUL);

nodeMaterial.needsUpdate = true;

}

//torusMesh.rotation.y += 0.005;
planeMesh.visible = params.debug;

scene.background = cubeMap;
renderer.toneMappingExposure = params.exposure;

renderer.render( scene, camera );

}

</script>

</body>
</html>

0 comments on commit 57e588b

Please sign in to comment.