XProfan

- page 4 -

HofK

Ungültig:

HofK (25.03.2017)

ACHTUNG! pas trop longtemps courir laisser, cela Speicherleck ist encore aktiv. Es sei car, on voudrais la fois testen comme ist, si qui Browser dans qui Knie allez.

Speicherleck soeben gestopft!
prochainement plus en supplément.

qui seinen Browser paralysé poser voudrais braucht un d'autre objet.

01.04.2017 ▲

HofK

cela Speicherleck.

Im Manual de three.js [...]

gibt es den Punkt "How to update things" et là zur Geometrie une Auflistung. Aus Beispielen et par Versuche J'ai eu herausgefunden, dass geometry.elementsNeedUpdate = true; es permet, den Materialindex trop changement et avec cela un Multimaterial aus verschiedenen Einzelmaterialien dynamisch trop nutzen.

Funktioniert oui aussi prima. seulement ensuite plan cela Speicherleck

!

après que sur mon quelque chose umfangreichere Frage chez stackoverflow [...]

aucun Antwort kam, habe je pour Experimenten une ähnlich gelagerte mais doch autre et très knappe Frage gestellt: [...]

vous wurde très vite de WestLangley (Mitautor de three.js) beantwortet et führte mich pour Umwegen sur qui richtige vestige. dans qui Antwort sur cela simple Problem reicht geometry.colorsNeedUpdate = true;, mais cela hilft pas beim Multimaterial.

Somit habe je alle möglichen Dinge durchsucht. Im droite gentil anzusehendenBeispiel [...]

findet on ensuite elementsNeedUpdate à Eckpunkte qui Faces (Dreiecke) dynamisch trop changement et den pas chez "How to update things" aufgeführten Befehl groupsNeedUpdate um den Materialindex trop manipuler. alors un pas dokumentierter Befehl, qui mais wohl ausreicht. qui Befehl kam sûrement seulement später hinzu, three.js entwickelt sich encore très dynamisch.

après que Je l' langsamen la mesure des Beispiels de 1000ms sur 10ms drastisch modifié hatte, ergab es un Speicherleck. mais seulement chez elementsNeedUpdate!

Im Voir le texte source de three.js findet on ensuite qui passage:

