| |
| |
|
| - Seite 1 - |
|
HofK | Auf einen heißen  Tipp von IF hin, habe ich mir mal
three.js [...]  angeschaut. Da [...] (ganz unten) die ersten Resultate. |
|
| |
| |
| |
|
|
| |
| |
| - Seite 46 - |
|
HofK | 
Ein Jahr ist wieder vorüber und die gesammelten Beispiele von Discourse stehen seit einigen Tagen zum Download bereit. [...] |
|
| |
| |
| |
|
|
HofK | Bei der Arbeit am Netz hatte ich ein Problem mit der Transparenz. Je nach Kameraposition verschwanden die transparenten Flügel der Biene in der transparenten Blase.
Transparenz gemischt ist ein oftmals schwieriges Problem. In meinem Fall gab es eine einfache Lösung - einfach, wenn man es dann kennt.
Discourse: [...]
Seite in der Sammlung mit Lösung: [...]
 |
|
| |
| |
| |
|
|
HofK | Eine neue spezielle Geometrie:
Dynamisches Mondphasen Panel
Siehe unter Github [...]
<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/12 -->
<head>
<title> MoonPhases </title>
<meta charset="utf-8" />
<style>
body{
overflow: hidden;
margin: 0;
}
</style>
</head>
<body></body>
<script type="module">
// @author hofk
import * as THREE from "../jsm/three.module.149.js";
import { OrbitControls } from "../jsm/OrbitControls.149.js";
const scene = new THREE.Scene( );
const camera = new THREE.PerspectiveCamera( 55, innerWidth / innerHeight, 0.01, 1000 );
camera.position.set( 0, 1, 4 );
const renderer = new THREE.WebGLRenderer( );
renderer.setSize( innerWidth, innerHeight );
renderer.setClearColor( 0xdedede );
document.body.appendChild(renderer.domElement);
const pointLight1 = new THREE.PointLight( 0xffff00, 1.1 );
pointLight1.position.set( 1, 2, 7 );
scene.add( pointLight1 );
const pointLight2 = new THREE.PointLight( 0xffff00, 1.1 );
pointLight2.position.set( -1, -2, -7 );
scene.add( pointLight2 );
new OrbitControls( camera, renderer.domElement );
const material = new THREE.MeshPhongMaterial( { color: 0xfbfb23, wireframe: true, side: THREE.DoubleSide } );
const moonGeo = MoonPhases( 1, 0.2, 32, 0 );
const moon = new THREE.Mesh( moonGeo, material );
scene.add( moon );
let t = 0;
animate( );
function animate( ) {
t += 0.01;
requestAnimationFrame( animate );
moonGeo.calculatePositions( t );// phase dynamic
renderer.render( scene, camera );
}
function MoonPhases( radius, depth, heightSegments, phase ) {
const g = new THREE.BufferGeometry( );
const pi = Math.PI;
const pi2 = pi * 2;
const hs2 = heightSegments * 2;// equals triangles per side
const phs = phase || 0.1;
let indices = [];
let φ;
let ib;// index back
for ( let i = 0; i < hs2; i += 2 ) {
indices.push( i, i + 2, i + 1, i + 1, i + 2, i + 3 );// front
}
for ( let i = 0; i < hs2; i += 2 ) {
ib = i + hs2 + 2;
indices.push( ib, ib + 1, ib + 2, ib + 1, ib + 3, ib + 2 );// back
}
for ( let i = 0; i < hs2; i += 2 ) {
ib = i + hs2 + 2;
indices.push( i, ib, ib + 2, i, ib + 2, i + 2 );// framing right
indices.push( ib + 1, i + 1, i + 3, ib + 1, i + 3, ib + 3 );// framing left
}
const sidePosCount = ( heightSegments + 1 ) * 2 ;
g.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );
g.setAttribute('position', new THREE.BufferAttribute( new Float32Array( sidePosCount * 2 * 3 ), 3 ) );
g.calculatePositions = function( t ) {
t = t % pi2;
const leftEdge = t => t < pi ? Math.cos( t ) : -1;
const rightEdge = t => t < pi ? 1 : -Math.cos( t );
φ = 0;
for ( let i = 0; i < sidePosCount; i += 2 ) {
// front
g.attributes.position.setXYZ( i , radius * rightEdge( t ) * Math.sin( φ ), -radius * Math.cos( φ ), depth / 2 );
g.attributes.position.setXYZ( i + 1, radius * leftEdge( t ) * Math.sin( φ ), -radius * Math.cos( φ ), depth / 2 );
// back
ib = i + hs2 + 2;
g.attributes.position.setXYZ( ib , radius * rightEdge( t ) * Math.sin( φ ), -radius * Math.cos( φ ), -depth / 2 );
g.attributes.position.setXYZ( ib + 1, radius * leftEdge( t ) * Math.sin( φ ), -radius * Math.cos( φ ), -depth / 2 );
φ += pi / heightSegments;
}
g.attributes.position.needsUpdate = true;
g.computeVertexNormals( );
}
g.calculatePositions( phs * pi2 );
return g;
}
</script>
</html>
|
|
| |
| |
| |
|
|
p.specht
 | (Off Topic Mit welchem Programm werden eigentich diese Hochglanz-Werbefilme erzeugt, wo glänzende Materialien wie Apfelsaft oder Schokolade dynamisch in Behälter strömen? |
|
| |
| XProfan 11Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'... | 15.02.2023 ▲ |
|
| |
|
|
HofK | p.specht (15.02.2023)
(Off Topic Mit welchem Programm ...
Da gibt es eine Reihe sehr professioneller Software. Die Preise sind nichts für privat.
Und Firmen wie z.B. Mynd ( mal googeln) nutzen sicher verschiedene solcher Systeme. |
|
| |
| |
| |
|
|
HofK | Vor einem Jahr habe ich an einer prozedural erzeugten Figur gearbeitet. Siehe weiter oben. Allerdings habe ich das nur als Studie gemacht und nicht komplett ausgearbeitet.
Ich bin jetzt auf eine recht professionelle und frei verfügbare Variante gestoßen. Sie arbeitet ohne Skelett, benutzt aber auch Kugelgelenke.
Siehe Github: [...]
Ich habe sie erfolgreich in mein derzeitiges Projekt integriert.
Die README ist vom Autor sehr umfangreich bebildert und mit Live-Beispielen versehen.
Dieser dynamische Kerl ist sehenswert.
 |
|
| |
| |
| |
|
|
HofK | Ein weiteres paralleles Projekt erfordert Zeit und lässt wenig übrig.
Ein Fehler zeigte, dass bei komplexen Rechnungen die Präzision zum Problem werden kann. Siehe [...]
Es gab eine glänzende Analyse von PavelBoytchev, der in letzter Zeit sehr viele professionelle Lösungen auf Fragen im Forum postet. Immer mit sehr gut dokumentierten Codepens. Da ich mit der Sammlung aus Zeitgründen nicht hinterher komme, habe ich in der Sammlung Links zu [...] und auch zu [...] hinzugefügt.
 |
|
| |
| |
| |
|
|
HofK | Mittlerweile habe ich eine stabile Grundkonstruktion für das Projekt.
Allerdings war es nicht so einfach wie gedacht.
Eine Frage bei discourse brachte mich etwas weiter [...]
Dabei eine schwer verdauliche Quelle, die Pavel Boytchev für mich sinnvoll fand.
Ich habe sie umgangen, siehe discourse ! |
|
| |
| |
| |
|
|
HofK | Wie schnell die Zeit vergeht. 
Seit dem letzten Beitrag ist nun bereits ein halbes Jahr vergangen.
Das parallele Projekt ist eine kommerzielle Sache und daher muß das vorherige open source Projekt pausieren.
Das Projekt wird umfangreicher als zunächst angedacht, denn um die Geometrien sinnvoll erzeugen zu können brauchte es noch einen speziellen web-Editor. Die Sache ist noch in Arbeit.
Nebenbei bin ich gerade mal dazu gekommen zum Jahresende die Sammlung der Beispiele von discourse zu vervollständigen. Da gibt es viele interessante Beispiele.
Insbesondere Pavel Boytchev ( Researcher and educator Faculty of Mathematics and Informatics, Sofia University )
hat sehr viele lehrreiche Beiträge mit Beispielen im Forum verfasst.
Siehe [...]
Auch auf seiner Seite [...] finden sich interessante Beispiele. Auch reines WebGL ohne three.js. |
|
| |
| |
| |
|
| |
| |
| - Seite 47 - |
|
|
HofK | Fertig! - Das letzte Projekt
"Einfach verzweigte Geometrie organisch geformt im Web-Editor "
ist geschafft. 
----------------------------------------------------
Dort veröffentlicht: [...]
Die Anleitung/ Hilfedatei [...]
-----------------------------------------------------------------------------------------------------
Auch der Jahrgang 2024 der Beispielsammlung zu [...] ist abgeschlossen und steht zum Download bereit.
Siehe [...]
oder unmittelbar [...]
Nun geht es mit dem vor knapp zwei Jahren unterbrochenem Netzprojekt weiter. Siehe Beiträge weiter oben. |
|
| |
| |
| |
|
|
HofK | ... aber erst einmal ein kleiner Einschub.
Durch einen Beitrag auf Discourse bin ich erneut auf Signed Distance Field (SDF) aufmerksam geworden. Wollte dann wissen, ob man diese Technik in eine three.js Scene integrieren kann.
Daraus ist etwas mehr geworden, siehe [...]
Auf Github: [...]
---------------------------------------------------------------------------------------------------
Eventuell ist von Interesse, wie Renderer und Raymarching unabhängig von three.js funktionieren. Auf der Basis einer deutschsprachigen Videoreihe [...] habe ich das in reinem Javascript nachprogrammiert und etwas erweitert. [...]
Beim Start etwas Geduld, rendern in der CPU mit Javascript benötigt wesentlich mehr Zeit als normalerweise mit Shadercode für die GPU.
 |
|
| |
| |
| |
|
|
HofK | Aus dem "kleinen Einschub" ist mal wieder etwas mehr geworden. Die SDFs haben mich mehr interessiert als das unfertige Projekt.
Aus den SDFs kann man mit Hilfe eines geeigneten Triangulationsalgorithmus BufferGeometry Objekte für three.js erzeugen. Dazu habe ich den bereits mehrfach benutzten Algorithmus von E. Hartman nochmals entsprechend angepasst.
Die SDFs werden mittels .json Dateien definiert und auf meinen etwas lahmen 7,50€/Monat Mietserver hochgeladen. Dort erfolgt die Berechnung des SDFs und die Triangulation. Die Positionen, Indizes und Normalen werden zurückgegeben und im Browser wird die three.js BufferGeometry und das Mesh erzeugt und angezeigt. Man kann die Geometrie als thre.js Definition oder das Mesh als GLTF-Datei exportieren.
ausprobieren ==>> [...]
Eine Hilfe PDF mit vielen Beispielen ist dabei.
Ein Beispiel
Auf dem Server ist PHP verfügbar, eine sehr merkwürdige Sache, etwas ähnliches wie eine Programmiersprache.
Momentan arbeite ich an einer lokalen Version, die vollständig mit Javascript läuft. Auf meinem Rechner ist diese Version erheblich schneller als die Serverversion.
Auf Discourse mehr: [...] [...]
Weitere Beispiele
 |
 |
| |
| |
| |
|
(61)
Deutsch
English
Français
Español
Italia
