Skip to content

Commit

Permalink
SoftwareRenderer: Fully support BufferGeometry
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 committed Dec 6, 2018
1 parent 7fed340 commit c130a46
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 57 deletions.
2 changes: 1 addition & 1 deletion examples/js/renderers/SoftwareRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -540,7 +540,7 @@ THREE.SoftwareRenderer = function ( parameters ) {

} else {

if ( material.vertexColors === THREE.FaceColors ) {
if ( material.vertexColors === THREE.FaceColors || material.vertexColors === THREE.VertexColors ) {

string = [
'var colorOffset = offset * 4;',
Expand Down
59 changes: 35 additions & 24 deletions examples/software_lines_splines.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,7 @@

function init() {

var i, container;

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

camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
Expand All @@ -81,51 +79,64 @@

container.appendChild( renderer.domElement );

var geometry = new THREE.Geometry(),
geometry2 = new THREE.Geometry(),
geometry3 = new THREE.Geometry(),
points = hilbert3D( new THREE.Vector3(), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 ),
colors = [], colors2 = [], colors3 = [];
//

var hilbertPoints = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );

var geometry1 = new THREE.BufferGeometry();
var geometry2 = new THREE.BufferGeometry();
var geometry3 = new THREE.BufferGeometry();

var subdivisions = 6;

var spline = new THREE.CatmullRomCurve3( points );
var vertices = [];
var colors1 = [];
var colors2 = [];
var colors3 = [];

var point = new THREE.Vector3();
var color = new THREE.Color();

var spline = new THREE.CatmullRomCurve3( hilbertPoints );

for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {

for ( i = 0; i < points.length * subdivisions; i ++ ) {
var t = i / ( hilbertPoints.length * subdivisions );
spline.getPoint( t, point );

var t = i / ( points.length * subdivisions );
geometry.vertices[ i ] = spline.getPoint( t );
vertices.push( point.x, point.y, point.z );

colors[ i ] = new THREE.Color( 0xffffff );
colors[ i ].setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
color.setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
colors1.push( color.r, color.g, color.b );

colors2[ i ] = new THREE.Color( 0xffffff );
colors2[ i ].setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
color.setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
colors2.push( color.r, color.g, color.b );

colors3[ i ] = new THREE.Color( 0xffffff );
colors3[ i ].setHSL( i / ( points.length * subdivisions ), 1.0, 0.5 );
color.setHSL( i / ( hilbertPoints.length * subdivisions ), 1.0, 0.5 );
colors3.push( color.r, color.g, color.b );

}

geometry2.vertices = geometry3.vertices = geometry.vertices;
geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry3.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

geometry.colors = colors;
geometry2.colors = colors2;
geometry3.colors = colors3;
geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
geometry3.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );

// lines

material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );

var line, p, scale = 0.3, d = 225;
var parameters = [
[ material, scale * 1.5, [ - d, 0, 0 ], geometry ],
[ material, scale * 1.5, [ - d, 0, 0 ], geometry1 ],
[ material, scale * 1.5, [ 0, 0, 0 ], geometry2 ],
[ material, scale * 1.5, [ d, 0, 0 ], geometry3 ]
];

for ( i = 0; i < parameters.length; ++ i ) {
for ( var i = 0; i < parameters.length; ++ i ) {

p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
Expand Down
95 changes: 63 additions & 32 deletions examples/software_sandbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,31 @@
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
a {
color:#0078ff;
}
#info {
position: absolute;
top: 10px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index:100;
}
</style>
</head>
<body>

<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - software renderer</br>
drag to change the point of view
</div>

<script src="../build/three.js"></script>
<script src="js/geometries/hilbert3D.js"></script>
<script src="js/controls/TrackballControls.js"></script>
Expand All @@ -23,9 +40,7 @@
<script src="js/libs/stats.min.js"></script>
<script>

var container, stats;

var camera, controls, scene, renderer;
var camera, controls, scene, renderer, stats;

var torus, cube, texCube;

Expand All @@ -36,17 +51,9 @@

function init() {

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

var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js<a/> - software renderer<br/>drag to change the point of view';
container.appendChild( info );

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 600;

Expand All @@ -55,34 +62,47 @@
scene = new THREE.Scene();

// Torus
var geometry = new THREE.TorusKnotGeometry( 150 );
var torusGeometry = new THREE.TorusKnotBufferGeometry( 150, 10 );
torusGeometry = torusGeometry.toNonIndexed();

for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
var colors = [];
var color = new THREE.Color();

geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
for ( var i = 0; i < torusGeometry.attributes.position.count; i ++ ) {

color.setHex( Math.random() * 0xffffff );
colors.push( color.r, color.g, color.b );

}

torus = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.FaceColors } ) );
torusGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

torus = new THREE.Mesh( torusGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.VertexColors } ) );
scene.add( torus );

// Cube
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
var boxGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
boxGeometry = boxGeometry.toNonIndexed();

for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
colors = [];

geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
for ( var i = 0; i < boxGeometry.attributes.position.count; i ++ ) {

color.setHex( Math.random() * 0xffffff );
colors.push( color.r, color.g, color.b );

}

cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.FaceColors } ) );
boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

cube = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.VertexColors } ) );
scene.position.set( 100, 0, 0 );
scene.add( cube );

// Cube with texture
var loader = new THREE.TextureLoader();
var map = loader.load( 'textures/brick_diffuse.jpg' );
texCube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: map } ) );
texCube = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { map: map } ) );
texCube.position.set( - 300, 0, 0 );
scene.add( texCube );

Expand All @@ -101,29 +121,40 @@
scene.add( texSprite );

// Line
var points = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var spline = new THREE.CatmullRomCurve3( points );
var n_sub = 6, colors = [];
var hilbertPoints = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );

var lineGeometry = new THREE.BufferGeometry();
var subdivisions = 6;

var vertices = [];
colors = [];

var lineGeometry = new THREE.Geometry();
var vertices = lineGeometry.vertices;
var point = new THREE.Vector3();
color.setHex( 0x88aaff );

for ( var i = 0; i < points.length * n_sub; i ++ ) {
var spline = new THREE.CatmullRomCurve3( hilbertPoints );

var t = i / ( points.length * n_sub );
vertices[ i ] = spline.getPoint( t );
colors[ i ] = new THREE.Color( 0x88aaff );
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {

var t = i / ( hilbertPoints.length * subdivisions );
spline.getPoint( t, point );

vertices.push( point.x, point.y, point.z );
colors.push( color.r, color.g, color.b );

}

lineGeometry.colors = colors;
lineGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
lineGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

var material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
var line = new THREE.Line( lineGeometry, material );
line.scale.set( 0.5, 0.5, 0.5 );
line.position.set( 0, - 200, 0 );
scene.add( line );

//

renderer = new THREE.SoftwareRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

Expand Down

0 comments on commit c130a46

Please sign in to comment.