Skip to content
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

NodeMaterial translucent example and fix ScreenUVNode #7887

Merged
merged 2 commits into from
Dec 30, 2015
Merged

NodeMaterial translucent example and fix ScreenUVNode #7887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd80a94
fix use with operator and share to optimize
sunag Dec 30, 2015
b538cb2
sss to skin and translucent example
sunag Dec 30, 2015
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
4 changes: 2 additions & 2 deletions examples/js/nodes/accessors/ScreenUVNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

THREE.ScreenUVNode = function( resolution ) {

THREE.TempNode.call( this, 'v2', { shared: false } );
THREE.TempNode.call( this, 'v2' );

this.resolution = resolution;

Expand All @@ -20,7 +20,7 @@ THREE.ScreenUVNode.prototype.generate = function( builder, output ) {

if ( builder.isShader( 'fragment' ) ) {

result = 'gl_FragCoord.xy/' + this.resolution.build( builder, 'v2' );
result = '(gl_FragCoord.xy/' + this.resolution.build( builder, 'v2' ) + ')';

}
else {
Expand Down
116 changes: 88 additions & 28 deletions examples/webgl_materials_nodes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@
'adv / soft-body': 'soft-body',
'adv / wave': 'wave',
'adv / sss' : 'sss',
'adv / translucent' : 'translucent',
'misc / smoke' : 'smoke',
'misc / firefly' : 'firefly'
} ).onFinishChange( function() {
Expand Down Expand Up @@ -262,6 +263,20 @@

if ( mesh.material ) mesh.material.dispose();

if ( rtTexture ) {

rtTexture.dispose();
rtTexture = null;

}

if ( rtMaterial ) {

rtMaterial.dispose();
rtMaterial = null;

}

var name = param.example;
var mtl;

Expand Down Expand Up @@ -1611,6 +1626,7 @@
break;

case 'sss':
case 'translucent':

// DISTANCE FORMULA

Expand Down Expand Up @@ -1669,53 +1685,93 @@
THREE.OperatorNode.SUB
);

difference = new THREE.Math3Node(
var sss = new THREE.Math3Node(
new THREE.FloatNode( - .1 ),
new THREE.FloatNode( .5 ),
difference,
THREE.Math3Node.SMOOTHSTEP
);

var internalColor = new THREE.ColorNode( 0x1a0e14 );
var surfaceColor = new THREE.ColorNode( 0xd04327 );
var sssAlpha = new THREE.Math1Node( sss, THREE.Math1Node.SAT );

var color = new THREE.Math3Node(
surfaceColor,
internalColor,
new THREE.Math1Node( difference, THREE.Math1Node.SAT ),
THREE.Math3Node.MIX
);
var frontColor, backColor;

var light = new THREE.OperatorNode(
new THREE.LightNode(),
color,
THREE.OperatorNode.ADD
);
if ( name == 'sss' ) {

mtl.color = new THREE.ColorNode( 0xffffff );
mtl.roughness = new THREE.FloatNode( .1 );
mtl.metalness = new THREE.FloatNode( .5 );
var sssOut = new THREE.Math2Node(
objectDepth,
sssAlpha,
THREE.Math2Node.MIN
);

mtl.light = light;
mtl.environment = color;
frontColor = new THREE.ColorNode( 0xd4cfbb );
backColor = new THREE.ColorNode( 0xd04327 );

var color = new THREE.Math3Node(
backColor,
frontColor,
sssOut,
THREE.Math3Node.MIX
);

var light = new THREE.OperatorNode(
new THREE.LightNode(),
color,
THREE.OperatorNode.ADD
);

mtl.color = frontColor;
mtl.roughness = new THREE.FloatNode( .1 );
mtl.metalness = new THREE.FloatNode( .5 );

mtl.light = light;
mtl.environment = color;

}
else {

frontColor = new THREE.ColorNode( 0xd04327 );
backColor = new THREE.ColorNode( 0x1a0e14 );

var color = new THREE.Math3Node(
frontColor,
backColor,
sssAlpha,
THREE.Math3Node.MIX
);

var light = new THREE.OperatorNode(
new THREE.LightNode(),
color,
THREE.OperatorNode.ADD
);

mtl.color = new THREE.ColorNode( 0xffffff );
mtl.roughness = new THREE.FloatNode( .1 );
mtl.metalness = new THREE.FloatNode( .5 );

mtl.light = light;
mtl.environment = color;

}

// GUI

addGui( 'internalColor', internalColor.value.getHex(), function( val ) {
addGui( 'frontColor', frontColor.value.getHex(), function( val ) {

internalColor.value.setHex( val );
frontColor.value.setHex( val );

}, true );

addGui( 'surfaceColor', surfaceColor.value.getHex(), function( val ) {
addGui( 'backColor', backColor.value.getHex(), function( val ) {

surfaceColor.value.setHex( val );
backColor.value.setHex( val );

}, true );

addGui( 'area', difference.b.number, function( val ) {
addGui( 'area', sss.b.number, function( val ) {

difference.b.number = val;
sss.b.number = val;

}, false, 0, 1 );

Expand All @@ -1732,10 +1788,14 @@

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
var width = window.innerWidth, height = window.innerHeight;

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

renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( width, height );

if ( rtTexture ) rtTexture.setSize( width, height );

}

Expand All @@ -1762,7 +1822,7 @@
// update material animation and/or gpu calcs (pre-renderer)
mesh.material.updateAnimation( delta );

// render to texture for SSS material only
// render to texture for sss/translucent material only
if ( rtTexture ) {

scene.overrideMaterial = rtMaterial;
Expand Down