Melukis awan realistik dengan SVG dan CSS

SVG dan CSS Buat kesan awan yang realistik

Dalam mitologi Yunani, Zeus mencipta dongeng Cloud Nefere. Seperti mitos Yunani yang lain, cerita ini agak pelik. Berikut adalah versi pendek dan sesuai:

Menurut legenda, Neferele dicipta oleh Zeus dalam imej isterinya yang cantik. Seorang fana bertemu Nefere dan jatuh cinta kepadanya. Bersama-sama mereka ... Akhirnya, luar biasa bahawa awan ini melahirkan bayi Centaur setengah lelaki dan setengah lelaki.

Sangat pelik, bukan? Saya secara peribadi tidak faham. Nasib baik, proses mewujudkan awan dalam penyemak imbas adalah lebih mudah dan lebih serius.

Baru -baru ini, saya mendapati bahawa pemaju Yuan Chuan telah melaksanakan kesan awan yang realistik yang dihasilkan oleh kod. Bagi saya, kesan yang dilaksanakan dalam penyemak imbas adalah satu mitos.

Semak imbas kod sampel ini dan kami dapat membayangkannya dengan menggunakan<filter></filter> CSS box-shadow unsur-unsur (termasuk dua penapis SVG) boleh mencapai kesan awan tunggal yang meyakinkan.

Kesan realistik yang kita mahu dicapai melalui kombinasi pintar feTurbulence dan feDisplacementMap . Penapis SVG ini kuat, kompleks dan menawarkan ciri-ciri yang sangat menarik (termasuk algoritma pemenang Oscar!). Walau bagaimanapun, kerumitan yang mendasari boleh menakutkan.

Walaupun fizik penapis SVG berada di luar skop artikel ini, terdapat banyak dokumentasi yang tersedia di MDN dan W3.org. Halaman yang sangat membantu mengenai feTurbulence dan feDisplacementMap boleh didapati secara percuma (dan sebagai bab dalam buku yang indah ini).

Dalam artikel ini, kami akan memberi tumpuan kepada pembelajaran cara menggunakan penapis SVG ini untuk mencapai hasil yang luar biasa. Kami tidak perlu melihat lebih mendalam bagaimana algoritma di belakang tabir berfungsi, sama seperti artis tidak perlu memahami struktur molekul pigmen untuk menjadikan landskap yang menakjubkan.

Sebaliknya, mari kita memerhatikan beberapa sifat SVG yang penting untuk menarik awan yang meyakinkan dalam penyemak imbas anda. Dengan menggunakan sifat -sifat ini, kita boleh menggunakan penapis yang kuat ini dengan mudah dan belajar bagaimana untuk menyesuaikannya dengan tepat dalam projek kami.

Mulakan dengan asas -asas

Terdapat lima nilai yang patut memberi perhatian kepada atribut box-shadow CSS:

 <code>box-shadow:<offsetx><offsety><blurradius><spreadradius><color> ;</color></spreadradius></blurradius></offsety></offsetx></code>

Mari kita menghidupkan nilai -nilai ini (mungkin lebih tinggi daripada pemaju yang masuk akal akan digunakan) supaya bayang -bayang itu sendiri menjadi watak di atas pentas.

 <code>#cloud-square { background: turquoise; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; } #cloud-circle { background: coral; border-radius: 50%; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; }</code>

Adakah anda pernah bermain atau melihat drama bayangan?

Sama seperti menukar bentuk dengan tangan anda untuk menukar bayangan, "bentuk sumber" dalam HTML kami boleh dipindahkan dan cacat untuk bergerak dan mengubah bentuk bayang -bayang yang diberikan dalam penyemak imbas. box-shadow menyalin saiz asal dan "mengubah" fungsi pada border-radius . Penapis SVG digunakan untuk elemen dan bayang -bayang mereka pada masa yang sama.

<code><svg height="0" width="0"><filter><feturbulence basefrequency=".01" numoctaves="10" type="fractalNoise"></feturbulence><fedisplacementmap in="SourceGraphic" scale="10"></fedisplacementmap></filter></svg></code>

