java
/
jMonkeyEngine-wiki
-ын хуулбар https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]--><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Asciidoctor 1.5.4"><meta name="keywords" content="documentation, effect, light"><title>Bloom and Glow</title><link rel="stylesheet" href="./asciidoctor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./coderay-asciidoctor.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"><link rel="stylesheet" href="/home/travis/build/jMonkeyEngine/wiki/build/asciidoc/html5/jme3/advanced/twemoji-awesome.css"></head><body class="article toc2 toc-left"><div id="header"><div id="toolbar"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/src/docs/asciidoc/jme3/advanced/bloom_and_glow.adoc"><i class="fa fa-pencil-square" aria-hidden="true"></i></a><a href="https://github.com/jMonkeyEngine/wiki/new/master/src/docs/asciidoc/jme3/advanced/"><i class="fa fa-plus-square" aria-hidden="true"></i></a><input dir="auto" style="position: relative; vertical-align: top;" spellcheck="false" autocomplete="off" class="searchbox__input aa-input" id="doc-search" name="search" placeholder="Search in the doc" required="required" type="search"></div><h1>Bloom and Glow</h1><div class="details"><span class="author" id="author"></span><br><span id="revnumber">version ,</span> <span id="revdate">2016/03/17 20:48</span></div><div id="toc" class="toc2"><div id="toctitle">Table of Contents</div><ul class="sectlevel1"><li><a href="#bloom-usage">Bloom Usage</a></li><li><a href="#bloom-with-a-glow-map">Bloom with a glow map</a><ul class="sectlevel2"><li><a href="#creating-a-glow-map">Creating a glow-map</a></li><li><a href="#usage">Usage</a></li></ul></li><li><a href="#bloom-with-a-glow-color">Bloom with a glow color</a><ul class="sectlevel2"><li><a href="#usage-2">Usage</a></li></ul></li><li><a href="#hints-and-tricks">Hints and tricks</a><ul class="sectlevel2"><li><a href="#increasing-the-blur-range-and-reducing-fps-cost">Increasing the blur range and reducing fps cost</a></li><li><a href="#using-classic-bloom-combined-with-a-glow-map">Using classic bloom combined with a glow map</a></li><li><a href="#making-your-home-brewed-material-definition-support-glow">Making your home brewed material definition support Glow</a></li><li><a href="#make-a-glowing-object-stop-to-glow">Make a glowing object stop to glow</a></li></ul></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="paragraph"><p>Bloom is a popular shader effect in 3D games industry. It usually consist in displaying a glowing halo around light sources or bright areas of a scene.
In practice, the bright areas are extracted from the rendered scene, blurred and finally added up to the render.</p></div>
<div class="paragraph"><p>Those images gives an idea of what bloom does. The left image has no bloom effect, the right image does.<br>
<span class="image"><img src="../../jme3/advanced/nobloomsky.png" alt="No bloom" width="" height=""></span><span class="image"><img src="../../jme3/advanced/blomsky.png" alt="Bloom" width="" height=""></span></p></div></div></div>
<div class="sect1"><h2 id="bloom-usage">Bloom Usage</h2><div class="sectionbody"><div class="olist arabic"><ol class="arabic"><li><p>Create a FilterPostProcessor</p></li><li><p>Create a BloomFilter</p></li><li><p>Add the filter to the processor</p></li><li><p>Add the processor to the viewPort</p></li></ol></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"> FilterPostProcessor fpp=<span class="keyword">new</span> FilterPostProcessor(assetManager);
 BloomFilter bloom=<span class="keyword">new</span> BloomFilter();
 fpp.addFilter(bloom);
 viewPort.addProcessor(fpp);</code></pre></div></div>
