Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Merge pull request #12027 from Mugen87/dev4 

Examples: Buffer geometry clean up
上级 e3012a1b e7564158
隐藏空白更改
内联 并排
Showing with 107 addition and 115 deletion
examples/webgl_buffergeometry_custom_attributes_particles.html
浏览文件 @ 55ff91b1
......@@ -39,13 +39,12 @@
<script type="x-shader/x-vertex" id="vertexshader">
attribute float size;
attribute vec3 customColor;
varying vec3 vColor;
void main() {
vColor = customColor;
vColor = color;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
......@@ -59,14 +58,13 @@
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying vec3 vColor;
void main() {
gl_FragColor = vec4( color * vColor, 1.0 );
gl_FragColor = vec4( vColor, 1.0 );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
......@@ -97,7 +95,6 @@
uniforms = {
color: { value: new THREE.Color( 0xffffff ) },
texture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
};
......@@ -110,7 +107,8 @@
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true
transparent: true,
vertexColors: true
});
......@@ -140,8 +138,8 @@
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ).setDynamic( true ) );
particleSystem = new THREE.Points( geometry, shaderMaterial );
......
examples/webgl_buffergeometry_instancing.html
浏览文件 @ 55ff91b1
......@@ -72,10 +72,10 @@
void main(){
vPosition = offset * max(abs(sineTime * 2.0 + 1.0), 0.5) + position;
vec4 orientation = normalize(mix(orientationStart, orientationEnd, sineTime));
vec3 vcV = cross(orientation.xyz, vPosition);
vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
vPosition = offset * max( abs( sineTime * 2.0 + 1.0 ), 0.5 ) + position;
vec4 orientation = normalize( mix( orientationStart, orientationEnd, sineTime ) );
vec3 vcV = cross( orientation.xyz, vPosition );
vPosition = vcV * ( 2.0 * orientation.w ) + ( cross( orientation.xyz, vcV ) * 2.0 + vPosition );
vColor = color;
......@@ -124,74 +124,61 @@
camera.position.z = 2;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x101010 );
// geometry
var triangles = 1;
var instances = 65000;
var geometry = new THREE.InstancedBufferGeometry();
geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
var gui = new dat.GUI();
gui.add( geometry, "maxInstancedCount", 0, instances );
var vertices = new THREE.BufferAttribute( new Float32Array( triangles * 3 * 3 ), 3 );
vertices.setXYZ( 0, 0.025, -0.025, 0 );
vertices.setXYZ( 1, -0.025, 0.025, 0 );
vertices.setXYZ( 2, 0, 0, 0.025 );
geometry.addAttribute( 'position', vertices );
var offsets = new THREE.InstancedBufferAttribute( new Float32Array( instances * 3 ), 3, 1 );
for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
var vector = new THREE.Vector4();
offsets.setXYZ( i, Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
var triangles = 1;
var instances = 50000;
}
var positions = [];
var offsets = [];
var colors = [];
var orientationsStart = [];
var orientationsEnd = [];
geometry.addAttribute( 'offset', offsets );
positions.push( 0.025, -0.025, 0 );
positions.push( -0.025, 0.025, 0 );
positions.push( 0, 0, 0.025 );
var colors = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
// instanced attributes
for ( var i = 0, ul = colors.count; i < ul; i++ ) {
for ( var i = 0; i < instances; i ++ ) {
colors.setXYZW( i, Math.random(), Math.random(), Math.random(), Math.random() );
// offsets
}
offsets.push( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
geometry.addAttribute( 'color', colors );
// colors
var vector = new THREE.Vector4();
colors.push( Math.random(), Math.random(), Math.random(), Math.random() );
var orientationsStart = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
for ( var i = 0, ul = orientationsStart.count; i < ul; i++ ) {
// orientation start
vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
vector.normalize();
orientationsStart.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
}
geometry.addAttribute( 'orientationStart', orientationsStart );
orientationsStart.push( vector.x, vector.y, vector.z, vector.w );
var orientationsEnd = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
for ( var i = 0, ul = orientationsEnd.count; i < ul; i++ ) {
// orientation end
vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
vector.normalize();
orientationsEnd.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
orientationsEnd.push( vector.x, vector.y, vector.z, vector.w );
}
geometry.addAttribute( 'orientationEnd', orientationsEnd );
var geometry = new THREE.InstancedBufferGeometry();
geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'offset', new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 ) );
geometry.addAttribute( 'color', new THREE.InstancedBufferAttribute( new Float32Array( colors ), 4 ) );
geometry.addAttribute( 'orientationStart', new THREE.InstancedBufferAttribute( new Float32Array( orientationsStart ), 4 ) );
geometry.addAttribute( 'orientationEnd', new THREE.InstancedBufferAttribute( new Float32Array( orientationsEnd ), 4 ) );
// material
......@@ -208,23 +195,37 @@
} );
//
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === false ) {
document.getElementById( "notSupported" ).style.display = "";
document.getElementById( 'notSupported' ).style.display = '';
return;
}
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
var gui = new dat.GUI( { width: 350 } );
gui.add( geometry, 'maxInstancedCount', 0, instances );
//
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
......@@ -253,7 +254,7 @@
var time = performance.now();
var object = scene.children[0];
var object = scene.children[ 0 ];
object.rotation.y = time * 0.0005;
object.material.uniforms.time.value = time * 0.005;
......
examples/webgl_buffergeometry_lines.html
浏览文件 @ 55ff91b1
......@@ -84,8 +84,6 @@
// colors
colors.push( ( x / r ) + 0.5 );
colors.push( ( y / r ) + 0.5 );
colors.push( ( z / r ) + 0.5 );
......
examples/webgl_buffergeometry_selective_draw.html
浏览文件 @ 55ff91b1
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - BufferGeometry selectively drawn using attributes and a shader</title>
<title>three.js webgl - buffergeometry - selective - draw</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 {
background-color: #000;
font-family: Monospace;
margin: 0;
color: #000;
overflow: hidden;
}
a {
color:#ff0;
}
#title {
position: absolute;
width: 100%;
top: 0;
height: 20px;
padding: 0;
text-align: center;
font-size: 1.1em;
background-color: rgba(64,96,64,0.7);
color: #fff;
}
#ui {
position:absolute;
left:0;
top: 20px;
padding: 0;
text-align: center;
width:100%;
height:20px;
color: #fff;
background-color: rgba(64,96,64,0.6);
}
body {
color: #cccccc;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #050505;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style>
<script type="text/javascript" src="../build/three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
......@@ -49,9 +37,11 @@
varying vec3 vColor;
void main() {
vColor = vertColor;
vVisible = visible;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
......@@ -59,36 +49,39 @@
varying vec3 vColor;
void main() {
if ( vVisible > 0.0 ) {
gl_FragColor = vec4( vColor, 1.0 );
} else {
discard;
}
}
</script>
</head>
<body onload="app()">
<div id="title"></div>
<div id="ui"><a href="#" onclick="hideLines();">CULL SOME LINES</a> - <a href="#" onclick="showAllLines();">SHOW ALL LINES</a></div>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> buffergeometry - selective - draw
<div id="title"></div>
<div id="ui"><a href="#" onclick="hideLines();">CULL SOME LINES</a> - <a href="#" onclick="showAllLines();">SHOW ALL LINES</a></div>
</div>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer, stats;
var geometry, mesh;
var numLat = 100;
var numLng = 200;
var numLinesCulled = 0;
function app() {
if ( ! Detector.webgl ) {
Detector.addGetWebGLMessage();
}
init();
animate();
}
init();
animate();
function init() {
......@@ -177,8 +170,9 @@
function updateCount() {
var str = 'BufferGeometry selective drawing: 1 draw call, ' + numLat * numLng + ' lines, ' + numLinesCulled + ' culled (<a target="_blank" href="http://callum.com">author</a>)';
var str = '1 draw call, ' + numLat * numLng + ' lines, ' + numLinesCulled + ' culled (<a target="_blank" href="http://callum.com">author</a>)';
document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );
}
function hideLines() {
......@@ -199,6 +193,7 @@
}
}
geometry.attributes.visible.needsUpdate = true;
updateCount();
......@@ -226,6 +221,7 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
......
examples/webgl_buffergeometry_uint.html
浏览文件 @ 55ff91b1
......@@ -82,7 +82,6 @@
var geometry = new THREE.BufferGeometry();
var indices = [];
var positions = [];
var normals = [];
var colors = [];
......@@ -165,8 +164,8 @@
colorAttribute.normalized = true;
geometry.addAttribute( 'position', positionAttribute );
geometry.addAttribute( 'normal', normalAttribute );
geometry.addAttribute( 'color',colorAttribute );
geometry.addAttribute( 'normal', normalAttribute );
geometry.addAttribute( 'color', colorAttribute );
geometry.computeBoundingSphere();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或