Ini adalah markup untuk SVG semasa kami. Ia tidak akan diberikan kerana kita tidak menentukan apa -apa visual (belum lagi lebar dan ketinggian sifar). Tujuannya adalah untuk menyimpan penapis, yang kami berikan kepada SourceGraphic kami (iaitu, kami<div> ). Sumber kami<code><div> Bayang -bayangnya diputarbelitkan secara bebas oleh penapis. Kami akan menambah peraturan CSS yang diperlukan, menghubungkan elemen HTML ( <code>#cloud-circle ) ke penapis SVG menggunakan IDnya:

 <code>#cloud-circle { filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }</code>

Lihat!

Ok, akui, tambah penapis SVG agak tidak mencolok.

Jangan risau! Kami hanya menyentuh permukaan dan terdapat banyak perkara yang baik untuk dilihat.

Eksperimen scale feDisplacementMap

Melaksanakan beberapa eksperimen bukan saintifik pada atribut ini boleh menghasilkan kesan dramatik. Buat masa ini, mari kita simpan semua nilai dalam feTurbulence yang tidak berubah, hanya menyesuaikan sifat scale DisplacementMap .

Apabila nilai scale meningkat (dalam 30 kenaikan), sumber kami<div> Distorsi berlaku dan bayang -bayang dilemparkan untuk mencerminkan bentuk awan rawak di langit.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;180&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Ok, kami telah membuat kemajuan! Mari kita ubah warna sedikit untuk mewujudkan kesan awan yang lebih meyakinkan dan meningkatkannya.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;body { background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%); } #cloud-circle { width: 180px; height: 180px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Sekarang kita lebih dekat dengan kesan awan yang realistik!</p> <h3> Ubah suai nilai <code>blur box-shadow

Siri imej berikut menunjukkan kesan nilai blur pada box-shadow . Di sini, nilai blur meningkat dalam kenaikan 10 piksel.

Untuk memberikan awan kita beberapa kesan seperti kumulus, kita dapat meluaskan sumber kita sedikit<div> .<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 60px 0px #fff; }&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> dll! Kami melebarkan elemen sumber, dan kini ia menghalang bayangan putih yang kami panggil awan. Mari kita "menyusun semula" bayang-bayang ke jarak yang lebih jauh supaya awan kita tidak dikaburkan oleh imej sumber. (Bayangkan mengeluarkan tangan anda dari dinding supaya anda tidak akan menyekat pandangan drama bayangan.)</p> <p> Ini dapat dicapai dengan mudah dengan beberapa kedudukan CSS.<code><div> Ia adalah elemen induk awan dan diposisikan secara statik secara lalai. Mari gunakan beberapa kedudukan mutlak untuk memindahkan sumber kita<code><div> "Tarik" dan keluarkan aliran dokumen. Pada mulanya, ini juga akan meletakkan semula bayang -bayang kita, jadi kita juga perlu meningkatkan jarak antara bayang -bayang dan sedikit menyesuaikan kedudukan elemen.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 400px 400px 60px 0px #fff; /* 增加阴影偏移量*/ position: absolute; /* 将父元素移出文档流*/ top: -320px; /* 向下移动*/ left: -320px; /* 向右移动*/ }&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Ya! Kami sudah mendapat awan yang cukup meyakinkan.</p> <p> Imej -imej yang diberikan ke dalam penyemak imbas menggambarkan awan dengan baik - tetapi, saya tidak pasti ... bolehkah awan ini benar -benar mencerminkan awan dongeng Neferre? Saya percaya kita boleh melakukan yang lebih baik!</p> <h3 id="Kedalaman-ekspres-menggunakan-lapisan"> Kedalaman ekspres menggunakan lapisan</h3> <p> Inilah yang kita mahukan:</p> <p> Berdasarkan kedalaman, tekstur dan kekayaan awan dalam foto ini, satu perkara yang jelas: Zeus menghadiri sekolah seni. Sekurang -kurangnya, dia mesti membaca prinsip -prinsip reka bentuk sejagat, yang mendedahkan konsep yang kuat dan seolah -olah biasa:</p> <blockquote><p> [...] Penyimpangan pencahayaan memainkan peranan penting dalam tafsiran kedalaman dan rasa alam semula jadi dan boleh dikendalikan dengan pelbagai cara oleh pereka ... menggunakan perbezaan antara kawasan cahaya dan gelap untuk mengubah rupa kedalaman.</p></blockquote> <p> Petikan ini memberikan kita petunjuk tentang bagaimana kita dapat memperbaiki kod awan yang kita hasilkan. Kita boleh menjadikan awan yang sangat serupa dengan imej rujukan dengan menyusun lapisan pelbagai bentuk, saiz, dan warna bersama -sama. Ini hanya memerlukan memanggil penapis kami beberapa kali seperti yang diperlukan. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;&lt;svg height=&quot;0&quot; width=&quot;0&quot;&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;4&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;170&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;150&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;100&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;/svg&gt;&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Memohon lapisan kami akan memberi kita peluang untuk meneroka <code>feTurbulence dan mencapai fleksibiliti. Kami akan memilih jenis yang lebih lancar yang tersedia: fractalNoise dan putar numOctaves sehingga 6.

<code><feturbulence basefrequency="n" numoctaves="6" type="fractalNoise"></feturbulence></code>

Apa maksudnya? Sekarang, mari fokus pada harta baseFrequency . Inilah hasil yang kita dapat apabila kita meningkatkan nilai n:

