Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 4a365834 编写于 作者: A alteredq
浏览文件
操作

Added CustomBlending mode. Added texture.premultiplyAlpha parameter. Added... 

Added CustomBlending mode. Added texture.premultiplyAlpha parameter. Added standard and custom blending examples.

Thanks to @toji for the suggestion.
上级 ecb20595
展开全部 隐藏空白更改
内联 并排
Showing with 1449 addition and 686 deletion
build/Three.js
浏览文件 @ 4a365834
此差异已折叠。
build/custom/ThreeCanvas.js
浏览文件 @ 4a365834
此差异已折叠。
build/custom/ThreeDOM.js
浏览文件 @ 4a365834
此差异已折叠。
build/custom/ThreeExtras.js
浏览文件 @ 4a365834
此差异已折叠。
build/custom/ThreeSVG.js
浏览文件 @ 4a365834
此差异已折叠。
build/custom/ThreeWebGL.js
浏览文件 @ 4a365834
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
examples/webgl_materials_blending.html 0 → 100644
浏览文件 @ 4a365834
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - materials - blending</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/Three.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
// SCENE
scene = new THREE.Scene();
// CAMERA
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 600;
scene.add( camera );
// BACKGROUND
var x = document.createElement( "canvas" );
var xc = x.getContext( "2d" );
x.width = x.height = 128;
xc.fillStyle = "#ddd";
xc.fillRect( 0, 0, 128, 128 );
xc.fillStyle = "#555";
xc.fillRect( 0, 0, 64, 64 );
xc.fillStyle = "#999";
xc.fillRect( 32, 32, 32, 32 );
xc.fillStyle = "#555";
xc.fillRect( 64, 64, 64, 64 );
xc.fillStyle = "#777";
xc.fillRect( 96, 96, 32, 32 );
var mapBg = new THREE.Texture( x );
mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
mapBg.repeat.set( 128, 64 );
mapBg.needsUpdate = true;
/*
var mapBg = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" );
mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
mapBg.repeat.set( 8, 4 );
*/
var materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
var meshBg = new THREE.Mesh( new THREE.PlaneGeometry( 4000, 2000 ), materialBg );
meshBg.position.set( 0, 0, -1 );
meshBg.rotation.x = Math.PI / 2;
scene.add( meshBg );
// OBJECTS
var blendings = [ "NoBlending", "NormalBlending", "AdditiveBlending", "SubtractiveBlending", "MultiplyBlending", "AdditiveAlphaBlending" ];
var map0 = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
var map1 = THREE.ImageUtils.loadTexture( 'textures/sprite0.jpg' );
var map2 = THREE.ImageUtils.loadTexture( 'textures/sprite0.png' );
var map3 = THREE.ImageUtils.loadTexture( 'textures/lensflare/lensflare0.png' );
var map4 = THREE.ImageUtils.loadTexture( 'textures/lensflare/lensflare0_alpha.png' );
var geo1 = new THREE.PlaneGeometry( 100, 100 );
var geo2 = new THREE.PlaneGeometry( 100, 25 );
addImageRow( map0, 300 );
addImageRow( map1, 150 );
addImageRow( map2, 0 );
addImageRow( map3, -150 );
addImageRow( map4, -300 );
function addImageRow( map, y ) {
for ( var i = 0; i < blendings.length; i ++ ) {
var blending = blendings[ i ];
var material = new THREE.MeshBasicMaterial( { map: map } );
material.transparent = true;
material.blending = THREE[ blending ];
var x = ( i - blendings.length / 2 ) * 110;
var z = 0;
var mesh = new THREE.Mesh( geo1, material );
mesh.position.set( x, y, z );
mesh.rotation.x = Math.PI / 2;
scene.add( mesh );
var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blending.replace( "Blending", "" ) ) );
mesh.position.set( x, y - 75, z );
mesh.rotation.x = Math.PI / 2;
scene.add( mesh );
}
}
// RENDERER
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
}
//
function onWindowResize( event ) {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
function generateLabelMaterial( text ) {
var x = document.createElement( "canvas" );
var xc = x.getContext( "2d" );
x.width = 128;
x.height = 32;
xc.fillStyle = "rgba( 0, 0, 0, 0.95 )";
xc.fillRect( 0, 0, 128, 32 );
xc.fillStyle = "white";
xc.font = "12pt arial bold";
xc.fillText( text, 10, 22 );
var map = new THREE.Texture( x );
map.needsUpdate = true;
var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
return material;
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</body>
</html>
examples/webgl_materials_blending_custom.html 0 → 100644
浏览文件 @ 4a365834
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - materials - custom blending</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #111;
overflow: hidden;
font-family: arial;
}
.menu { color: #fff; font-weight: bold; font-size: 12px; z-index: 100; width: 75px; position: absolute; top: 0px; padding: 16px; }
.menu img, .menu canvas { width: 75px; margin: 10px 0 }
#images { background: rgba(0,0,0,0); left: 0px; }
#backgrounds { background: rgba(0,0,0,0.0); left: 107px; }
#labels { background: rgba(0,0,0,0.75); left: 214px; width: 100px }
.lbl { color: #fff; z-index: 150; float:left; padding: 0.25em; width: 75px; display: block }
#lbl_dst { background:#800; }
#lbl_src { background:green; }
.btn { background: darkorange; width: 100px; cursor: pointer }
#btn_sub { background: transparent }
#btn_rsub { background: transparent }
#btn_pre { background: transparent }
#btn_rsub, #btn_nopre { margin-bottom: 2em }
</style>
</head>
<body>
<div id="images" class="menu">
Foreground
<a id="img_0" href="#"><img src="textures/disturb.jpg" /></a>
<a id="img_1" href="#"><img src="textures/sprite0.jpg" /></a>
<a id="img_2" href="#"><img src="textures/sprite0.png" /></a>
<a id="img_3" href="#"><img src="textures/lensflare/lensflare0.png" /></a>
<a id="img_4" href="#"><img src="textures/lensflare/lensflare0_alpha.png" /></a>
<a id="img_5" href="#"><img src="textures/sprites/ball.png" /></a>
<a id="img_6" href="#"><img src="textures/sprites/snowflake7_alpha.png" /></a>
</div>
<div id="backgrounds" class="menu">
Background
<a id="bg_0" href="#"><img src="textures/disturb.jpg" /></a>
<a id="bg_1" href="#"></a>
<a id="bg_2" href="#"></a>
<a id="bg_3" href="#"><img src="textures/crate.gif" /></a>
<a id="bg_4" href="#"><img src="textures/lava/lavatile.jpg" /></a>
<a id="bg_5" href="#"><img src="textures/water.jpg" /></a>
<a id="bg_6" href="#"><img src="textures/lava/cloud.png" /></a>
</div>
<div id="labels" class="menu">
Equation<br/><br/>
<div class="lbl btn" id="btn_add">Add</div>
<div class="lbl btn" id="btn_sub">Subtract</div>
<div class="lbl btn" id="btn_rsub">ReverseSubtract</div>
Premultiply alpha<br/><br/>
<div class="lbl btn" id="btn_pre">On</div>
<div class="lbl btn" id="btn_nopre">Off</div>
Labels<br/><br/>
<div class="lbl" id="lbl_src">Source</div>
<div class="lbl" id="lbl_dst">Destination</div>
</div>
<script src="../build/Three.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth - 215;
var SCREEN_HEIGHT = window.innerHeight;
var camera, scene, renderer;
var materialBg;
var materials = [];
var mapsPre = [];
var mapsNoPre = [];
var currentMaps = mapsNoPre;
var currentIndex = 4;
init();
animate();
function init() {
// SCENE
scene = new THREE.Scene();
// CAMERA
camera = new THREE.PerspectiveCamera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000 );
camera.position.z = 700;
scene.add( camera );
// BACKGROUND IMAGES
var x = document.createElement( "canvas" );
var xc = x.getContext( "2d" );
x.width = x.height = 128;
xc.fillStyle = "#eee";
xc.fillRect( 0, 0, 128, 128 );
xc.fillStyle = "#999";
xc.fillRect( 0, 0, 64, 64 );
xc.fillStyle = "#aaa";
xc.fillRect( 32, 32, 32, 32 );
xc.fillStyle = "#999";
xc.fillRect( 64, 64, 64, 64 );
xc.fillStyle = "#bbb";
xc.fillRect( 96, 96, 32, 32 );
document.getElementById("bg_1").appendChild( x );
var x2 = document.createElement( "canvas" );
var xc2 = x2.getContext( "2d" );
x2.width = x2.height = 128;
xc2.fillStyle = "#444";
xc2.fillRect( 0, 0, 128, 128 );
xc2.fillStyle = "#000";
xc2.fillRect( 0, 0, 64, 64 );
xc2.fillStyle = "#111";
xc2.fillRect( 32, 32, 32, 32 );
xc2.fillStyle = "#000";
xc2.fillRect( 64, 64, 64, 64 );
xc2.fillStyle = "#222";
xc2.fillRect( 96, 96, 32, 32 );
document.getElementById("bg_1").appendChild( x );
document.getElementById("bg_2").appendChild( x2 );
var mapBg0 = new THREE.Texture( x );
mapBg0.wrapS = mapBg0.wrapT = THREE.RepeatWrapping;
mapBg0.repeat.set( 128, 64 );
mapBg0.needsUpdate = true;
var mapBg1 = new THREE.Texture( x2 );
mapBg1.wrapS = mapBg1.wrapT = THREE.RepeatWrapping;
mapBg1.repeat.set( 128, 64 );
mapBg1.needsUpdate = true;
var mapBg2 = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" );
mapBg2.wrapS = mapBg2.wrapT = THREE.RepeatWrapping;
mapBg2.repeat.set( 8, 4 );
var mapBg3 = THREE.ImageUtils.loadTexture( "textures/crate.gif" );
mapBg3.wrapS = mapBg3.wrapT = THREE.RepeatWrapping;
mapBg3.repeat.set( 32, 16 );
var mapBg4 = THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" );
mapBg4.wrapS = mapBg4.wrapT = THREE.RepeatWrapping;
mapBg4.repeat.set( 8, 4 );
var mapBg5 = THREE.ImageUtils.loadTexture( "textures/water.jpg" );
mapBg5.wrapS = mapBg5.wrapT = THREE.RepeatWrapping;
mapBg5.repeat.set( 8, 4 );
var mapBg6 = THREE.ImageUtils.loadTexture( "textures/lava/cloud.png" );
mapBg6.wrapS = mapBg6.wrapT = THREE.RepeatWrapping;
mapBg6.repeat.set( 2, 1 );
// BACKGROUND
materialBg = new THREE.MeshBasicMaterial( { map: mapBg1 } );
var meshBg = new THREE.Mesh( new THREE.PlaneGeometry( 4000, 2000 ), materialBg );
meshBg.position.set( 0, 0, -1 );
meshBg.rotation.x = Math.PI / 2;
scene.add( meshBg );
// FOREGROUND IMAGES
var images = [ 'textures/disturb.jpg',
'textures/sprite0.jpg',
'textures/sprite0.png',
'textures/lensflare/lensflare0.png',
'textures/lensflare/lensflare0_alpha.png',
'textures/sprites/ball.png',
'textures/sprites/snowflake7_alpha.png' ];
for ( var i = 0; i < images.length; i ++ ) {
var map = THREE.ImageUtils.loadTexture( images[ i ] );
var mapPre = map.clone();
mapPre.premultiplyAlpha = true;
mapPre.needsUpdate = true;
mapsNoPre.push( map );
mapsPre.push( mapPre );
}
// FOREGROUND OBJECTS
var blendings = [ "NoBlending", "NormalBlending", "AdditiveBlending", "SubtractiveBlending", "MultiplyBlending", "AdditiveAlphaBlending" ];
var src = [ "ZeroFactor", "OneFactor", "SrcAlphaFactor", "OneMinusSrcAlphaFactor", "DstAlphaFactor", "OneMinusDstAlphaFactor", "DstColorFactor", "OneMinusDstColorFactor", "SrcAlphaSaturateFactor" ];
var dst = [ "ZeroFactor", "OneFactor", "SrcColorFactor", "OneMinusSrcColorFactor", "SrcAlphaFactor", "OneMinusSrcAlphaFactor", "DstAlphaFactor", "OneMinusDstAlphaFactor" ];
var geo1 = new THREE.PlaneGeometry( 100, 100 );
var geo2 = new THREE.PlaneGeometry( 100, 25 );
var blending = "CustomBlending";
for ( var i = 0; i < dst.length; i ++ ) {
var blendDst = dst[ i ];
for ( var j = 0; j < src.length; j ++ ) {
var blendSrc = src[ j ];
var material = new THREE.MeshBasicMaterial( { map: currentMaps[ currentIndex ] } );
material.transparent = true;
material.blending = THREE[ blending ];
material.blendSrc = THREE[ blendSrc ];
material.blendDst = THREE[ blendDst ];
material.blendEquation = THREE.AddEquation;
var x = ( j - src.length / 2 ) * 110;
var z = 0;
var y = ( i - dst.length / 2 ) * 110 + 50;
var mesh = new THREE.Mesh( geo1, material );
mesh.position.set( x, y, z );
mesh.rotation.x = Math.PI / 2;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add( mesh );
materials.push( material );
}
}
for ( var j = 0; j < src.length; j ++ ) {
var blendSrc = src[ j ];
var x = ( j - src.length / 2 ) * 110;
var z = 0;
var y = ( 0 - dst.length / 2 ) * 110 + 50;
var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendSrc.replace( "Factor", "" ), "rgba( 0, 150, 0, 1 )" ) );
mesh.position.set( x, - (y - 70), z );
mesh.rotation.x = Math.PI / 2;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add( mesh );
}
for ( var i = 0; i < dst.length; i ++ ) {
var blendDst = dst[ i ];
var x = ( 0 - src.length / 2 ) * 110 - 125;
var z = 0;
var y = ( i - dst.length / 2 ) * 110 + 165;
var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendDst.replace( "Factor", "" ), "rgba( 150, 0, 0, 1 )" ) );
mesh.position.set( x, - (y - 70), z );
mesh.rotation.x = Math.PI / 2;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add( mesh );
}
// RENDERER
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "absolute";
renderer.domElement.style.left = "215px";
document.body.appendChild( renderer.domElement );
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
addImgHandler( "img_0", 0 );
addImgHandler( "img_1", 1 );
addImgHandler( "img_2", 2 );
addImgHandler( "img_3", 3 );
addImgHandler( "img_4", 4 );
addImgHandler( "img_5", 5 );
addImgHandler( "img_6", 6 );
addBgHandler( "bg_0", mapBg2 );
addBgHandler( "bg_1", mapBg0 );
addBgHandler( "bg_2", mapBg1 );
addBgHandler( "bg_3", mapBg3 );
addBgHandler( "bg_4", mapBg4 );
addBgHandler( "bg_5", mapBg5 );
addBgHandler( "bg_6", mapBg6 );
addEqHandler( "btn_add", THREE.AddEquation );
addEqHandler( "btn_sub", THREE.SubtractEquation );
addEqHandler( "btn_rsub", THREE.ReverseSubtractEquation );
addPreHandler( "btn_pre", mapsPre );
addPreHandler( "btn_nopre", mapsNoPre );
}
//
function addImgHandler( id, index ) {
var el = document.getElementById( id );
el.addEventListener( 'click', function () {
for ( var i = 0; i < materials.length; i ++ ) {
materials[ i ].map = currentMaps[ index ];
}
currentIndex = index;
} );
}
function addEqHandler( id, eq ) {
var el = document.getElementById( id );
el.addEventListener( 'click', function () {
for ( var i = 0; i < materials.length; i ++ ) {
materials[ i ].blendEquation = eq;
}
document.getElementById( "btn_add" ).style.backgroundColor = "transparent";
document.getElementById( "btn_sub" ).style.backgroundColor = "transparent";
document.getElementById( "btn_rsub" ).style.backgroundColor = "transparent";
el.style.backgroundColor = "darkorange";
});
}
function addBgHandler( id, map ) {
var el = document.getElementById( id );
el.addEventListener( 'click', function () { materialBg.map = map; } );
}
function addPreHandler( id, marray ) {
var el = document.getElementById( id );
el.addEventListener( 'click', function () {
currentMaps = marray;
for ( var i = 0; i < materials.length; i ++ ) {
materials[ i ].map = currentMaps[ currentIndex ];
}
document.getElementById( "btn_pre" ).style.backgroundColor = "transparent";
document.getElementById( "btn_nopre" ).style.backgroundColor = "transparent";
el.style.backgroundColor = "darkorange";
} );
}
//
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
//
function generateLabelMaterial( text, bg ) {
var x = document.createElement( "canvas" );
var xc = x.getContext( "2d" );
x.width = 128;
x.height = 32;
xc.fillStyle = bg;
xc.fillRect( 0, 0, 128, 32 );
//xc.shadowColor = "#000";
//xc.shadowBlur = 3;
xc.fillStyle = "white";
xc.font = "10pt arial bold";
xc.fillText( text, 8, 22 );
var map = new THREE.Texture( x );
map.needsUpdate = true;
var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
return material;
}
function animate() {
requestAnimationFrame( animate );
var time = Date.now() * 0.00025;
var ox = ( time * -0.01 * materialBg.map.repeat.x ) % 1;
var oy = ( time * -0.01 * materialBg.map.repeat.y ) % 1;
//var oy = Math.sin( 0.75 * time ) * 0.01 * materialBg.map.repeat.y;
materialBg.map.offset.set( ox, oy );
renderer.render( scene, camera );
}
</script>
</body>
</html>
src/extras/renderers/plugins/LensFlarePlugin.js
浏览文件 @ 4a365834
......@@ -261,7 +261,7 @@ THREE.LensFlarePlugin = function ( ) {
_gl.uniform1f( uniforms.opacity, sprite.opacity );
_gl.uniform3f( uniforms.color, sprite.color.r, sprite.color.g, sprite.color.b );
_renderer.setBlending( sprite.blending );
_renderer.setBlending( sprite.blending, sprite.blendEquation, sprite.blendSrc, sprite.blendDst );
_renderer.setTexture( sprite.texture, 1 );
_gl.drawElements( _gl.TRIANGLES, 6, _gl.UNSIGNED_SHORT, 0 );
......
src/extras/renderers/plugins/SpritePlugin.js
浏览文件 @ 4a365834
......@@ -194,7 +194,7 @@ THREE.SpritePlugin = function ( ) {
}
_renderer.setBlending( sprite.blending );
_renderer.setBlending( sprite.blending, sprite.blendEquation, sprite.blendSrc, sprite.blendDst );
_renderer.setTexture( sprite.map, 0 );
_gl.drawElements( _gl.TRIANGLES, 6, _gl.UNSIGNED_SHORT, 0 );
......
src/materials/Material.js
浏览文件 @ 4a365834
/**
* @author mr.doob / http://mrdoob.com/
* @author alteredq / http://alteredqualia.com/
*/
THREE.Material = function ( parameters ) {
......@@ -15,6 +16,10 @@ THREE.Material = function ( parameters ) {
this.blending = parameters.blending !== undefined ? parameters.blending : THREE.NormalBlending;
this.blendSrc = parameters.blendSrc !== undefined ? parameters.blendSrc : THREE.SrcAlphaFactor;
this.blendDst = parameters.blendDst !== undefined ? parameters.blendDst : THREE.OneMinusSrcAlphaFactor;
this.blendEquation = parameters.blendEquation !== undefined ? parameters.blendEquation : THREE.AddEquation;
this.depthTest = parameters.depthTest !== undefined ? parameters.depthTest : true;
this.depthWrite = parameters.depthWrite !== undefined ? parameters.depthWrite : true;
......@@ -32,17 +37,56 @@ THREE.Material = function ( parameters ) {
THREE.MaterialCount = 0;
// shading
THREE.NoShading = 0;
THREE.FlatShading = 1;
THREE.SmoothShading = 2;
// colors
THREE.NoColors = 0;
THREE.FaceColors = 1;
THREE.VertexColors = 2;
// blending modes
THREE.NoBlending = 0;
THREE.NormalBlending = 1;
THREE.AdditiveBlending = 2;
THREE.SubtractiveBlending = 3;
THREE.MultiplyBlending = 4;
THREE.AdditiveAlphaBlending = 5;
THREE.CustomBlending = 6;
// custom blending equations
// (numbers start from 100 not to clash with other
// mappings to OpenGL constants defined in Texture.js)
THREE.AddEquation = 100;
THREE.SubtractEquation = 101;
THREE.ReverseSubtractEquation = 102;
// custom blending destination factors
THREE.ZeroFactor = 200;
THREE.OneFactor = 201;
THREE.SrcColorFactor = 202;
THREE.OneMinusSrcColorFactor = 203;
THREE.SrcAlphaFactor = 204;
THREE.OneMinusSrcAlphaFactor = 205;
THREE.DstAlphaFactor = 206;
THREE.OneMinusDstAlphaFactor = 207;
// custom blending source factors
//THREE.ZeroFactor = 200;
//THREE.OneFactor = 201;
//THREE.SrcAlphaFactor = 204;
//THREE.OneMinusSrcAlphaFactor = 205;
//THREE.DstAlphaFactor = 206;
//THREE.OneMinusDstAlphaFactor = 207;
THREE.DstColorFactor = 208;
THREE.OneMinusDstColorFactor = 209;
THREE.SrcAlphaSaturateFactor = 210;
src/objects/Sprite.js
浏览文件 @ 4a365834
......@@ -8,8 +8,13 @@ THREE.Sprite = function ( parameters ) {
this.color = ( parameters.color !== undefined ) ? new THREE.Color( parameters.color ) : new THREE.Color( 0xffffff );
this.map = ( parameters.map !== undefined ) ? parameters.map : new THREE.Texture();
this.blending = ( parameters.blending !== undefined ) ? parameters.blending : THREE.NormalBlending;
this.blendSrc = parameters.blendSrc !== undefined ? parameters.blendSrc : THREE.SrcAlphaFactor;
this.blendDst = parameters.blendDst !== undefined ? parameters.blendDst : THREE.OneMinusSrcAlphaFactor;
this.blendEquation = parameters.blendEquation !== undefined ? parameters.blendEquation : THREE.AddEquation;
this.useScreenCoordinates = ( parameters.useScreenCoordinates !== undefined ) ? parameters.useScreenCoordinates : true;
this.mergeWith3D = ( parameters.mergeWith3D !== undefined ) ? parameters.mergeWith3D : !this.useScreenCoordinates;
this.affectedByDistance = ( parameters.affectedByDistance !== undefined ) ? parameters.affectedByDistance : !this.useScreenCoordinates;
......
src/renderers/WebGLRenderer.js
浏览文件 @ 4a365834
......@@ -118,12 +118,20 @@ THREE.WebGLRenderer = function ( parameters ) {
_oldDoubleSided = null,
_oldFlipSided = null,
_oldBlending = null,
_oldBlendEquation = null,
_oldBlendSrc = null,
_oldBlendDst = null,
_oldDepthTest = null,
_oldDepthWrite = null,
_oldPolygonOffset = null,
_oldPolygonOffsetFactor = null,
_oldPolygonOffsetUnits = null,
_oldLineWidth = null,
_viewportX = 0,
......@@ -1049,7 +1057,7 @@ THREE.WebGLRenderer = function ( parameters ) {
customAttribute = customAttributes[ i ];
if ( customAttribute.needsUpdate &&
( customAttribute.boundTo === undefined ||
( customAttribute.boundTo === undefined ||
customAttribute.boundTo === "vertices") ) {
cal = customAttribute.value.length;
......@@ -3291,7 +3299,6 @@ THREE.WebGLRenderer = function ( parameters ) {
var i, il,
program, material,
webglObject, object,
renderList,
......@@ -3426,13 +3433,15 @@ THREE.WebGLRenderer = function ( parameters ) {
if ( scene.overrideMaterial ) {
this.setBlending( scene.overrideMaterial.blending );
this.setDepthTest( scene.overrideMaterial.depthTest );
this.setDepthWrite( scene.overrideMaterial.depthWrite );
setPolygonOffset( scene.overrideMaterial.polygonOffset, scene.overrideMaterial.polygonOffsetFactor, scene.overrideMaterial.polygonOffsetUnits );
var material = scene.overrideMaterial;
this.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst );
this.setDepthTest( material.depthTest );
this.setDepthWrite( material.depthWrite );
setPolygonOffset( material.polygonOffset, material.polygonOffsetFactor, material.polygonOffsetUnits );
renderObjects( scene.__webglObjects, false, "", camera, lights, fog, true, scene.overrideMaterial );
renderObjectsImmediate( scene.__webglObjectsImmediate, "", camera, lights, fog, false, scene.overrideMaterial );
renderObjects( scene.__webglObjects, false, "", camera, lights, fog, true, material );
renderObjectsImmediate( scene.__webglObjectsImmediate, "", camera, lights, fog, false, material );
} else {
......@@ -3536,7 +3545,7 @@ THREE.WebGLRenderer = function ( parameters ) {
if ( ! material ) continue;
if ( useBlending ) _this.setBlending( material.blending );
if ( useBlending ) _this.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst );
_this.setDepthTest( material.depthTest );
_this.setDepthWrite( material.depthWrite );
......@@ -3583,7 +3592,7 @@ THREE.WebGLRenderer = function ( parameters ) {
if ( ! material ) continue;
if ( useBlending ) _this.setBlending( material.blending );
if ( useBlending ) _this.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst );
_this.setDepthTest( material.depthTest );
_this.setDepthWrite( material.depthWrite );
......@@ -5208,19 +5217,21 @@ THREE.WebGLRenderer = function ( parameters ) {
};
this.setBlending = function ( blending ) {
this.setBlending = function ( blending, blendEquation, blendSrc, blendDst ) {
if ( blending !== _oldBlending ) {
switch ( blending ) {
case THREE.NoBlending:
_gl.disable( _gl.BLEND );
break;
_gl.disable( _gl.BLEND );
break;
case THREE.AdditiveBlending:
_gl.enable( _gl.BLEND );
_gl.enable( _gl.BLEND );
_gl.blendEquation( _gl.FUNC_ADD );
_gl.blendFunc( _gl.SRC_ALPHA, _gl.ONE );
......@@ -5229,7 +5240,7 @@ THREE.WebGLRenderer = function ( parameters ) {
case THREE.SubtractiveBlending:
// TODO: Find blendFuncSeparate() combination
_gl.enable( _gl.BLEND );
_gl.enable( _gl.BLEND );
_gl.blendEquation( _gl.FUNC_ADD );
_gl.blendFunc( _gl.ZERO, _gl.ONE_MINUS_SRC_COLOR );
......@@ -5238,15 +5249,21 @@ THREE.WebGLRenderer = function ( parameters ) {
case THREE.MultiplyBlending:
// TODO: Find blendFuncSeparate() combination
_gl.enable( _gl.BLEND );
_gl.enable( _gl.BLEND );
_gl.blendEquation( _gl.FUNC_ADD );
_gl.blendFunc( _gl.ZERO, _gl.SRC_COLOR );
break;
case THREE.CustomBlending:
_gl.enable( _gl.BLEND );
break;
default:
_gl.enable( _gl.BLEND );
_gl.enable( _gl.BLEND );
_gl.blendEquationSeparate( _gl.FUNC_ADD, _gl.FUNC_ADD );
_gl.blendFuncSeparate( _gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );
......@@ -5258,6 +5275,33 @@ THREE.WebGLRenderer = function ( parameters ) {
}
if ( blending === THREE.CustomBlending ) {
if ( blendEquation !== _oldBlendEquation ) {
_gl.blendEquation( paramThreeToGL( blendEquation ) );
_oldBlendEquation = blendEquation;
}
if ( blendSrc !== _oldBlendSrc || blendDst !== _oldBlendDst ) {
_gl.blendFunc( paramThreeToGL( blendSrc ), paramThreeToGL( blendDst ) );
_oldBlendSrc = blendSrc;
_oldBlendDst = blendDst;
}
} else {
_oldBlendEquation = null;
_oldBlendSrc = null;
_oldBlendDst = null;
}
};
// Shaders
......@@ -5618,6 +5662,8 @@ THREE.WebGLRenderer = function ( parameters ) {
_gl.activeTexture( _gl.TEXTURE0 + slot );
_gl.bindTexture( _gl.TEXTURE_2D, texture.__webglTexture );
_gl.pixelStorei( _gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultiplyAlpha );
var image = texture.image,
isImagePowerOfTwo = isPowerOfTwo( image.width ) && isPowerOfTwo( image.height ),
glFormat = paramThreeToGL( texture.format ),
......@@ -5967,6 +6013,23 @@ THREE.WebGLRenderer = function ( parameters ) {
case THREE.LuminanceFormat: return _gl.LUMINANCE; break;
case THREE.LuminanceAlphaFormat: return _gl.LUMINANCE_ALPHA; break;
case THREE.AddEquation: return _gl.FUNC_ADD; break;
case THREE.SubtractEquation: return _gl.FUNC_SUBTRACT; break;
case THREE.ReverseSubtractEquation: return _gl.FUNC_REVERSE_SUBTRACT; break;
case THREE.ZeroFactor: return _gl.ZERO; break;
case THREE.OneFactor: return _gl.ONE; break;
case THREE.SrcColorFactor: return _gl.SRC_COLOR; break;
case THREE.OneMinusSrcColorFactor: return _gl.ONE_MINUS_SRC_COLOR; break;
case THREE.SrcAlphaFactor: return _gl.SRC_ALPHA; break;
case THREE.OneMinusSrcAlphaFactor: return _gl.ONE_MINUS_SRC_ALPHA; break;
case THREE.DstAlphaFactor: return _gl.DST_ALPHA; break;
case THREE.OneMinusDstAlphaFactor: return _gl.ONE_MINUS_DST_ALPHA; break;
case THREE.DstColorFactor: return _gl.DST_COLOR; break;
case THREE.OneMinusDstColorFactor: return _gl.ONE_MINUS_DST_COLOR; break;
case THREE.SrcAlphaSaturateFactor: return _gl.SRC_ALPHA_SATURATE; break;
}
return 0;
......
src/textures/Texture.js
浏览文件 @ 4a365834
......@@ -25,6 +25,7 @@ THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, f
this.repeat = new THREE.Vector2( 1, 1 );
this.generateMipmaps = true;
this.premultiplyAlpha = false;
this.needsUpdate = false;
this.onUpdate = null;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或