si ( matériel && matériel.isMultiMaterial ) {

var groups = geometry.groups;
var materials = matériel.materials;

for ( var k = 0, kl = groups.length; k < kl; k ++ ) {

var group = groups[ k ];
var groupMaterial = materials[ group.materialIndex ];
...

vous zeigt, dass qui Materialindex dans Gruppen organisiert ist.

Somit ist qui Solution meines Problems qui Austausch eines einzigen Befehls. Habe eh bien mon Frage chez stackoverflow selbst beantwortet.

si je mais projet sollte aussi qui Eckpunkte qui Dreiecke dynamisch trop échanger, gibt es cela la voie d'eau.

je crois, dass ca interne dans Javascript/three.js so komplex ist, dass ab un certain Flächenanzahl et einem la mesure es pas plus possible ist, dass qui Garbage Collection hinterherkommt.

ensuite muss on wahrscheinlich sur qui Shader changer, qui je dans Minibeispielen getestet habe. [...]

03.04.2017 ▲

HofK

Habe encore un peu den Code optimiert et ensuite quelques weitere Beispiele pour qui Formen-Bibliothèque gebastelt.

Dabei suis je sur une interessante page trop dekorativen Knotenmustern
gestoßen. [...]

qui là angegebenen Formeln laisser sich avec entsprechender Anpassung unmittelbar prendre. cela Beispiel

heightSegments:	400,
centerX:	function ( v, t ) { return Math.cos( 4*v *2*Math.PI ) * ( 1 + 0.5 * ( Math.cos( 5*v *2*Math.PI ) + 0.4 * Math.cos( 20*v *2*Math.PI ))) },
centerY:	function ( v, t ) { return Math.sin( 4*v *2*Math.PI ) * ( 1 + 0.5 * ( Math.cos( 5*v *2*Math.PI ) + 0.4 * Math.cos( 20*v *2*Math.PI ))) },
centerZ:	function ( v, t ) { return 0.35 * Math.sin( 15*v *2*Math.PI ) }

habe je dans qui Bibliothèque [...]

aufgenommen et là den Link le Mustern vermerkt.

07.04.2017 ▲

HofK

chez den bisherigen Beispielen habe je presque toujours qui Textur uv Grid benutzt, à Formen besonders deutlich trop faire.

comme je eh bien quelques seulement einfarbige Gebilde erzeugt habe, c'est moi aufgefallen, dass dans qui Sandbox qui 3D forme pas wirklich bien sichtbar wird. c'est pourquoi habe je am Licht "geschraubt" et THREE.FlatShading chez den Materialien défini. avec cela wird qui Gitterstruktur sichtbar.

cela Beispiel // eight-part de [...]

sieht ensuite z.B. so aus

14.04.2017 ▲

HofK

THREE.FlatShading ist pour qui Konstruktion zwar droite pratique, mais richtig joli glatte Oberflächen voyons viel netter aus.

c'est pourquoi habe je eh bien dans den Sandkasten beim matériel une Checkbox flat shading eingefügt. avec son peux on ensuite pour besoin vom Standard smooth shading trop flat shading échanger.

[...]

15.04.2017 ▲

HofK

qui 3D Konstruktion avec THREE.js et Funktionen permet une schier unendliche Vielzahl de Formen. aussi qui Bewegungen et Changements qui Gestalt sommes presque unerschöpflich.

une difficulté ist allerdings qui richtigen Funktionen pour trouver. quelquefois ist cela entweder unmöglich ou bien viel trop compliqué. Stellt on sich une bestimmte Mittelpunktskurve avant, so ist es eventuell trop aufwändig ou bien unmöglich trois passende Funktionen centerX(), centerY(), centerZ() trop ermitteln.

Aus diesem Grund habe je qui Possibilité geschaffen, statt qui trois Funktionen un Datenfeld de Koordinatenpunkten anzugeben. Dabei sommes normalement Werte entre 0 et 1 anzugeben, so comment cela pour qui Argumente et Funktionswerte qui Funktionen gilt. qui Skalierung erfolgt ensuite wieder sur radius et height.

interne volonté qui Funktionswerte seulement par qui Werte im Datenfeld ersetzt et aus dem räumlichen la distance qui Punkte volonté qui Werte pour qui Höhenskalierung berechnet. qui Nombre de Höhensegmente ergibt sich aus qui Nombre de angegebenen Punkte minus 1.

Um cela Datenfeld trop aktivieren, muss qui Checkbox markiert volonté. cela Datenfeld peux unmittelbar eingetippt bzw. manipuler volonté, ou bien on kopiert es aus Vorlagen. il peut qui Geometrie laufend avec dem Button "apply now / show mesh" begutachten. So peux on qui Koordinaten dans qui Sandbox testen et si es comme cela Datenfeld pour qui définition einer Geometrie comment dans den Beispielen kopieren. chez qui Javascript définition wird geprüft, si un Datenfeld centerPoints comme paramètre angegeben ist. si et alors es pas cela le vide Datenfeld ist, wird es benutzt, ansonsten qui center - Funktionen. sommes cet pas angegeben, greifen qui default -Funktionen.

Schließt on cela Eingabefenster, ist sur dem Button vermerkt, si cela Datenfeld benutzt wird.

qui Funktion ist déjà un paire Tage online, sollte maintenant mais vollständig son. [...]

là ist cela Beispiel: [...]

[...]

18.04.2017 ▲

HofK

avec cela qui hübschen Funktionen-Gebilde pas seulement ici de einer kleinen Schar Interessierter angesehen volonté peut, habe je sur codepen [...]

une variante qui Beispiele velours Bibliothèque eingestellt.

là dessus à droite qui cherche (Lupe) Vous pouvez et three.js eintippen et abentern. on bekommt sur 4000 Einträge dans qui Rubrik Pens!
c'est pourquoi momentan ensuite simple "Order results by" Newest first choisir et es findet sich encore assez am Anfang.

prochainement ist ensuite un anderer Suchbegriff nötig um es pour trouver: hofk

qui cherche chez codepen ist pas wirklich überzeugend et chez den unzähligen Beiträgen findet on ensuite pas wirklich quoi on cherchez. c'est pourquoi habe je une qui cinq möglichen Tags simple sur mon Kürzel gesetzt. qui quatre anderen Tags sommes three.js, multimaterial, geometry, motion.

simple la fois regarder, quoi es là sonst encore so gibt.

22.04.2017 ▲

HofK

après que mir un deutschsprachiger Mitautor de three.js bestätigt hat, quoi je aussi pour meinen Recherchen vermuten musste, citation:

"... Aussi sommes si bien comment alle relevanten Bücher, Blog-Posts, Dokumentationen ou bien wissenschaftliche Paper im Kontext qui webbasierten 3D-Grafikprogrammierung et three.js sur Englisch. dans Allemand Discours wirst du si bien comment rien trouver. mais aucun Sorge. Du musst Englisch aucunement fließend peut. ... "

habe je mich daran gemacht et cela projet réglé aussi three.js chez GitHub eingestellt. [...]

bof, Englisch peux je oui eh bien wirklich pas fließend!

mais avec quelque chose Routine gelingt es avec Aider de Google Übersetzer qui Sachen toujours zeiteffektiver et quelque chose moins stressig hinzubekommen. on muss seulement den "Übersetzungsmüll" aussortieren, qui justement chez Wortgruppen / Sätzen avec Fachbegriffen souvent herauskommt. Übungssache et on lernt ensuite nebenbei.

Habe ensuite cela projet aussi im droite neuen offiziellen three.js Forum dans qui catégorie Resources vorgestellt: [...]

sous forum ou bien direkt [...]

.

Bevor je qui l'affaire online gebracht habe, musste je beim Test si mon addon aussi sous qui brandneuen Revision 85 de three.js fonctionne feststellen, dass une Changement beim matériel vorgenommen wurde.

Statt un gesondertes MultiMaterial trop définir, braucht on maintenant seulement encore cela array qui Materialien anzugeben. So konnte je dans GitHub juste üben, comment on solche Updates einspielt.

dessus erwähnter Mitautor hat mir indirect aussi encore juste une devoir mitgegeben:

"Noch un kleiner Tipp: THREE.Geometry devrait du zur Generierung de Geometrien pas plus verwenden. THREE.BufferGeometry allokiert viel moins Ressourcen et ist deutlich performant. Aussi konvertiert qui interne Render-Logik de three.js THREE.Geometry automatisch pour THREE.BufferGeometry."

en supplément muss on savons, dass THREE.BufferGeometry schwieriger trop handhaben ist et dans qui Documentation stand, dass es sich pour statische Dinge besonders eignet. mais c'est wohl pas so relevant, il y a static ou bien dynamic.

.dynamic
Whether le buffer is dynamic or not. Default is faux.
Si faux, le GPU is informed that contents of le buffer sont likely to être used often and not change often. This corresponds to le gl.STATIC_DRAW flag.
si vrai, le GPU is informed that contents of le buffer sont likely to être used often and change often. This corresponds to le gl.DYNAMIC_DRAW flag.

cela allez dans qui shader Programmation - siehe Beispiel plus dessus.

ensuite werde je maintenant la fois

----- et mir BufferGeometry [...]

vorknöpfen.

27.04.2017 ▲

HofK

qui Anfang ist gemacht, si cela klappt ist qui Stimmung bien et es peux (presque) rien plus de travers aller.

Aus dem pas vollständig anfängerfreundlichen, mais überaus tollem Beispiel avec viel Bewegung, Live et Code trop betrachten et chez besoin aussi manipulierbar [...]

habe je un total primitives Beispiel zusammengestrichen. cela peux chacun durchschauen.

chez THREE.BufferGeometry() volonté qui données dans Datenfeld-Puffern gehalten, avec cela entfällt qui Strukturierung et on muss sich selber à Indizes kümmern. là habe je Glück, c'est eh' mon Ding, je liebe Indexrechnungen.

var triangles = 2;
var positions = new Float32Array( triangles * 3 * 3 ); // buffer arrray, position of vertices
var colors = new Float32Array( triangles * 3 * 3 );// buffer arrray, vertexColors

Zum Anfang habe je mais selbst qui Boucle rausgeschmissen et fixe Indizes angegeben, cela fait es encore transparenter.

qui "Spezialität" chez den Buffern sommes qui Attribute:

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

et là peux on cela primitive Beispiel et per Strg+U den Quellcode betrachten: [...]

--------------------------------------

UPDATE - et avec ca la couleur hinzugefügt et un Quadrat avec einer Textur.

Nachtrag: Siehe maintenant aussi deux Varianten sur [...]

27.04.2017 ▲

HofK

Den folgenden Text - mais dans Englisch - habe je sur discourse.threejs.org [...]

eingestellt:

Editierbare Formen Bibliothèque sur GitHub

avec Aider qui Funktionen laisser sich avec THREEf.js très vielfältige Formen erzeugen. c'est mais pas toujours simple, trop einer Figur qui on sich vorstellt, qui passenden Formeln pour trouver.

c'est pourquoi habe je qui Bibliothèque de PDF sur HTML umgestellt. vous ist sur GitHub disponible. So peux on sa Formen là anderen Nutzern zur Disposition se mettre.

par une grand Bibliothèque wird THREEf.js ensuite pour viele Nutzer simple anwendbar.

Gestalte une Geometrie et füge vous qui Bibliothèque à: [...]

une Kurzanleitung est sich am Ende qui Dossier:

document.images[0...].src = "img/    .png";
parameterList[0...].value = "//0...Here is le right place for your example! \n ";
//__________________________________________________________

// +++++ Do not destroy le following instructions. +++++
/ /
// Copy le charge section, increase le indices and then describe your forme dans le penultimate section.
// Set le number nnnn, a description and your author journée, possibly with URL.
// Si you copy le list of parameters into le string, replace le line pause with \n
// Copy your image to le img directory and use le pattern à partir de above (fourDigits_name.type) for le nom.
// Take png (or jpg) images up to approximately 100KByte.
/ /
// Si le image is not square, change le height or width dans your section:
// document.images [index].width = "value" or document.images [index].height = "value"
// lac examples index 3 and 10, standard is 160 x 160.
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++
</script>

je suis récente chez GitHub, je hoffe, es funktioniert.

qui einmal ausprobieren voudrais, comment on chez GitHub une Beitrag trop einem projet leistet, peux que voici gefahrlos . Assurez-

simple une Account chez GitHub erstellen et sur den Speicherort THREEf aller. là qui öffentlich ist, entstehen aussi mir aucun coûter. seulement pour private Nutzung muss on payons.

maintenant den Menüpunkt Pull requests anwählen et ensuite
den grünen Button New pull request betätigen.

Alle Changements qui on pouvoir, volonté dans den Zweig dev(elopment) geschrieben et qui Posts volonté tranparent dokumentiert.

Pour einer Zeit muss je mir qui Changements anschauen et "genehmigen". seulement ensuite volonté vous de mir dans den geschützen Zweig master übernommen.

essayer konnte je cela so encore pas, là je keinen Pseudoaccount erzeugen voudrais.

alors aucun Scheu et essayer, es peux rien abîmé aller, im Notfall ici per Privé nouvelle ou bien per Mail avec mir dans contact treten.

02.05.2017 ▲

HofK

Schaut on genauer pour qui BufferGeometrie, so entdeckt on deux Varianten, indiziert et pas indiziert.

chez qui pas indizierten variante ist qui Geometrie une "Dreieckssuppe", qui Koordinaten aller Eckpunkte aller Dreiecke volonté nacheinander angegeben. Klingt seulement einmal einleuchtend, ist es aussi, si alle Dreiecke comment dans einer Suppe qui Nudeln libre herumschwimmen.

chez "ordentlichen" Körpern ou bien flächigen Gebilden sommes qui Dreiecke mais aneinander geheftet. quand même muss on qui identischen Ecken toujours wieder pour chaque Dreieck Sauver. chez meinem THREEf sommes es jusque six et chez einem Zentralpunkt (waffled) jusque huit la fois!

qui indizierte variante verhält sich so comment qui "normale" THREE.Geometry. on gibt alle Punkte seulement einmal à. en supplément ensuite un weiteres Datenfeld qui Indizes. ici volonté pour chaque Dreieck qui Indizes qui jeweils trois Eckpunkte gespeichert.

var geometry = new THREE.BufferGeometry();

	var positions = new Float32Array( 4 * 3 );  // buffer arrray, position of 4 vertices
	var indices = 	new Uint32Array( 2 * 3 );  	// indices for 2 faces
	var colors = 	new Float32Array( 4 * 3 );	// buffer arrray, 4 vertexColors * 3 color channels


// 2 faces with 3 vertices indices 
		
// face 0: vertices indices 0, 1, 2
		indices[0] = 0;  
		indices[1] = 1;
		indices[2] = 2;

// face 1 vertices indices 0, 1, 3
		indices[3] = 0;
		indices[4] = 1;
		indices[5] = 3;

cet variante werde je benutzen. Sonst devrait je une Systematik de Grund sur récente erstellen. chez qui indizierten variante peux je cet dans den Code einmischen et muss seulement qui Zugriffe sur qui Datenfelder et quelques autre Sachen extra behandeln. en supplément frage je ab, si une Geometry ou bien BufferGeometry vorliegt. ca ist une verfügbare interne qualité.

avec cela cela eh bien avec "Buffer" aussi zügig klappt, habe je zur Übung seulement einmal deux Anfängerbeispiele zum comparaison qui Varianten gebastelt: [...]

03.05.2017 ▲