Kata -kata seperti pergolakan , bunyi bising , kekerapan , dan oktaf boleh kelihatan aneh atau bahkan mengelirukan. Tetapi jangan risau! Membandingkan kesan penapis ini ke gelombang bunyi sebenarnya benar -benar tepat. Kita boleh mengaitkan frekuensi rendah ( baseFrequency=0.001 ) dengan bunyi yang rendah dan frekuensi tinggi ( baseFrequency=0.1 ) dengan nada yang lebih tinggi dan lebih jelas.

Kita dapat melihat bahawa untuk kesan seperti kumulus, nilai baseFrequency boleh terletak pada julat ~ 0.005 dan ~ 0.01.

Tambahkan butiran menggunakan numOctaves

Meningkatkan numOctaves membolehkan kami memberikan imej dengan butiran yang sangat halus. Ini memerlukan banyak pengiraan, jadi sedar bahawa nilai -nilai yang tinggi dapat mempengaruhi prestasi dengan serius. Cuba untuk mengelakkan meningkatkan nilai ini melainkan penyemak imbas anda memakai topi topi keledar dan lutut.

Berita baiknya ialah kita tidak perlu menyesuaikan nilai ini terlalu tinggi untuk menghasilkan perincian dan kehalusan. Seperti yang ditunjukkan dalam imej di atas, kita boleh menetapkan nilai numOctaves kepada 4 atau 5.

Hasilnya adalah seperti berikut

Gunakan atribut seed untuk mencapai perubahan yang tidak terhingga

Terdapat banyak perkara yang boleh dikatakan mengenai atribut seed kerana ia memberi petunjuk kepada sihir yang berlaku di belakang tabir. Walau bagaimanapun, untuk tujuan kita, utiliti seed boleh diringkaskan dalam empat perkataan: "nilai yang berbeza, bentuk yang berbeza".

Fungsi bunyi Perlin (disebutkan sebelumnya) menggunakan nilai ini sebagai titik permulaan untuk penjana nombor rawaknya. Memilih untuk tidak memasukkan harta ini akan menjadi seed lalai kepada sifar. Walau bagaimanapun, jika harta ini dimasukkan, tidak kira apa nilai yang kita berikan kepada seed , kita tidak perlu bimbang tentang isu -isu prestasi.

GIF di atas mewakili beberapa ciri yang disediakan oleh seed . Ingat bahawa setiap awan adalah awan komposit berlapis. (Walaupun saya telah menyesuaikan sifat setiap lapisan, saya menyimpan nilai seed masing -masing.)

Di sini, dengan teliti melihat imej rujukan, saya sudah meletakkan 3 awan<div> (Kelegapan yang berbeza) Superimpose di pangkalan<code><div> Superior. Dengan percubaan dan kesilapan dan memasukkan nilai <code>seed sewenang -wenang, saya berakhir dengan bentuk yang serupa dengan bentuk awan dalam foto.

Liar dan imajinatif

Sudah tentu, fikir kita melukis penyemak imbas<div> Neferele yang akan lebih baik daripada Zeus akan menjadi sombong. Walau bagaimanapun, semakin banyak misteri yang dapat kita penggali dari penapis CSS dan SVG, semakin kita dapat mencipta sesuatu yang menakjubkan dan sangat mirip dengan penciptaan asal Thor. Kemudian, kita boleh terus menjalankan eksperimen selanjutnya!<p> Mist yang dicerminkan</p> <p> Awan Cirrus bertingkat tinggi</p> <p> Dalam artikel ini, kita hanya berlabuh di laut kuasa dan kerumitan. Penapis SVG biasanya kelihatan hebat dan tidak dapat diakses.</p> <p> Walau bagaimanapun, seperti contoh -contoh dalam Projek Div ​​tunggal atau kemahiran lukisan Diana Smith, kaedah eksperimen yang santai dan menyenangkan selalu membawa hasil yang luar biasa!</p> <h4 id="Pencapaian-membuka-kunci-Generator-Cloud-Neferre"> Pencapaian membuka kunci! Generator Cloud Neferre</h4> <p> Saya percaya ramai di antara anda dengan senang hati akan menggali jauh ke dalam semua butiran teknikal yang diperlukan untuk membuat awan, tetapi mungkin lebih suka cara yang lebih mudah untuk menggunakan awan dalam projek anda. Saya membangunkan alat untuk membantu menjana awan dan bereksperimen dengan bentuk dan perubahan.</p> <p> Menjana awan!</p> <p> Ada pertanyaan, cadangan atau komen? Sila hubungi saya di Twitter atau tinggalkan komen dalam siaran ini.</p> <p> <small>Terima kasih banyak kepada Amelia Bellamy-Royds atas cadangan berharga anda mengenai artikel ini.</small></p> </div>