Skip to content

SoftwareRenderer: Fully support BufferGeometry #15385

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

Merged
merged 1 commit into from
Dec 7, 2018
Merged

SoftwareRenderer: Fully support BufferGeometry #15385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion examples/js/renderers/SoftwareRenderer.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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