Come disegnare una sfera 3D?

Question

Voglio disegnare una sfera 3D o una sfera nella tela HTML 5.0. Voglio capire l'Algoritmo su come disegnare una sfera 3D. Chi può condividere questo con me?

Answer 1

Bene, l'immagine di una sfera avrà sempre una forma circolare sullo schermo, quindi l'unica cosa che conta è l'ombreggiatura. Questo sarà determinato da dove posizioni la tua fonte luminosa.

Per quanto riguarda gli algoritmi, ray tracing è il più semplice, ma anche il più lento di gran lunga — quindi probabilmente non vorrebbe usarlo per fare qualsiasi cosa molto complicata in un <CANVAS> (soprattutto in considerazione della mancanza di accelerazione grafica disponibili in quell'ambiente), ma potrebbe essere abbastanza veloce se si volesse fare una singola sfera.

Answer 2

È necessario modellare una sfera e farla variare di colori in modo che, ruotando, si possa vedere che non è solo una sfera, ma viene renderizzata.

In caso contrario, una sfera nello spazio, con un punto di riferimento diverso attorno ad esso, sembra un cerchio, se è tutto un colore solido.

Per iniziare vorrai provare a disegnare un cerchio con dei rettangoli, poiché questa è la principale primitiva che hai.

Una volta compreso come farlo, o creare una nuova primitiva, ad esempio un triangolo, utilizzando il metodo Path e creare un cerchio, sei pronto per spostarlo in 3D.

3D è solo un trucco, come si prenderà il modello, probabilmente generato da un'equazione, e quindi appiattirlo, come si determina quali parti saranno visibili e quindi visualizzarlo.

Tuttavia, è necessario modificare il colore dei triangoli in base a quanto sono lontani da una fonte di luce, nonché in base all'angolo di tale parte rispetto alla fonte di luce.

Qui è dove è possibile iniziare a fare ottimizzazioni, come, se si esegue questo pixel per pixel, si è raytracing. Se hai blocchi più grandi e una fonte puntiforme di luce, e l'oggetto ruota ma non si muove, puoi ricalcolare come cambia il colore per ogni triangolo, quindi è solo questione di cambiare i colori per simulare la rotazione.

L'algoritmo dipenderà dalle semplificazioni che si desidera apportare, in modo da ottenere esperienza ritorna e chiedere, mostrando ciò che hai fatto finora.

Ecco un esempio di come farlo, e di seguito ho copiato la parte di sfera 3D, ma per favore guarda l'intero article.

function Sphere3D(radius) { 
this.point = new Array(); 
this.color = "rgb(100,0,255)" 
this.radius = (typeof(radius) == "undefined") ? 20.0 : radius; 
this.radius = (typeof(radius) != "number") ? 20.0 : radius; 
this.numberOfVertexes = 0; 

// Loop from 0 to 360 degrees with a pitch of 10 degrees ... 
    for(alpha = 0; alpha <= 6.28; alpha += 0.17) { 
    p = this.point[this.numberOfVertexes] = new Point3D(); 

    p.x = Math.cos(alpha) * this.radius; 
    p.y = 0; 
    p.z = Math.sin(alpha) * this.radius; 

    this.numberOfVertexes++; 
} 

// Loop from 0 to 90 degrees with a pitch of 10 degrees ... 
// (direction = 1) 

// Loop from 0 to 90 degrees with a pitch of 10 degrees ... 
// (direction = -1) 

for(var direction = 1; direction >= -1; direction -= 2) { 
    for(var beta = 0.17; beta < 1.445; beta += 0.17) { 

    var radius = Math.cos(beta) * this.radius; 
    var fixedY = Math.sin(beta) * this.radius * direction; 

    for(var alpha = 0; alpha < 6.28; alpha += 0.17) { 
     p = this.point[this.numberOfVertexes] = new Point3D(); 

     p.x = Math.cos(alpha) * radius; 
     p.y = fixedY; 
     p.z = Math.sin(alpha) * radius; 

     this.numberOfVertexes++; 
    } 
    } 
} 
} 

Answer 3

Aggiornamento: Questo codice è piuttosto vecchio e limitato. Ci sono biblioteche per fare 3D sfere ora: http://techslides.com/d3-globe-with-canvas-webgl-and-three-js/

---

oltre dieci anni fa ho scritto un applet Java per rendere una sfera strutturato dalla realtà facendo i calcoli per capire dove la superficie della sfera è stato nella scena (non usare i triangoli).

Ho riscritto in JavaScript per tela e ho un demo rendering the earth as a sphere:

alt text http://sam.haslers.info/render-sphere/JavaScript+Canvas.png

I Get Around 22 fps sulla mia macchina. Il che è tanto veloce quanto la versione di Java su cui si basava il rendering, se non un po 'più veloce!

Ora è passato molto tempo da quando ho scritto il codice Java - ed era abbastanza ottuso - quindi non ricordo esattamente come funziona, l'ho appena portato in JavaScript. Tuttavia questo è da una versione lenta del codice e non sono sicuro se la versione più veloce fosse dovuta alle ottimizzazioni nei metodi Java che usavo per manipolare i pixel o dagli speedup in matematica per capire quale pixel rendere dalla struttura. All'epoca ero corrispondente anche a qualcuno che aveva un'applet simile che era molto più veloce della mia, ma ancora una volta non so se alcuni dei miglioramenti di velocità che avevano sarebbero stati possibili in JavaScript, dal momento che avrebbe potuto fare affidamento sulle librerie Java. (Non ho mai visto il loro codice quindi non so come hanno fatto.)

Quindi è possibile migliorare la velocità. Ma questo funziona bene come prova del concetto.

Se siete interessati a confrontare la velocità, le versioni di Java sono qui:

Questi sono collegamenti guasti fino a quando ho prossima aggiornare il mio sito web

• Mine - Instant start, slower to render
• Mine - very slow to start, Much faster render - Questa versione ha anche l'illuminazione. Trascina il mouse su di esso per ruotare l'asse.
• Someone else's - più veloce da avviare, molto più veloce da eseguire.

avrò un andare a convertire la mia versione più veloce po 'di tempo per vedere se riesco a ottenere i miglioramenti di velocità nella versione JavaScript.

Answer 4

Si può provare con la libreria three.js, che astrae molto codice dalla programmazione Webgl principale. Includi la libreria three.js nel tuo html da three.js lib.

u possibile utilizzare tela renderer per il browser Safari, WebGL lavora per Chrome

si prega di trovare il JS FIDDLE FOR SPHERE

var fotocamera, scena, materiale, maglia, geometria, renderer

function drawSphere() { 
    init(); 
    animate(); 

} 

function init() { 
    // camera 

    scene = new THREE.Scene() 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/innerHeight, 1, 1000); 
    camera.position.z = 300; 
    scene.add(camera); 

    // sphere object 
    var radius = 50, 
     segments = 10, 
     rings = 10; 
    geometry = new THREE.SphereGeometry(radius, segments, rings); 
    material = new THREE.MeshNormalMaterial({ 
     color: 0x002288 
    }); 
    mesh = new THREE.Mesh(geometry, material); 

    //scene 
    ; 
    scene.add(mesh); 


    // renderer 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

} 


function animate() { 
    requestAnimationFrame(animate); 
    render(); 

} 

function render() { 

    mesh.rotation.x += .01; 
    mesh.rotation.y += .02; 
    renderer.render(scene, camera); 


} 

// fn callin 
drawSphere();