Как нарисовать 3D-сферу?

Question

Я хочу нарисовать 3D-шар или сферу в холсте HTML 5.0. Я хочу понять Алгоритм о том, как рисовать 3D-сферу. Кто может поделиться этим со мной?

Answer 1

Ну, образ сферы всегда будет иметь круглую форму на вашем экране, поэтому единственное, что имеет значение, это затенение. Это будет определяться тем, где вы размещаете источник света.

Что касается алгоритмов, ray tracing является самым простым, но и самым медленным далеко —, так что вы, вероятно, не хотели бы использовать его, чтобы сделать что-нибудь очень сложное в <CANVAS> (особенно учитывая отсутствие ускорения графики, доступному в этой среде), но это может быть достаточно быстро, если вы просто хотите сделать одну сферу.

Answer 2

Вам понадобится смоделировать сферу и иметь ее различные цвета, чтобы при ее повороте вы могли видеть, что это не только сфера, но и визуализация.

В противном случае сфера в пространстве, а не точка отсчета вокруг нее, выглядит как круг, если это сплошной цвет.

Для начала вам нужно попробовать рисовать круг с прямоугольниками, так как это основной примитив, который у вас есть.

Как только вы поймете, как это сделать, или создайте новый примитив, такой как треугольник, используя метод Path и создайте круг, тогда вы готовы переместить его в 3D.

3D - это всего лишь трюк, так как вы возьмете свою модель, вероятно, сгенерированную уравнением, а затем сгладите ее, когда вы определите, какие части будут видны, а затем отобразите ее.

Но вы хотите изменить цвет треугольников, исходя из того, насколько они далеко от источника света, а также от угла этой части к источнику света.

Здесь вы можете начать делать оптимизацию, так как, если вы делаете этот пиксель за пикселем, тогда вы тратите лучи. Если у вас большие блоки и точечный источник света, и объект вращается, но не перемещается, вы можете пересчитать, как изменяется цвет для каждого треугольника, тогда это просто вопрос изменения цветов для имитации вращения.

Алгоритм будет зависеть от того, какие упрощения вы хотите сделать, так как вы получаете опыт, возвращайтесь и спрашиваете, показывая, что вы сделали до сих пор.

Вот пример этого, и ниже я скопировал часть 3D-сферы, но, пожалуйста, посмотрите на весь 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

Update: Этот код довольно старый и ограниченным. Есть библиотеки для выполнения 3D-сферы в настоящее время: http://techslides.com/d3-globe-with-canvas-webgl-and-three-js/

---

Более десяти лет назад я написал апплет Java, чтобы сделать текстурированную сферу, на самом деле делать математику, чтобы работать там, где поверхность сферы была на сцене (не используя треугольники).

Я переписать его в JavaScript для холста, и я получил demo rendering the earth as a sphere:

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

я получаю около 22 кадров в секунду на моей машине. Это примерно так же быстро, как и версия Java, на которой он был основан, если не быстрее!

Теперь уже давно я написал код Java - и это было довольно тупо, поэтому я не помню точно, как это работает, я просто портировал его JavaScript. Однако это из медленной версии кода, и я не уверен, что более быстрая версия была вызвана оптимизацией в методах Java, которые я использовал для управления пикселями или ускорениями в математике, которую она выполняет, для определения того, какой пиксель отображать из текстуры. В то время я тоже был совместим с тем, у кого был похожий апплет, который был намного быстрее, чем у меня, но опять же я не знаю, было бы возможно, если бы какие-либо улучшения скорости, которые у них были, были бы возможны в JavaScript, поскольку он, возможно, полагался на библиотеки Java. (Я никогда не видел их кода, поэтому я не знаю, как они это сделали.)

Таким образом, его можно улучшить с помощью может. Но это хорошо работает как доказательство концепции.

Если вы хотите сравнить скорость, версии Java здесь:

Это мертвые ссылки, пока я рядом не обновляют мой сайт

• Mine - Instant start, slower to render
• Mine - very slow to start, Much faster render - В этой версии также есть освещение. Перетащите мышь на нее, повернув ось.
• Someone else's - быстрее начать, гораздо быстрее визуализировать.

мне придется идти на преобразование мой более быстрая версия некоторое время, чтобы увидеть, если я могу получить какие-либо улучшения скорости в версию JavaScript.

Answer 4

u можете попробовать с помощью библиотеки three.js, которая абстрагирует много кода от основного программирования webgl. Включите в свою html библиотеку three.js от three.js lib.

и можно использовать холст визуализатор для сафари браузер, WebGL работает хром

пожалуйста найти JS FIDDLE FOR SPHERE

вар камеры, сцены, материалы, сетки, геометрия, визуализатор

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();