Tuval, proje yönetiminin ekranda her türden grafiği çizmeyi ve WebGL dünyasına bir giriş noktası oluşturmayı başardı. Şekil ve resim çizmek, animasyonları çalıştırmak ve hatta video içeriğini görüntüleyip işlemek için kullanılabilir. Genellikle medya açısından zengin web uygulamalarında güzel kullanıcı deneyimleri oluşturmak ve çevrimiçi oyunlardır.
Komut dosyası yazılabilir, yani tuvale çizilen içerik programlı olarak oluşturulabilir. kullanabilirsiniz. Bu, tuvale büyük esneklik sağlar.
Aynı zamanda, modern web sitelerinde komut dosyası çalıştırma, kullanıcı yanıt verme kaynakları ile ilgili sorunlar hakkında daha fazla bilgi edinin. Tuval mantığı ve oluşturma işlemi, kullanıcı etkileşimiyle aynı iş parçacığında gerçekleştiğinden animasyonlarda kullanılan (bazen ağır) hesaplamalar, uygulamanın gerçek ve algılanan performansla ilgilidir.
Neyse ki OffscreenCanvas bir yanıttır.
Daha önce tuval çizimi özellikleri <canvas> öğesine bağlıydı.
Yani bu durum doğrudan DOM'ye bağlıydı. OffscreenCanvas, adından da anlaşılacağı gibi,
DOM ve Canvas API'sini ekran dışına taşıyarak ayırır.
Bu ayırma sayesinde, OffscreenCanvas'ın oluşturulması DOM'den tamamen bağımsızdır ve Bu nedenle, senkronizasyon olmadığından normal tuvale göre bazı hız iyileştirmeleri sunar önemlidir.
Dahası, her ne kadar herhangi bir DOM kullanılabilir. Bu da her türlü ilginç kullanım alanına imkan sağlıyor.
Bir çalışanda OffscreenCanvas kullanma
Çalışanlar iş parçacıklarının web'deki sürümüdür. Görevleri arka planda çalıştırmanıza olanak tanır.
Komut dosyanızın bir kısmını bir çalışana taşımak, uygulamanızın kullanıcı açısından kritik performans gösterme olasılığını artırır daha fazla görev üstlenmeniz gerekir. OffscreenCanvas olmadan, Canvas API'yi bir çalışanda kullanmak mümkün değildi, DOM yoktu.
OffscreenCanvas, DOM'ye bağlı olmadığından kullanılabilir. Aşağıdaki örnekte OffscreenCanvas kullanılmaktadır renk geçişini hesaplamak için aşağıdaki adımları uygulayın:
// file: worker.js
function getGradientColor(percent) {
const canvas = new OffscreenCanvas(100, 1);
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, ctx.canvas.width, 1);
const imgd = ctx.getImageData(0, 0, ctx.canvas.width, 1);
const colors = imgd.data.slice(percent * 4, percent * 4 + 4);
return `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`;
}
getGradientColor(40); // rgba(152, 0, 104, 255 )
Ana iş parçacığının engellemesini kaldır
Ağır hesaplamaları bir çalışana taşımak, kullanabileceğiniz en iyi uygulamalardan bahsedeceğiz. transferControlToOffscreen kullanın yöntemini kullanabilirsiniz. Uygulanan işlemler OffscreenCanvas, kaynak tuvalde otomatik olarak oluşturulur.
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({canvas: offscreen}, [offscreen]);
Aşağıdaki örnekte, ağırlıklı hesaplama, renk teması değiştiğinde gerçekleşir. hızlı bir masaüstünde bile birkaç milisaniye sürer. Animasyonları ana iş parçacığında çalıştırmayı seçebilirsiniz bir soru işaretidir. Ana iş parçacığı durumunda, yoğun görev çalışıyorsa ileti dizisi engellenir. Çalışanın, eğitime katkısı olan Kullanıcı arayüzünün duyarlılığı.
Tersi de çalışır: Meşgul ana iş parçacığı, ele alacağız. Görsel olumsuzlukları önlemek ve animasyonun akıcı olmasını sağlamak için bu özelliği kullanabilirsiniz. ana iş parçacığı trafiğine rağmen, aşağıdaki demoda gösterildiği gibi.
Normal bir tuvalde, ana iş parçacığı yapay olarak aşırı çalıştığında animasyon durur. ancak çalışan tabanlı OffscreenCanvas sorunsuz oynamaktadır.
Popüler kitaplıklarda kullanın
OffscreenCanvas API genellikle normal Canvas Öğesi ile uyumlu olduğundan, istediğiniz piyasadaki önde gelen grafik kitaplıklarının bazılarında da kullanılan progresif bir geliştirme olarak kullanılmaktadır.
Örneğin, özelliği algılayabilir ve varsa oluşturucu oluşturucudaki tuval seçeneğini tıklayın:
const canvasEl = document.querySelector('canvas');
const canvas =
'OffscreenCanvas' in window
? canvasEl.transferControlToOffscreen()
: canvasEl;
canvas.style = {width: 0, height: 0};
const renderer = new THREE.WebGLRenderer({canvas: canvas});
Buradaki bilgilerden biri, Three.js'nin tuvalin bir style.width ve style.height özelliğine sahip olmasını beklemesidir.
DOM'den tamamen ayrılmış olan OffscreenCanvas bu özelliğe sahip değildir; dolayısıyla, sayfayı kendiniz sağlamanız gerekir.
ya da verileri saflaştırarak veya bu değerleri orijinal içeriğe bağlayan bir mantık sunarak
tuval boyutlarını dahil edin.
Aşağıda, bir çalışanda temel bir Three.js animasyonunun nasıl çalıştırılacağı gösterilmektedir:
DOM ile ilgili bazı API'lerin bir çalışanda halihazırda kullanılamadığını unutmayın. Bu nedenle, dokular gibi daha gelişmiş Three.js özelliklerini kullanmak istiyorsanız daha fazla geçici çözüm gerekebilir. Bunlarla denemeler yapmaya nasıl başlayacağınızla ilgili bazı fikirler için Google I/O 2017'den bir video.
Tuvalin grafik özelliklerini yoğun bir şekilde kullanıyorsanız, OffscreenCanvas nasıl etkilediğini öğrenin. Çalışanların tuval oluşturma bağlamlarını kullanılabilir hale getirmesi web uygulamalarında paralellik sağlar ve çok çekirdekli sistemleri daha iyi kullanır.