| |
| |
|
| - Página 1 - |
|
HofK | Auf una heißen  Tipp de IF hin, Yo me de tiempo
three.js [...]  angeschaut. Como [...] (bastante unten) el ersten Resultate. |
|
| |
| |
| |
|
| |
| |
| - Página 6 - |
|
|
HofK | Der Fehler war ligeramente  a beheben, uno kann unmittelbar el zuvor con .addGroup ( push ) abgelegte Element encima el Index zugreifen.
En Corrección Yo auch todavía igual el Indexrechnung optimiert.
En Erstellung el Befehle es einfacher a überschauen, si uno el arithmetischen Ausdruck siempre unmittelbar a el Punto ha.
Abgesehen de internen Optimierungen de Javascript, es aber sinnvoll wiederkehrende Indizes una vez vorab a bestimmen.
Im Codeabschnitt se dies y el Corrección deutlich.
Beim Test con el Función
material cover: 0.2 + 0.3 *( 1 + Math.sin( t + u ) ) , ( siehe [...] korrigiert ) zeigt se en z.B. 50 Segmenten, dass BufferGeometry no flotter es como Geometry! Beim Test con unmittelbarer Definition en el Code es en 72 Segmenten Geometry incluso más rápido!
Como el, lo se doch effizienter ser.
Nehmen wir el Einfachheit halber 100 x 100 Segmente a.
Rechnet uno después de, stellt uno fest, el Geometry indexed arbeitet y luego bien 10000 Ecken con a berechnenden Koordinaten y 20000 Dreiecke (faces) ha (no gewaffelt). Diese greifen en el Koordinaten zurück.
El non-indexed BufferGeometry benötigt aber para cada Dreieck drei Koordinaten, auch si se esta mehrfach ( a a sechs veces en no gewaffelt, 8 veces en gewaffelt) wiederholen. Lo ergeben se 60000 Koordinaten!
In uno Anfrage, si indexed oder non- indexed effektiver es kam el Antwort, dass uno esto no es allgemein sagen kann pero je Gebilde testen muss. In mi caso necesario siempre todos Berechnungen durchgeführt voluntad, egal si una komplizierte Función angegeben se oder sólo el konstante Default- Función benutzt se.
Also restos me nichts más übrig, como entonces auch todavía non-indexed BufferGeometry en Angriff  a nehmen.
Dann puede ser el drei Varianten bien vergleichen. |
|
| |
| |
| |
|
|
HofK | Fast geschafft, el drei Varianten posición inmediatamente para Test disponible. [...] 
Aunque hay todavía una Diferencia en el Normalen. En Geometry con bottom oder top führt el intern benutzte three.js Función .computeVertexNormals() dazu, dass al unteren/oberen Rand una schräge Normale entsteht y Rand entonces en smooth shading auch "glatt" es.
Nach diesem Vorbild Yo en non-indexed BufferGeometry el Normalen auch con eigener Berechnung realisiert. Hier Es el Función
.computeVertexNormals() no anwendbar.
En indexedBuffer Geometry führt el Función dazu, dass al Rand y Naht zwei Normalen entstehen.
Das liegt daran, el bottom y top extra vertices haben (wegen el uv-map nötig). Damit bleiben Rand / Naht auch en smooth bastante flat.
Yo voluntad esta Normalen nun todavía zusammenführen.
UPDATE: siehe 27.06.2017 neue Versión - neue Normalen! - siehe 06.07.2017
Der Code es así gestaltet, dass uno el no benötigten Varianten muy
simplemente löschen kann. Hay komplette Blöcke al Ende el Haupt-Características create, morphVertices y morphFaces.
El Auswahl en BufferGeometry geschieht intern por una neue Eigenschaft
indexed,// indexed or non indexed BufferGeometry
Indexed es default.
Wenn el Rest hecho es y Code todavía una wenig optimiert, voluntad Yo después de algunos Tests el Sache entonces en GitHub hochladen y en [...] oficialmente mitteilen.
Auch el Effizienz möchte Yo vorher todavía testen. |
|
| |
| |
| |
|
|
p.specht
 | Faszinierend, qué como ya alles va!
