Làm cách nào để vẽ hình cầu 3D?

Question

Tôi muốn vẽ một quả cầu 3D hoặc hình cầu trong canvas HTML 5.0. Tôi muốn hiểu thuật toán về cách vẽ hình cầu 3D. Ai có thể chia sẻ điều này với tôi?

Answer 1

Vâng, hình ảnh quả cầu sẽ luôn có hình tròn trên màn hình của bạn, vì vậy điều duy nhất quan trọng là tô bóng. Điều này sẽ được xác định bởi nơi bạn đặt nguồn sáng của bạn.

Đối với các thuật toán, ray tracing là đơn giản nhất, mà còn là chậm nhất đến nay — vì vậy bạn có lẽ sẽ không muốn sử dụng nó để làm bất cứ điều gì rất phức tạp trong một <CANVAS> (đặc biệt là do thiếu khả năng tăng tốc đồ họa có sẵn trong môi trường đó), nhưng nó có thể đủ nhanh nếu bạn chỉ muốn làm một quả cầu duy nhất.

Answer 2

Bạn sẽ cần phải tạo mô hình một hình cầu và có màu sắc khác nhau sao cho nó quay bạn có thể thấy rằng nó không chỉ là hình cầu, mà còn được hiển thị.

Nếu không, một hình cầu trong không gian, không có điểm tham chiếu xung quanh nó trông giống như hình tròn, nếu nó là một màu đồng nhất.

Để bắt đầu, bạn sẽ muốn thử vẽ một vòng tròn có hình chữ nhật, vì đó là nguyên thủy chính mà bạn có.

Sau khi bạn hiểu cách thực hiện điều đó hoặc tạo một nguyên thủy mới, chẳng hạn như hình tam giác, sử dụng phương pháp Đường dẫn và tạo vòng kết nối, khi đó bạn đã sẵn sàng chuyển sang chế độ 3D.

3D chỉ là một thủ thuật, vì bạn sẽ lấy mẫu của mình, có thể được tạo bởi một phương trình và sau đó làm phẳng nó, khi bạn xác định phần nào sẽ được nhìn thấy, và sau đó hiển thị nó.

Nhưng, bạn sẽ muốn thay đổi màu của hình tam giác dựa trên độ xa của nguồn sáng, cũng như dựa trên góc của phần đó với nguồn sáng.

Đây là nơi bạn có thể bắt đầu thực hiện tối ưu hóa, vì, nếu bạn thực hiện pixel này theo pixel thì bạn đang sử dụng tính năng raytracing. Nếu bạn có khối lớn hơn, và nguồn điểm của ánh sáng, và đối tượng đang quay nhưng không di chuyển xung quanh thì bạn có thể tính toán lại cách thay đổi màu sắc cho mỗi tam giác, sau đó nó chỉ là vấn đề thay đổi màu sắc để mô phỏng xoay.

Thuật toán sẽ tùy thuộc vào đơn giản hóa bạn muốn thực hiện, để bạn có được trải nghiệm quay lại và hỏi, hiển thị những gì bạn đã làm cho đến thời điểm này.

Dưới đây là ví dụ về thực hiện việc đó và bên dưới tôi đã sao chép phần hình cầu 3D, nhưng hãy xem toàn bộ 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

Cập nhật: Mã này khá cũ và hạn chế. Có thư viện để thực hiện các lĩnh vực 3D bây giờ: http://techslides.com/d3-globe-with-canvas-webgl-and-three-js/

---

Hơn mười năm trước, tôi đã viết một applet Java để render một hình cầu kết cấu bằng cách thực sự làm toán để tìm ra nơi bề mặt của quả cầu là trong cảnh (không sử dụng hình tam giác).

Tôi đã viết lại nó trong JavaScript cho vải và tôi đã có một demo rendering the earth as a sphere:

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

tôi nhận được khoảng 22 fps trên máy tính của tôi. Đó là về nhanh như phiên bản Java nó được dựa trên ám tại, nếu không nhanh hơn một chút!

Bây giờ đã lâu rồi kể từ khi tôi viết mã Java - và nó khá là ngớ ngẩn - vì vậy tôi không thực sự nhớ chính xác nó hoạt động như thế nào, tôi vừa chuyển nó sang JavaScript. Tuy nhiên điều này là từ một phiên bản chậm của mã và tôi không chắc liệu phiên bản nhanh hơn có phải là do tối ưu hóa trong các phương thức Java mà tôi đã sử dụng để thao tác pixel hoặc từ các phép tăng tốc trong toán hay không. kết cấu. Tôi cũng tương ứng vào thời điểm đó với một người có applet tương tự nhanh hơn tôi nhiều lần nhưng tôi không biết liệu có bất kỳ cải thiện tốc độ nào mà họ có thể có trong JavaScript vì nó có thể dựa vào các thư viện Java hay không. (Tôi chưa bao giờ thấy mã của họ nên tôi không biết họ đã làm như thế nào.)

Vì vậy, có thể có thể cải thiện về tốc độ. Nhưng điều này hoạt động tốt như một bằng chứng về khái niệm.

Nếu bạn quan tâm đến việc so sánh tốc độ, các phiên bản Java đang ở đây:

Đây là những liên kết chết cho đến khi tôi tới cập nhật trang web của tôi

• Mine - Instant start, slower to render
• Mine - very slow to start, Much faster render - Phiên bản này cũng có ánh sáng. Kéo chuột vào nó xoay trục.
• Someone else's - khởi động nhanh hơn, nhanh hơn nhiều để hiển thị.

tôi sẽ có một đi vào chuyển đổi phiên bản nhanh hơn của tôi một chút thời gian để xem nếu tôi có thể nhận được bất kỳ sự cải thiện tốc độ vào phiên bản JavaScript.

Answer 4

u có thể thử với thư viện ba.js, nó tóm tắt rất nhiều mã từ lập trình webgl lõi. Bao gồm thư viện ba.js trong html của bạn từ three.js lib.

u có thể sử dụng vải renderer cho trình duyệt safari, webgl làm việc cho chrome

hãy tìm JS FIDDLE FOR SPHERE

var camera, cảnh, vật chất, lưới, hình học, 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();