<div class="paragraph"><p>Here are the parameters that you can tweak :</p></div>
<table class="tableblock frame-all grid-all spread"><colgroup><col style="width: 25%;"><col style="width: 25%;"><col style="width: 25%;"><col style="width: 25%;"></colgroup><thead><tr><th class="tableblock halign-left valign-top">Parameter</th><th class="tableblock halign-left valign-top">Method</th><th class="tableblock halign-left valign-top">Default</th><th class="tableblock halign-left valign-top">Description</th></tr></thead><tbody><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>blur scale</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p><code>setBlurScale(float)</code></p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>1.5f</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>the scale of the bloom effect, but be careful, high values does artifacts</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>exposure Power</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p><code>setExposurePower(float)</code></p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>5.0f</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>the glowing channel color is raised to the value power</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>exposure cut-off</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p><code>setExposureCutOff(float)</code></p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>0.0f</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>the threshold of color to bloom during extraction</p></div></div></td></tr><tr><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>bloom intensity</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p><code>setBloomIntensity(float)</code></p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>2.0f</p></div></div></td><td class="tableblock halign-left valign-top"><div><div class="paragraph"><p>the resulting bloom value is multiplied by this intensity</p></div></div></td></tr></tbody></table>
<div class="paragraph"><p>You&#8217;ll probably need to adjust those parameters depending on your scene.</p></div></div></div>
<div class="sect2"><h3 id="bloom-with-a-glow-map">Bloom with a glow map</h3><div class="paragraph"><p>Sometimes, you want to have more control over what glows and does not glow.
The bloom filter supports a glow map or a glow color.</p></div>
<div class="sect2"><h3 id="creating-a-glow-map">Creating a glow-map</h3><div class="paragraph"><p>Let&#8217;s take the hover tank example bundled with JME3 test data.<br>
Here you can see the diffuse map of the tank, and the associated glow map that only contains the parts of the texture that will glow and their glowing color:<br>
<span class="image"><img src="../../jme3/advanced/tank_diffuse_ss.png" alt="Tank diffuse map" width="" height=""></span>
<span class="image"><img src="../../jme3/advanced/tank_glow_map_ss.png" alt="Tank glow map" width="" height=""></span></p></div>
<div class="paragraph"><p>Glow maps work with Lighting.j3md, Particles.j3md and Unshaded.j3md material definitions.
The tank material looks like this :</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>Material My Material : Common/MatDefs/Light/Lighting.j3md {
     MaterialParameters {
        SpecularMap : Models/HoverTank/tank_specular.png
        Shininess : 8
        NormalMap : Models/HoverTank/tank_normals.png
        DiffuseMap : Models/HoverTank/tank_diffuse.png
        GlowMap : Models/HoverTank/tank_glow_map_highres.png
        UseMaterialColors : true
        Ambient  : 0.0 0.0 0.0 1.0
        Diffuse  : 1.0 1.0 1.0 1.0
        Specular : 1.0 1.0 1.0 1.0
     }
}</code></pre></div></div>
<div class="paragraph"><p>The glow map is defined here : <strong>GlowMap : Models/HoverTank/tank_glow_map_highres.png</strong></p></div></div>
<div class="sect2"><h3 id="usage">Usage</h3><div class="olist arabic"><ol class="arabic"><li><p>Create a FilterPostProcessor</p></li><li><p>Create a BloomFilter with the GlowMode.Objects parameter</p></li><li><p>Add the filter to the processor</p></li><li><p>Add the processor to the viewPort</p></li></ol></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>  FilterPostProcessor fpp=new FilterPostProcessor(assetManager);
  BloomFilter bf=new BloomFilter(BloomFilter.GlowMode.Objects);
  fpp.addFilter(bf);
  viewPort.addProcessor(fpp);</code></pre></div></div>
<div class="paragraph"><p>Here is the result :<br>
<span class="image"><img src="../../jme3/advanced/tanlglow1.png" alt="Glowing hover tank" width="" height=""></span></p></div></div></div>
<div class="sect2"><h3 id="bloom-with-a-glow-color">Bloom with a glow color</h3><div class="paragraph"><p>Sometimes you need an entire object to glow, not just parts of it.
In this case you&#8217;ll need to use the glow color parameter.</p></div>
<div class="sect2"><h3 id="usage-2">Usage</h3><div class="olist arabic"><ol class="arabic"><li><p>Create a material for your object and set the GlowColor parameter</p></li><li><p>Create a FilterPostProcessor</p></li><li><p>Create a BloomFilter with the GlowMode.Objects parameter</p></li><li><p>Add the filter to the processor</p></li><li><p>Add the processor to the viewPort</p></li></ol></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>    Material mat = new Material(getAssetManager(), "Common/MatDefs/Misc/Unshaded.j3md");
    mat.setColor("Color", ColorRGBA.Green);
    mat.setColor("GlowColor", ColorRGBA.Green);
    fpp=new FilterPostProcessor(assetManager);
    bloom= new BloomFilter(BloomFilter.GlowMode.Objects);
    fpp.addFilter(bloom);
    viewPort.addProcessor(fpp);</code></pre></div></div>