Weiter así!!! |
|
| |
| XProfan 11Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'... | 15.06.2017 ▲ |
|
| |
|
|
HofK | ... Yo voluntad esta Normalen nun todavía zusammenführen. ...
Das war ahora doch aufwändiger como pensamiento!
El Zusammenführung es de el Systematik her problematisch y eventuell total aufwändiger, como el Normalen komplett incluso a berechnen. Deshalb Yo en indexed BufferGeometry .computeVertexNormals() gestrichen y "gerechnet".
Diese "Indexschlacht" war wegen el Nähte heftiger como en non-indexed BufferGeometry, wo einheitlich sólo isolierte Dreiecke zusammengeflickt voluntad.
Como bekommt uno esta ganzen Indizes en el Griff?
En solchen Sachen Yo siempre algunos Blatt kariertes Papier en el Tisch. Darauf entstehen entonces con Bleistift y Radiergummi schrittweise el "Entwicklungsunterlagen".
Als I, con THREEf comenzó habe entstand dieses Blatt:
Como son todavía geklammerte y gestrichene Erstentwürfe sichtbar. Auch una abgearbeitete "to do"- Liste. Das Schema es rechts unten deutlich sichtbar 
Etwas verzwickt war el Sache con el entrollen (unroll). Como musste una zweites Blatt her:
Für Geometry ha el ausgereicht, aber como Yo entonces en non-indexed BufferGeometry con el Dreiecken durcheinander gekommen bin, Yo el Sache veces bastante ordentlich konstruiert. Bottom y Top son halbwegs angedeutet, el pocos Knoten y Dreiecke puede ser a el Fingern dazuzählen. Von el 3x3 Entwurf de lässt el Sache bien verallgemeinern y testen.
El Zuordnung el Dreiecke (faces) a Knoten (vertex) es bastante verzwickt. Yo brauche el, a Normalen a berechnen. Como musste otra vez una Blatt Papier her a Sache festzuhalten.
Nun hay en BufferGeometry todavía una Problema con el Mittelpunkt de Boden y Deckel. Wenn no circOpen, ir el Randpunkte todavía doppelt en el Rechnung una. En sólo drei Radiussegmenten Es el Verschiebung des Mittelpunktes bastante deutlich. Das läßt se aber bastante ligeramente beheben.
Dann todavía algunos Tests y eventuelle Optimierungen y fertig es. Wenn no alguien todavía Fehler findet. [...] Gern testen y mitteilen.
UPDATE: siehe 06.07.2017 |
|
| |
| |
| |
|
|
HofK | Der Mittelpunkt de Boden y Deckel es nun en indexed BufferGeometry korrekt.
Auch una Fehler en el Normalen war todavía a korrigieren. Wenn circOpen, darf el letzte face al unteren Rand y el erste face al oberen Rand no gedoppelt voluntad.
So wurde de einfachem
if ( i === 0 ) vFace.push( fLeftPos ); // face double ...
if ( i === 0 && ( !g.circOpen || ( g.circOpen && j !== rs ) ) ) vFace.push( fLeftPos ); // face double ...
War en efecto wirklich a primitiv  dieses "gleich Null" .
Seit 22.06. Es el Revision 86 [...] de three.js aktuell. Como lo diesmal no offensichtlich para THREEf relevanten Los cambios son, podría Yo simplemente el neue Versión unterschieben.
El geänderte Testversion weiterhin hay: [...]
UPDATE 06.07. siehe nächster y übernächster Contribución |
|
| |
| |
| |
|
|
HofK | Como waren todavía algunos Kleinigkeiten a stemmen.
En zuerst erledigten Berechnung el Normalen en non indexed BufferGeometry ließ el Systematik muy a wünschen übrig. Daher Yo el Berechnung todavía una vez después de el Muster de indexed BufferGeometry umgestrickt.
Wer arbeitet macht Fehler y así tanzte hinterher una einzige Normale a el vorletzten Position el Hülle de el Reihe. Der Knoten zeigte zwei Normalen. Der Fehler war algo heimtückisch, como él no hay entstand wo él a vermuten wäre  - el ha gedauert!
Nun es hoffentlich (fast) fehlerfrei.
Lo son aber siempre todavía una Diferencia en el Normalen!
El Berechnung con .computeVertexNormals() en Geometry ergibt
en no gewaffelt ( !waffled ) al oberen y unteren Rand abweichende Normalen.
Der Grund dafür es, dass el número el faces rechts y links unterschiedlich es ( 1 o. 2) y esta gewichtet eingehen. En eigenen Berechnung para BufferGeometry Yo dies por Zeilen como z.B.
vFace.push( fIdx * 3 );
if ( i === 0 ) vFace.push( fIdx * 3 ); // face double (equal number left and right)
ausgeglichen.
Eventuell mache Yo mich später una vez daran y rechne auch para Geometry incluso.
In el Darstellung wireframe / cover puede ser el a Normalen gehörenden faces bien erkennen.
Nun todavía una wenig testen - siehe [...] - hay auch una Link a una vergleichenden Ejemplo para el drei Geometrievarianten. Und entonces para GitHub fertig hacer. |
|
| |
| |
| |
|
|
HofK |  ------
El aktuelle Versión de THREEf con Geometry y BufferGeometry befindet se ahora en [...] .
El Testversion behält ihren Platz [...] .
A Sicherheit Yo el alte Versión (sólo Geometry, r85) komplett nach [...] movido.
Auf GitHub [...] Yo el entsprechend realisiert, el alte Versión befindet se vollständig en el Directorio /THREEf_old.
Fehlt todavía el Ankündigung en discourse.threejs.org [...]  |
|
| |
| |
| |
|
|
HofK | El Ankündigung en discourse.threejs.org [...]
es por una más Eintrag en [...] es.
_________________________________________________________
Nun kommt el große Überraschung: 
Zitat de docs / Geometrie [...]
"Mit Geometrien es einfacher a trabajo como con BufferGeometrien, como ellos Atributos como Eckpunkte, Flächen, Farben y así más direkt (anstatt en Puffern) speichern, aber ellos son en el Regel langsamer."
Weil lo einfacher es, Yo el addon con Geometry comenzó.
Mir wurde dijo, Yo debería siempre BufferGeometry nehmen.
El Überraschung: Geometry Es el schnellste Variante!
Siehe [...]
¿Cómo se puede al erklären? Yo weiß no por qué.
Kann ser, mi Berechnung el vertices, positions, faces, normals son no effizient genug y el three.js internen Berechnungen de Geometry son oft viel mejor.
In Inglés [...] |
|
| |
| |
| |
|
|
HofK | HofK (08.07.2017)
Kann ser, mi Berechnung el vertices, positions, faces, normals son no effizient genug y el three.js internen Berechnungen de Geometry son oft viel mejor.
In Inglés [...]
Und como [...] son auch Respuesta. Geometry se encima kurz oder lang "abgeschafft", como lohnt no se así intensiv a befassen.
Yo finde lo schade, como Principiante  lo entonces seeeeehr schwer
haben voluntad se con three.js a befassen. 
El BufferGeometry es doch algo verzwickt. Der Foco liegt pero probablemente deutlich en el professionellen Anwendern.
Yo bin no gerade una Principiante en el Programación, pero si lo Geometry no gegeben hätte, wer weiß si Yo entonces wirklich en three.js eingestiegen wäre?
Auch ahora Yo lo vorgezogen una Erweiterung sólo una vez con Geometry a testen. Si el klappt, kann Yo en BufferGeometry übertragen.
El Cuestión [...] brachte mich en el Concepto, lo veces con THREEf a versuchen.
Es nada veces viel Aufwand. Einziges Problema Es el Tatsache, dass bajo Windows Systemen sólo Linien el Stärke 1 dargestellt voluntad (siehe [...] ) y al Material des Körpers algo transparent halten muss, a "quad lines" sauber darzustellen.
In el Función create() se una THREE.line producido (en lugar de Maschen also una Linie) y todos Punkte voluntad sólo una vez en el Ursprung gelegt.
In el Función morphVertices( time ) se entonces el Linie en zwei Teilen encima todos vertices elaborado. Einmal horizontal, una vez vertikal en el Zickzack. Das son otra vez una schöne Indexrechnung y una no vorzeigbares "Schmierblatt" como Entwurf dazu - viel Radiergummi verbraucht!
Es deutlich gekennzeichnet, qué hinzugekommen es. Wegen el Effizienz voluntad Yo vorher en quadline abfragen y zwei getrennte Blöcke invertir, en sin quadline no ständig Abfragen en el Code a haben. |
|
| |
| |
| |
|
|
HofK | Das ging todavía einfacher  como pensamiento, auch BufferGeometry ha nun el Características quadLine y quadColor.
Im erneuerten "Sandkasten" [...] (firefox!) puede ser beide auswählen. El quad line es sólo sinnvoll posible con el Eigenschaft circOpen. Deshalb se esta Eigenschaft en THREEf automáticamente gesetzt. Um el sichtbar a hacer, se auch el Checkbox entonces gesetzt.
En el más Beispielen (further examples [...] - auch otro Navegador) Yo una entsprechende Ergänzung vorgenommen.
Zu beachten es, dass el mesh el quad line gesondert hinzugefügt voluntad muss. In THREEf se sí sólo el Geometrie producido / manipuliert.
|
|
| |
| |
| |
|
|
HofK | Bisher konnten el Nummerierung el Ecken (vertices) sólo en Geometry adecuado voluntad. Diesen Mangel Yo nun Fijo.
Como aber non-indexed Buffer Geometry gar no eigenen Ecken besitzt - Dreieckssuppe - musste I el intern en un array vertexPositions gespeicherten Daten zurückgreifen.
Dort son el a uno Ecke gehörenden Dreiecke - genauer el Position una Ecke des Dreiecks - gespeichert.
Von esta Einträgen Aprovecho jeweils siempre el erste Element.
Für Ecke n:
vertexNumbers[ n ].position.set( ... .vertexPositions[ n ][ 0 ] ...
En [...] Es el neue Möglichkeit nun verfügbar.
En discourse.threejs.org mitgeteilt y en GitHub gespeichert. |
|
| |
| |
| |
|
|
HofK | HofK (08.07.2017)
Kann ser, mi Berechnung el vertices, positions, faces, normals son no effizient genug y el three.js internen Berechnungen de Geometry son oft viel mejor.
Um el eventuell a klären, Yo una bastante simplen Test fabriziert.
Der Code es knapp y salvo el tatsächlich notwendigen Unterschiede para Geometry y BufferGeometry identisch.
<!DOCTYPE html>
<!-- *** speedtest simple ***
/**
* @author hofk / https://sandbox.threejs.hofk.de/
*/
-->
<html lang="de">
<head>
<title> speedtest simple </title>
<meta charset="utf-8" />
</head>
<body>
segment sount;
<input type="text" size="5" id="hs" value="100" > /
<input type="text" size="5" id="rs" value="100" > - chose:
<input type="radio" name="geom" id="Geometry" checked="checked" > Geometry
<input type="radio" name="geom" id="BufferGeometry" > indexed BufferGeometry
<button type="button" id="show"> -> show mesh </button>
</body>
<script src="three.min.86.js"></script>
<script src="OrbitControls.js"></script>
<script src="THREEx.WindowResize.js"></script>
<script>
'use strict'
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200000 );
camera.position.set( 400, 600, 1000 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xeeeeee, 1 );
var container = document.createElement('div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
THREEx.WindowResize( renderer, camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
var clock = new THREE.Clock( true );
var t;// time
var g;// Geometry or BufferGeometry
var mesh;
var hs;// height segment count ( y direction)
var rs;// radial segment count (here en test x direction)
var hss;// hs + 1
var rss;// rs + 1
var vertexCount;
var vIdx;// vertex Index
var faceCount;
var fIdx;// face index
var j0, j1;// j index
var a, b1, c1, c2;// vertex indices, b2 equals c1
var ni, nj;// relative counter variable
var posIdx;// position Index
var x, y, z;// position coordinates
var materialSegment;
var showGeo = falso;
// materials
var uvTex = new THREE.TextureLoader().load( "uvgrid01.png" );
var waterlilyTex = new THREE.TextureLoader().load( "waterlily.png" );
// var earthTex = new THREE.TextureLoader().load( "earth_nasa_map_900.png" );
var side = THREE.DoubleSide;
var materials = [
// material index:
new THREE.MeshBasicMaterial( { transparent: true, opacity: 0.5, side: side } ),// 0 transparent
new THREE.MeshBasicMaterial( { map: uvTex, side: side } ),// 1 uv grid
new THREE.MeshPhongMaterial( { color: 0xff0000, emissive: 0xff0000, side: side, } ),// 2 red
new THREE.MeshPhongMaterial( { color: 0x00ff00, emissive: 0x00ff00, side: side, } ),// 3 green
new THREE.MeshPhongMaterial( { color: 0x0000ff, emissive: 0x0000ff, side: side, } ),// 4 blue
new THREE.MeshPhongMaterial( { color: 0xffff00, emissive: 0xffff00, side: side, } ),// 5 yellow
new THREE.MeshPhongMaterial( { color: 0xff00ff, emissive: 0xff00ff, side: side, } ),// 6 mgenta
new THREE.MeshPhongMaterial( { color: 0x00ffff, emissive: 0x00ffff, side: side, } ),// 7 cyan
new THREE.MeshBasicMaterial( { map: waterlilyTex, side: side } ),// 8 photo waterlily (free)
new THREE.MeshPhongMaterial( { color: 0x7755ff, emissive: 0x4433dd, side: side } ),// 9 color
new THREE.MeshPhongMaterial( { color: 0x444444, emissive: 0x333333, side: side } )// 10 grey
];
// var material = new THREE.MeshBasicMaterial( { color: 0x880088, side: side, wireframe: true } );
// var material = new THREE.MeshBasicMaterial( { map: earthTex, side: side } );
document.getElementById( "show" ).onclick = showNewMesh;
animate();
// ......................
function showNewMesh() {
if ( mesh ) {
scene.remove( mesh );
g.disponer();
showGeo = falso;
}
hs = Math.floor( document.getElementById( "hs" ).value );
rs = Math.floor( document.getElementById( "rs" ).value );
hss = hs + 1;
rss = rs + 1;
vertexCount = hss * rss;
faceCount = hs * rs * 2;
// Geometry or BufferGeometry
if ( document.getElementById( "Geometry" ).checked ) g = new THREE.Geometry();
if ( document.getElementById( "BufferGeometry" ).checked ) g = new THREE.BufferGeometry();
// mesh
mesh = new THREE.Mesh( g, materials );
scene.add( mesh );
//configure
if ( g.isGeometry ) {
for ( var i = 0; i < vertexCount; i ++ ) {
g.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
}
}
if ( g.isBufferGeometry ) {
var idxCount = 0;
g.faceIndices = new Uint32Array( faceCount * 3 );
g.vertices = new Float32Array( vertexCount * 3 );
g.setIndex( new THREE.BufferAttribute( g.faceIndices, 1 ) );
g.addAttribute('position', new THREE.BufferAttribute( g.vertices, 3 ).setDynamic( true ) );
for ( var f = 0, p = 0; f < faceCount; f ++, p += 3 ) {
g.addGroup( p, 3, 0 );// write group for multi material
}
}
for ( var j = 0; j < rs; j ++ ) {
j0 = hss * j;
j1 = hss * ( j + 1 );
for ( var i = 0; i < hs; i ++ ) {
// 2 faces / segment, 3 vertex indices
a = j0 + i;
b1 = j1 + i;// right-bottom
c1 = j1 + 1 + i;
// b2 = j1 + 1 + i; =c1 // left-top
c2 = j0 + 1 + i;
if ( g.isGeometry ) {
g.faces.push( new THREE.Face3( a, b1, c1 ) );// right-bottom
g.faces.push( new THREE.Face3( a, c1, c2 ) );// left-top
}
if ( g.isBufferGeometry ) {
g.faceIndices[ idxCount ] = a;// right-bottom
g.faceIndices[ idxCount + 1 ] = b1;
g.faceIndices[ idxCount + 2 ] = c1;
g.faceIndices[ idxCount + 3 ] = a;// left-top
g.faceIndices[ idxCount + 4 ] = c1,
g.faceIndices[ idxCount + 5 ] = c2;
idxCount += 6;
}
}
}
showGeo = true;// start animation
}
function move( t ) {
if ( g.isGeometry ) g.verticesNeedUpdate = true;
if ( g.isBufferGeometry ) g.attributes.position.needsUpdate = true;
g.groupsNeedUpdate = true;// to change materialIndex for multi material
for ( var j = 0; j < rss; j ++ ) {
nj = j / rs;
y = 400 * nj;// calculate y
for ( var i = 0; i < hss; i ++ ) {
ni = i / hs;
x = 400 * ni;// calculate x
z = 400 * Math.sin( t + ni + nj );// calculate z
vIdx = hss * j + i;
if ( g.isGeometry ) g.vertices[ vIdx ].set( x, y, z );
if ( g.isBufferGeometry ) {
posIdx = vIdx * 3;
g.vertices[ posIdx ] = x;
g.vertices[ posIdx + 1 ] = y;
g.vertices[ posIdx + 2 ] = z;
}
}
}
for ( var j = 0; j < rs ; j ++ ) {
for ( var i = 0; i < hs; i ++ ) {
materialSegment = Math.floor( 5 * ( 1 + Math.cos( 0.2 * t + i * i + 2 * j ) ) );// calculate material
fIdx = 2 * hs * j + 2 * i;
if ( g.isGeometry ) {
g.faces[ fIdx ].materialIndex = materialSegment;
g.faces[ fIdx + 1 ].materialIndex = materialSegment;
}
if ( g.isBufferGeometry ) {
g.groups[ fIdx ].materialIndex = materialSegment;
g.groups[ fIdx + 1 ].materialIndex = materialSegment;
}
}
}
}
function animate() {
requestAnimationFrame( animate );
t = clock.getElapsedTime();
if ( showGeo ) move( t );
renderer.render( scene, camera );
controls.update();
}
</script>
</html>
Auch hier es aber Geometry más rápido. 
Speicherverbrauch y Geschwindigkeit posición oft en un umgekehrten Verhältnis. Wenn no todavía interne Optimierungen vorgenommen voluntad, muss una continuación para solche Sachen en lugar de a einfachen Geometry a todavía komplizierteren Dingen como BufferGeometry greifen.
Den Test puede ser incluso bajo [...] absolvieren.
 |
|
| |
| |
| |
|
(900)
Deutsch
English
Français
Español
Italia