Unity CustomShader(カスタムシェーダー)による炎の球体の作り方
アプリボットのシニアエフェクトアーティストの邑上(ムラカミ)です。
普段は新規プロジェクトにてエフェクト制作をしつつ、デジタルハリウッドやCGworldにて、ゲームエフェクトの講義も行っています。今回は、普段、アプリボットの３Dゲーム開発で使用するUnityのエフェクト用のShaderについて説明したいと思います。
Hi my name is Murakami and I’m a Senior Effect Artist at Applibot.
While I usually make effects for new projects, I also give lectures on game effects at Digital Hollywood and CGworld.
Today, I would like to explain about Unity’s Shaders for effects which is usually used for 3D game development at Applibot.
目次 Contents ■Shaderについて About Shaders ・Shaderとは Shaders ・エフェクト用Shader Shaders for used for effects ■炎の球体の制作工程 Flaming sphere production process ポリゴンモデルを使ったエフェクトShaderを使った炎の表現手法 Simulate flames using a polygon model and effect shaders 球体のモデルに炎のテクスチャをUVスクロールさせる UV scroll a flame texture on a sphere model 炎のメインテクスチャに対してマスクテクスチャで削る Adjust the flame main texture with a mask texture ディストーション(歪みを加える) Distortion フレネル、リムを使ってポリゴンの外側をぼかす Use Fresnel/Rim to blur the outside of the polygon ポリゴンモデルとパーティクルシステムを組み合わせる Combine a polygon model and particle system ■まとめ Summary ■3Dゲームエフェクトにご興味がある方 Those who are interested in 3D game effects
Shaderとは、エフェクト用のテクスチャに様々な効果を追加する機能です。UnityではデフォルトのShaderもありますが、カスタマイズすると色々な表現ができます。
Shaders enable you to add various effects to the texture for effects. Unity has built-in Shaders, but you can customize them to create various expressions.
*Reference from Unity Shader Graph
■エフェクト用Shaderの制作
Creating Shaders for effects
UnityではShaderGraphというノードベースでShaderを作っていける手法もあります。プログラミングを使わないので、デザイナーでも作成が可能です。
In Unity, there is also a method to create shaders based on a node called Shader Graph and since programming isn’t required, shaders can be created by designers.
■ポリゴンモデルを使ったエフェクト
Shaderを使った炎の表現手法
Simulate flames using a polygon model and effect shaders.
弊社では、エフェクト専用のCustomShader(カスタムシェーダー)を作成しています。その機能を使って炎の球体を作成する事例を紹介します。
At Applibot, we create Custom Shaders specialized for effects.
Let me introduce an example of creating a flaming sphere using this specialized feature.
◎球体のモデルに炎のテクスチャをUVスクロールさせる
UV scroll a flame texture on a sphere model
200ポリゴン程の球体と炎用のテクスチャを用意
ポリゴン数が多いとCPUに負荷をかけ、処理落ちの原因にるので、なるべく減らします。テクスチャは上下左右つながるようにシームレスな画像にします。
Prepare a sphere of about 200 polygons and a texture for flames.
A high polygon count will put a load on the CPU and cause the processing to slow down, so reduce the polygon count as much as possible. Create a seamless image to make the texture connect vertically and horizontally.
テクスチャをUVスクロールさせ、回転させます。加算合成でブレンドすることによって、黒が抜け炎が重なる部分が明るくなります。
UV scroll the texture and rotate it. By blending with additive synthesis, the black color gets extracted and the area where flames overlap becomes brighter.
◎炎のメインテクスチャに対してマスクテクスチャで削る
Adjust the flame main texture with a mask texture
左側の炎のメインテクスチャを右側のマスクテクスチャで削ることができます。
白い部分が削れ、値の強弱を調整できます。炎がちぎれて消えていくイメージに近づけます。
The flame main texture on the left can be adjusted with the mask texture on the right.
The white areas will be removed, and the strength can be adjusted. This will make it look as if the flame is breaking off and disappearing.
マスクテクスチャは炎のテクスチャとは別の方向にスクロールをさせることで、
より自然な動きに近づきます。
Scrolling the mask texture in a different direction from the flame texture, makes the movement look more natural.
◎ディストーション(歪みを加える)
Distortion
左側の炎のメインテクスチャを中央のマスクテクスチャで削りつつ、右側のディストーションテクスチャで歪ませます。白い部分が歪みを加えます。歪むことによって炎の揺らめきをイメージさせます。
The flame main texture on the left is adjusted with the mask texture in the center and distorted with the distortion texture on the right. The white areas adds distortion, creating the image of flickering flames.
メイン、マスクテクスチャとは、さらに別の方向にディストーションテクスチャをUVスクロールさせることによって、自然な動きを出していきます。
UV scrolling the distortion texture from the main texture and mask texture in a different direction creates a natural movement.
◎フレネル、リムを使ってポリゴンの外側をぼかす
Use Fresnel/Rim to blur the outside of the polygon.
球体(ポリゴン)の外側の不透明度を落とすことによって、カクカクとしたポリゴン感を軽減してくれます。ポリゴン数の制限がある中でも、自然な形にみせることができるようになります。
By reducing the opacity on the outside of the sphere (polygon), it reduces the clunky polygon look. Even with a limit to the polygon count, you will be able to make it look more natural.
◎ポリゴンモデルとパーティクルシステムを組み合わせる
Combining a polygon model and particle system
フレネルによって削った球体の外側に、炎のパーティクルをちらして、切れ目のイメージを減らして、より自然にみせていきます。パーティクルシステムは小さな炎や火の粉を飛ばすことが出来る機能です。パーティクルシステムについては、また、別のレポートにて説明します。
Flame particles are scattered on the outside of the sphere grazed by Fresnel to reduce the cut image and to make it look more natural. The Particle System is a feature that can spread small flames and sparks. Particle System will be covered in another report.
フィールドにポイントライトを置いて空間を演出したり、カメラに直接設定するポストエフェクトのBloomで光を膨張させると美しさがより際立ちます。
ポイントライト、ポストエフェクトについても、別のレポートで説明します。
Place point lights in the field to create space or expand the light with the post-processing effect called Bloom set directly on camera to enhance the appearance. Point lights and post-processing effects will be covered in another report.
歪みのマスクテクスチャを変えることによって、より多くの表現が可能になります。バリアやオーラの表現にも使うことができます。
By changing the distortion mask texture, more expressions are made possible and can also be used to create barriers and auras.
■まとめ
Summary
Shaderをカスタマイズして、UVスクロール、ディストーション、マスク、フレネルなどの機能を重ねて使うことができます。
機能だけにとらわれず、どのようなテクスチャが表現に合うのか、使い方が適しているのかを追求していくと、より豊かな表現ができるようになります。
You can customize shaders and layer features such as UV scrolling, distortion, masks, Fresnel and more.
The more you explore which textures best suits the expression you are aiming for and how to appropriately use them, the richer your variation of expression will be.
まず、創りたいものが最初にあり、その表現をするのに、どの機能をどのように使えれば良いのか、模索して研究しています。
In order to create something, we explore and research which feature is ideal and how to specifically use it to create the best suited expression.
新しい技術、表現を一緒に追求してくれる方は、
↓をクリック！良い出会いをお待ちしてます！
For those who wish to pursue new technologies and expressions together,
Click below! We look forward to meeting you!
Applibot,3Dクリエイター積極採用中！
https://www.applibot.co.jp/recruit/3dadopt/
■3Dゲームエフェクトにご興味がある方
3Dゲームエフェクトの普及活動を行っています。少しでも多くのクリエイターの方にエフェクトの素晴らしさをお伝えしたいと思っています。エフェクトにご興味ありましたら、下記、リンクも覗いてみてくださいね。
◎Twitter(エフェクトR&Dの情報発信)
https://twitter.com/Ugokashiya
◎CGworld:3Dゲームエフェクト講座+ONEONLINE
https://cgworld.jp/news/event/2009-plusone-murakami.html
◎デジタルハリウッドSTUDIO吉祥寺『CGGYM ゲームエフェクトパック』
https://school.dhw.co.jp/school/kichijoji/event/cggym_gameeffect.html
◎Lineオープンチャット(3Dゲームエフェクト):
https://line.me/ti/g2/o24Q_BhRr-EoX_k5EHnMjw
◎Vimeo(授業用エフェクト作品)
https://vimeo.com/user30790369
この記事へのコメントはありません。