<div class="paragraph"><p>Here is the result on Oto&#8217;s plasma ball (before and after) :<br></p></div>
<div class="paragraph"><p><span class="image"><img src="../../jme3/advanced/otonobloom.png" alt="Oto&#8217;s plasma ball is just a big pea" width="400" height=""></span><span class="image"><img src="../../jme3/advanced/otoglow.png" alt="Oto&#8217;s plasma ball radiates incredible power!!!" width="400" height=""></span></p></div></div></div>
<div class="sect2"><h3 id="hints-and-tricks">Hints and tricks</h3><div class="sect2"><h3 id="increasing-the-blur-range-and-reducing-fps-cost">Increasing the blur range and reducing fps cost</h3><div class="paragraph"><p>The glow render is sampled on a texture that has the same dimensions as the viewport.
You can reduce the size of the bloom sampling just by using the setDownSamplingFactor method like this :<br></p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java"> BloomFilter bloom=<span class="keyword">new</span> BloomFilter();
 bloom.setDownSamplingFactor(<span class="float">2.0f</span>);</code></pre></div></div>
<div class="paragraph"><p>In this example the sampling size is divided by 4 (width/2,height/2), resulting in less work to blur the scene.
The resulting texture is then up sampled to the screen size using hardware bilinear filtering. this results in a wider blur range.</p></div></div>
<div class="sect2"><h3 id="using-classic-bloom-combined-with-a-glow-map">Using classic bloom combined with a glow map</h3><div class="paragraph"><p>let&#8217;s say you want a global bloom on your scene, but you have also a glowing object on it.
You can use only one bloom filter for both effects like that</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">BloomFilter bloom=<span class="keyword">new</span> BloomFilter(BloomFilter.GlowMode.SceneAndObjects);</code></pre></div></div>
<div class="paragraph"><p>However, note that both effects will share the same values of attribute, and sometimes, it won&#8217;t be what you need.</p></div></div>
<div class="sect2"><h3 id="making-your-home-brewed-material-definition-support-glow">Making your home brewed material definition support Glow</h3><div class="paragraph"><p>Let&#8217;s say you have made a custom material on your own, and that you want it to support glow maps and glow color.
In your material definition you need to add those lines in the MaterialParameters section :</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code> MaterialParameters {

        ....

        // Texture of the glowing parts of the material
        Texture2D GlowMap
        // The glow color of the object
        Color GlowColor
    }</code></pre></div></div>
<div class="paragraph"><p>Then add the following technique :</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>    Technique Glow {

        LightMode SinglePass

        VertexShader GLSL100:   Common/MatDefs/Misc/SimpleTextured.vert
        FragmentShader GLSL100: Common/MatDefs/Light/Glow.frag

        WorldParameters {
            WorldViewProjectionMatrix
        }

        Defines {
            HAS_GLOWMAP : GlowMap
            HAS_GLOWCOLOR : GlowColor
        }
    }</code></pre></div></div>
<div class="paragraph"><p>Then you can use this material with the BloomFilter</p></div></div>
<div class="sect2"><h3 id="make-a-glowing-object-stop-to-glow">Make a glowing object stop to glow</h3><div class="paragraph"><p>If you are using a glow map, remove the texture from the material.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>material.clearTextureParam("GlowMap");</code></pre></div></div>
<div class="paragraph"><p>If you are using a glow color, set it to black</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code>material.setColor("GlowColor",ColorRGBA.Black);</code></pre></div></div></div></div></div><div id="footer"><div id="footer-text">Version <br>Last updated 2019-12-20 23:30:51 +00:00</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script><script>docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#doc-search',
  debug: false // Set debug to true if you want to inspect the dropdown
});</script></body></html>