Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 c6bda653 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #10960 from gero3/preloadShaders 

Initial version of the shader preloader
上级 2667851c ba79e7ce
隐藏空白更改
内联 并排
Showing with 352 addition and 0 deletion
docs/api/renderers/WebGLRenderer.html
浏览文件 @ c6bda653
......@@ -305,6 +305,9 @@
This method clears a rendertarget. To do this, it activates the rendertarget.
</div>
<h3>[method:null compile]( [page:Scene scene], [page:Camera camera] )</h3>
<div>Compiles all materials in the scene with the camera. This is useful to precompile shaders before the first rendering.</div>
<h3>[method:null dispose]( )</h3>
<div>Dispose of the current rendering context.</div>
......
examples/webgl_materials_nodes_multiple.html 0 → 100644
浏览文件 @ c6bda653
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - node material</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;
margin: 0px;
text-align:center;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
display:block;
}
#waitScreen {
color: #000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
.hide {
display:none;
}
a { color: white }
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - Node-Based Material
<br /><span class="button" id="preload">change preload</span>
</div>
<div id="waitScreen">
Loading ...
</div>
<script src="../build/three.js"></script>
<script src='js/geometries/TeapotBufferGeometry.js'></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<!-- NodeLibrary -->
<script src="js/nodes/GLNode.js"></script>
<script src="js/nodes/RawNode.js"></script>
<script src="js/nodes/TempNode.js"></script>
<script src="js/nodes/InputNode.js"></script>
<script src="js/nodes/ConstNode.js"></script>
<script src="js/nodes/VarNode.js"></script>
<script src="js/nodes/FunctionNode.js"></script>
<script src="js/nodes/FunctionCallNode.js"></script>
<script src="js/nodes/AttributeNode.js"></script>
<script src="js/nodes/NodeBuilder.js"></script>
<script src="js/nodes/NodeLib.js"></script>
<script src="js/nodes/NodeMaterial.js"></script>
<!-- Accessors -->
<script src="js/nodes/accessors/PositionNode.js"></script>
<script src="js/nodes/accessors/NormalNode.js"></script>
<script src="js/nodes/accessors/UVNode.js"></script>
<script src="js/nodes/accessors/ScreenUVNode.js"></script>
<script src="js/nodes/accessors/ColorsNode.js"></script>
<script src="js/nodes/accessors/CameraNode.js"></script>
<script src="js/nodes/accessors/ReflectNode.js"></script>
<script src="js/nodes/accessors/LightNode.js"></script>
<!-- Inputs -->
<script src="js/nodes/inputs/IntNode.js"></script>
<script src="js/nodes/inputs/FloatNode.js"></script>
<script src="js/nodes/inputs/ColorNode.js"></script>
<script src="js/nodes/inputs/Vector2Node.js"></script>
<script src="js/nodes/inputs/Vector3Node.js"></script>
<script src="js/nodes/inputs/Vector4Node.js"></script>
<script src="js/nodes/inputs/TextureNode.js"></script>
<script src="js/nodes/inputs/CubeTextureNode.js"></script>
<!-- Math -->
<script src="js/nodes/math/Math1Node.js"></script>
<script src="js/nodes/math/Math2Node.js"></script>
<script src="js/nodes/math/Math3Node.js"></script>
<script src="js/nodes/math/OperatorNode.js"></script>
<!-- Utils -->
<script src="js/nodes/utils/SwitchNode.js"></script>
<script src="js/nodes/utils/JoinNode.js"></script>
<script src="js/nodes/utils/TimerNode.js"></script>
<script src="js/nodes/utils/RoughnessToBlinnExponentNode.js"></script>
<script src="js/nodes/utils/VelocityNode.js"></script>
<script src="js/nodes/utils/LuminanceNode.js"></script>
<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>
<script src="js/nodes/utils/NoiseNode.js"></script>
<script src="js/nodes/utils/ResolutionNode.js"></script>
<script src="js/nodes/utils/BumpNode.js"></script>
<script src="js/nodes/utils/BlurNode.js"></script>
<!-- Phong Material -->
<script src="js/nodes/materials/PhongNode.js"></script>
<script src="js/nodes/materials/PhongNodeMaterial.js"></script>
<script>
/* global THREE */
var container = document.getElementById( 'container' );
var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
var teapot;
var controls;
var move = false;
var rtTexture, rtMaterial;
var meshes = [];
document.getElementById( "preload" ).addEventListener( 'click', function() {
var hash = document.location.hash.substr( 1 );
if ( hash.length === 0 ) {
window.location.hash = "#NoPreLoad"
} else {
window.location.hash = ""
}
location.reload(true);
}, false );
window.addEventListener( 'load', init );
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.x = 0;
camera.position.z = - 300;
camera.position.y = 200;
camera.target = new THREE.Vector3();
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 50;
controls.maxDistance = 400;
scene.add( new THREE.AmbientLight( 0x464646 ) );
var light = new THREE.DirectionalLight( 0xffddcc, 1 );
light.position.set( 1, 0.75, 0.5 );
scene.add( light );
var light = new THREE.DirectionalLight( 0xccccff, 1 );
light.position.set( - 1, 0.75, - 0.5 );
scene.add( light );
teapot = new THREE.TeapotBufferGeometry( 15, 18 );
var itemsonrow = 10;
for (var i = 0 ; i< itemsonrow * itemsonrow; i ++ ){
var mesh = new THREE.Mesh( teapot );
mesh.position.x = 50 *(i%itemsonrow) -50*itemsonrow/2;
mesh.position.z = 50*Math.floor(i/itemsonrow)-150;
updateMaterial(mesh);
scene.add( mesh );
meshes.push(mesh);
}
window.addEventListener( 'resize', onWindowResize, false );
var hash = document.location.hash.substr( 1 );
if ( hash.length === 0 ) {
renderer.compile(scene,camera);
}
document.getElementById("waitScreen").className = "hide";
setTimeout(function() {
onWindowResize();
animate();
}, 1);
}
function updateMaterial(mesh) {
move = false;
if ( mesh.material ) mesh.material.dispose();
if ( rtTexture ) {
rtTexture.dispose();
rtTexture = null;
}
if ( rtMaterial ) {
rtMaterial.dispose();
rtMaterial = null;
}
var mtl = new THREE.PhongNodeMaterial();
var time = new THREE.TimerNode();
var speed = new THREE.FloatNode( Math.random() );
var color = new THREE.ColorNode( Math.random() * 0xFFFFFF );
var timeSpeed = new THREE.OperatorNode(
time,
speed,
THREE.OperatorNode.MUL
);
var sinCycleInSecs = new THREE.OperatorNode(
timeSpeed,
new THREE.ConstNode( THREE.ConstNode.PI2 ),
THREE.OperatorNode.MUL
);
var cycle = new THREE.Math1Node( sinCycleInSecs, THREE.Math1Node.SIN );
var cycleColor = new THREE.OperatorNode(
cycle,
color,
THREE.OperatorNode.MUL
);
var cos = new THREE.Math1Node( cycleColor, THREE.Math1Node.SIN );
mtl.color = new THREE.ColorNode( 0 );
mtl.emissive = cos;
var transformer = new THREE.FunctionNode( "position + 0.0 * " + Math.random(), "vec3", [ ]);
mtl.transform = transformer;
// build shader
mtl.build();
// set material
mesh.material = mtl;
}
function onWindowResize() {
var width = window.innerWidth, height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
if ( rtTexture ) rtTexture.setSize( width, height );
}
function animate() {
var delta = clock.getDelta();
for (var i = 0; i < meshes.length; i++ ){
var mesh = meshes[i];
mesh.material.updateFrame( delta );
}
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
</script>
</body>
</html>
src/renderers/WebGLRenderer.js
浏览文件 @ c6bda653
......@@ -1033,6 +1033,47 @@ function WebGLRenderer( parameters ) {
return Math.abs( b[ 0 ] ) - Math.abs( a[ 0 ] );
}
this.compile = function(scene, camera){
lights = [];
scene.traverse(function( object ) {
if ( object.isLight ) {
lights.push(object);
}
});
setupLights(lights,camera);
scene.traverse(function( object ) {
if (object.material) {
if ( Array.isArray( object.material ) ) {
for ( var i = 0; i < object.material.length; i ++ ) {
initMaterial(object.material[i], scene.fog, object);
}
} else {
initMaterial(object.material, scene.fog, object);
}
}
});
};
// Rendering
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或