Skip to content

Commit 07897d9

Browse files
mrdoobmrdoob
authored
Merge pull request #15385 from Mugen87/dev20
SoftwareRenderer: Fully support BufferGeometry
2 parents 95c906b + c130a46 commit 07897d9

File tree

3 files changed

+99
-57
lines changed

3 files changed

+99
-57
lines changed

‎examples/js/renderers/SoftwareRenderer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,7 @@ THREE.SoftwareRenderer = function ( parameters ) {
540540

541541
} else {
542542

543-
if ( material.vertexColors === THREE.FaceColors ) {
543+
if ( material.vertexColors === THREE.FaceColors || material.vertexColors === THREE.VertexColors ) {
544544

545545
string = [
546546
'var colorOffset = offset * 4;',

‎examples/software_lines_splines.html‎

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,7 @@
6666

6767
function init() {
6868

69-
var i, container;
70-
71-
container = document.createElement( 'div' );
69+
var container = document.createElement( 'div' );
7270
document.body.appendChild( container );
7371

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

8280
container.appendChild( renderer.domElement );
8381

84-
var geometry = new THREE.Geometry(),
85-
geometry2 = new THREE.Geometry(),
86-
geometry3 = new THREE.Geometry(),
87-
points = hilbert3D( new THREE.Vector3(), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 ),
88-
colors = [], colors2 = [], colors3 = [];
82+
//
83+
84+
var hilbertPoints = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
85+
86+
var geometry1 = new THREE.BufferGeometry();
87+
var geometry2 = new THREE.BufferGeometry();
88+
var geometry3 = new THREE.BufferGeometry();
8989

9090
var subdivisions = 6;
9191

92-
var spline = new THREE.CatmullRomCurve3( points );
92+
var vertices = [];
93+
var colors1 = [];
94+
var colors2 = [];
95+
var colors3 = [];
96+
9397
var point = new THREE.Vector3();
98+
var color = new THREE.Color();
99+
100+
var spline = new THREE.CatmullRomCurve3( hilbertPoints );
101+
102+
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
94103

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

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

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

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

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

109118
}
110119

111-
geometry2.vertices = geometry3.vertices = geometry.vertices;
120+
geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
121+
geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
122+
geometry3.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
112123

113-
geometry.colors = colors;
114-
geometry2.colors = colors2;
115-
geometry3.colors = colors3;
124+
geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
125+
geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
126+
geometry3.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
116127

117128
// lines
118129

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

121132
var line, p, scale = 0.3, d = 225;
122133
var parameters = [
123-
[ material, scale * 1.5, [ - d, 0, 0 ], geometry ],
134+
[ material, scale * 1.5, [ - d, 0, 0 ], geometry1 ],
124135
[ material, scale * 1.5, [ 0, 0, 0 ], geometry2 ],
125136
[ material, scale * 1.5, [ d, 0, 0 ], geometry3 ]
126137
];
127138

128-
for ( i = 0; i < parameters.length; ++ i ) {
139+
for ( var i = 0; i < parameters.length; ++ i ) {
129140

130141
p = parameters[ i ];
131142
line = new THREE.Line( p[ 3 ], p[ 0 ] );

‎examples/software_sandbox.html‎

Lines changed: 63 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,31 @@
77
<style>
88
body {
99
font-family: Monospace;
10-
background-color: #f0f0f0;
1110
margin: 0px;
1211
overflow: hidden;
1312
}
13+
a {
14+
color:#0078ff;
15+
}
16+
#info {
17+
position: absolute;
18+
top: 10px; width: 100%;
19+
color: #ffffff;
20+
padding: 5px;
21+
font-family: Monospace;
22+
font-size: 13px;
23+
text-align: center;
24+
z-index:100;
25+
}
1426
</style>
1527
</head>
1628
<body>
1729

30+
<div id="info">
31+
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - software renderer</br>
32+
drag to change the point of view
33+
</div>
34+
1835
<script src="../build/three.js"></script>
1936
<script src="js/geometries/hilbert3D.js"></script>
2037
<script src="js/controls/TrackballControls.js"></script>
@@ -23,9 +40,7 @@
2340
<script src="js/libs/stats.min.js"></script>
2441
<script>
2542

26-
var container, stats;
27-
28-
var camera, controls, scene, renderer;
43+
var camera, controls, scene, renderer, stats;
2944

3045
var torus, cube, texCube;
3146

@@ -36,17 +51,9 @@
3651

3752
function init() {
3853

39-
container = document.createElement( 'div' );
54+
var container = document.createElement( 'div' );
4055
document.body.appendChild( container );
4156

42-
var info = document.createElement( 'div' );
43-
info.style.position = 'absolute';
44-
info.style.top = '10px';
45-
info.style.width = '100%';
46-
info.style.textAlign = 'center';
47-
info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js<a/> - software renderer<br/>drag to change the point of view';
48-
container.appendChild( info );
49-
5057
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
5158
camera.position.z = 600;
5259

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

5764
// Torus
58-
var geometry = new THREE.TorusKnotGeometry( 150 );
65+
var torusGeometry = new THREE.TorusKnotBufferGeometry( 150, 10 );
66+
torusGeometry = torusGeometry.toNonIndexed();
5967

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

62-
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
71+
for ( var i = 0; i < torusGeometry.attributes.position.count; i ++ ) {
72+
73+
color.setHex( Math.random() * 0xffffff );
74+
colors.push( color.r, color.g, color.b );
6375

6476
}
6577

66-
torus = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.FaceColors } ) );
78+
torusGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
79+
80+
torus = new THREE.Mesh( torusGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.VertexColors } ) );
6781
scene.add( torus );
6882

6983
// Cube
70-
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
84+
var boxGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
85+
boxGeometry = boxGeometry.toNonIndexed();
7186

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

74-
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
89+
for ( var i = 0; i < boxGeometry.attributes.position.count; i ++ ) {
90+
91+
color.setHex( Math.random() * 0xffffff );
92+
colors.push( color.r, color.g, color.b );
7593

7694
}
7795

78-
cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.FaceColors } ) );
96+
boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
97+
98+
cube = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.VertexColors } ) );
7999
scene.position.set( 100, 0, 0 );
80100
scene.add( cube );
81101

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

@@ -101,29 +121,40 @@
101121
scene.add( texSprite );
102122

103123
// Line
104-
var points = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
105-
var spline = new THREE.CatmullRomCurve3( points );
106-
var n_sub = 6, colors = [];
124+
var hilbertPoints = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
125+
126+
var lineGeometry = new THREE.BufferGeometry();
127+
var subdivisions = 6;
128+
129+
var vertices = [];
130+
colors = [];
107131

108-
var lineGeometry = new THREE.Geometry();
109-
var vertices = lineGeometry.vertices;
132+
var point = new THREE.Vector3();
133+
color.setHex( 0x88aaff );
110134

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

113-
var t = i / ( points.length * n_sub );
114-
vertices[ i ] = spline.getPoint( t );
115-
colors[ i ] = new THREE.Color( 0x88aaff );
137+
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
138+
139+
var t = i / ( hilbertPoints.length * subdivisions );
140+
spline.getPoint( t, point );
141+
142+
vertices.push( point.x, point.y, point.z );
143+
colors.push( color.r, color.g, color.b );
116144

117145
}
118146

119-
lineGeometry.colors = colors;
147+
lineGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
148+
lineGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
120149

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

156+
//
157+
127158
renderer = new THREE.SoftwareRenderer();
128159
renderer.setSize( window.innerWidth, window.innerHeight );
129160

0 commit comments

Comments
 (0)