| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <title>How to Use Materials :: jMonkeyEngine Docs</title>
- <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/tutorials/intermediate/how_to_use_materials.html">
- <link rel="prev" href="terminology.html">
- <link rel="next" href="transparency_sorting.html">
- <meta name="keywords" content="material, texture, effect, wireframe, light, documentation">
- <meta name="generator" content="Antora 2.3.3">
- <link rel="stylesheet" href="../../../_/css/site.css">
- <meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
- <meta property="og:description" content="How to Use Materials">
- <meta property="og:title" content="jMonkeyEngine Docs">
- <link rel="stylesheet" href="../../../_/css/site-extra.css">
- <link rel="stylesheet" href="../../../_/css/vendor/docsearch.min.css">
- <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
- <link rel="icon" href="../../../_/img/favicon.ico" type="image/x-icon">
- </head>
- <body class="article">
- <header class="header">
- <nav class="navbar">
- <div class="navbar-brand">
- <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
- <img alt="" src="../../../_/img/jme-logo.png" height="32" type="image/x-icon">
- </a>
- <div class="navbar-item hide-for-print">
- <input id="search-input" type="text" placeholder="Search docs">
- </div>
- <button class="navbar-burger" data-target="topbar-nav">
- <span></span>
- <span></span>
- <span></span>
- </button>
- </div>
- <div id="topbar-nav" class="navbar-menu">
- <div class="navbar-end">
- <div class="navbar-item theme-switch-wrapper">
- <label class="theme-switch" for="checkbox">
- <input type="checkbox" id="checkbox" />
- <div class="slider round"></div>
- </label>
- </div>
- <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
- </div>
- </div>
- </nav>
- </header>
- <div class="body">
- <div class="nav-container" data-component="docs" data-version="master">
- <aside class="nav">
- <div class="panels">
- <div class="nav-panel-menu is-active" data-panel="menu">
- <nav class="nav-menu">
- <h3 class="title"><a href="../../documentation.html">Docs</a></h3>
- <ul class="nav-list">
- <li class="nav-item" data-depth="0">
- <ul class="nav-list">
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="../../documentation.html">Getting Started</a>
- </li>
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.3.2-stable">JavaDoc</a>
- </li>
- <li class="nav-item" data-depth="1">
- <a class="nav-link" href="../../jme3.html">jMonkeyEngine 3</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="0">
- <ul class="nav-list">
- <li class="nav-item" data-depth="1">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Tutorials</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <a class="nav-link" href="../beginner/beginner.html">Beginner</a>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_simpleapplication.html">Hello SimpleApplication</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_node.html">Hello Node</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_asset.html">Hello Asset</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_main_event_loop.html">Hello Update Loop</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_input_system.html">Hello Input System</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_material.html">Hello Material</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_animation.html">Hello Animation</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_picking.html">Hello Picking</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_collision.html">Hello Collision</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_terrain.html">Hello Terrain</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_audio.html">Hello Audio</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_effects.html">Hello Effects</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../beginner/hello_physics.html">Hello Physics</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Intermediate</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="best_practices.html">Best Practices</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="optimization.html">Optimization</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="faq.html">Frequently Asked Questions</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="math_for_dummies.html">Math for Dummies</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="math.html">Math overview</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="math_cheet_sheet.html">3D math "cheat sheet"</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="rotate.html">3-D Rotation</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="math_video_tutorials.html">Math video tutorial series</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="scenegraph_for_dummies.html">Scene Graph for Dummies</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="terminology.html">3D Graphics Terminology</a>
- </li>
- <li class="nav-item is-current-page" data-depth="3">
- <a class="nav-link" href="how_to_use_materials.html">How to Use Materials</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="transparency_sorting.html">Transparency Sorting</a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="0">
- <ul class="nav-list">
- <li class="nav-item" data-depth="1">
- <button class="nav-item-toggle"></button>
- <a class="nav-link" href="../../sdk/sdk.html">SDK</a>
- <ul class="nav-list">
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Video Tutorials</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">SDK Use Case Tutorials</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=-OzRZscLlHY">Demo 1 (Quixote demo)</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=6-YWxD3JByE">Demo 2 (Models and Materials)</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="3">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">SDK Tutorials</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=M1_0pbeyJzI">Basics</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=nL7woH40i5c">Importing Models</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=DUmgAjiNzhY">Dragging&Dropping Nodes</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=ntPAmtsQ6eM">Scene Composing</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=zgPV3W6dD4s">Terrain with Collision Shape</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=Feu3-mrpolc">Working with Materials</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=MNDiZ9YHIpM">Custom Controls</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=oZnssg8TBWQ">WebStart Deployment</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="http://www.youtube.com/watch?v=D7JM4VMKqPc">Animation and Effect TrackEditing</a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Getting Started</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/update_center.html">Updating jMonkeyEngine SDK</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/troubleshooting.html">Troubleshooting</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Java Development Features</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/project_creation.html">Project Creation</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/code_editor.html">Code Editor and Palette</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/version_control.html">File Version Control</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/debugging_profiling_testing.html">Debug, Profile, Test</a>
- </li>
- <li class="nav-item" data-depth="3">
- <button class="nav-item-toggle"></button>
- <a class="nav-link" href="../../sdk/application_deployment.html">Application Deployment</a>
- <ul class="nav-list">
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../../sdk/default_build_script.html">Default Build Script</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../../sdk/android.html">Android</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../../sdk/android_cheat_sheet.html">Android Cheat Sheet</a>
- </li>
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../../sdk/ios.html">iOS</a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Unique Features</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <button class="nav-item-toggle"></button>
- <a class="nav-link" href="../../sdk/model_loader_and_viewer.html">Import, View, Convert Models</a>
- <ul class="nav-list">
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="../../sdk/asset_packs.html">Asset Packs</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/scene_explorer.html">The SceneExplorer</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/scene_composer.html">Composing a Scene</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/terrain_editor.html">Terrain Editor</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/sample_code.html">Sample Code</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/material_editing.html">Material Editing</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/font_creation.html">Creating Bitmap Fonts</a>
- </li>
- <li class="nav-item" data-depth="3">
- <button class="nav-item-toggle"></button>
- <a class="nav-link" href="https://hub.jmonkeyengine.org/t/effecttrack-and-audiotrack-editing-in-the-sdk/23378">Audio and Effect Track Editing</a>
- <ul class="nav-list">
- <li class="nav-item" data-depth="4">
- <a class="nav-link" href="https://www.youtube.com/watch?v=D7JM4VMKqPc">Video: Effect and AudioTrack editing in jMonkeyEngine 3 sdk</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/filters.html">Post-Processor Filter Editor and Viewer</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../jme3/advanced/application_states.html">Application States</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../jme3/advanced/custom_controls.html">Custom Controls</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/vehicle_creator.html">Vehicle Creator</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Advanced Usage</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/build_platform.html">Building jMonkeyEngine SDK</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/use_own_jme.html#.adoc">Using your own (modified) version of jME3 in jMonkeyEngine SDK</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/increasing_heap_memory.html">Increasing Heap Memory</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/log_files.html">Log Files</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <span class="nav-text">Available external plugins</span>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../jme3/contributions.html">Contributions</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/neotexture.html">Neo Texture Editor for procedural textures</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="http://www.youtube.com/watch?v=yS9a9o4WzL8">Video: Mesh Tool & Physics Editor</a>
- </li>
- </ul>
- </li>
- <li class="nav-item" data-depth="2">
- <button class="nav-item-toggle"></button>
- <a class="nav-link" href="../../sdk/development.html">Developing plugins for jMonkeyEngine SDK</a>
- <ul class="nav-list">
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/development/setup.html">Creating a plugin</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/development/general.html">Creating components</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/development/scene.html">The Main Scene</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/development/sceneexplorer.html">The Scene Explorer</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/development/projects_assets.html">Projects and Assets</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/development/extension_library.html">Create a library plugin from a jar file</a>
- </li>
- <li class="nav-item" data-depth="3">
- <a class="nav-link" href="../../sdk/development/model_loader.html">Create a new or custom model filetype and loader</a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </nav>
- </div>
- <div class="nav-panel-explore" data-panel="explore">
- <div class="context">
- <span class="title">Docs</span>
- <span class="version">master</span>
- </div>
- <ul class="components">
- <li class="component is-current">
- <span class="title">Docs</span>
- <ul class="versions">
- <li class="version is-current is-latest">
- <a href="../../documentation.html">master</a>
- </li>
- </ul>
- </li>
- <li class="component">
- <span class="title">Wiki UI</span>
- <ul class="versions">
- <li class="version is-latest">
- <a href="../../../wiki-ui/index.html">master</a>
- </li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </aside>
- </div>
- <main class="article">
- <div class="toolbar" role="navigation">
- <button class="nav-toggle"></button>
- <nav class="breadcrumbs" aria-label="breadcrumbs">
- <ul>
- <li><a href="../../documentation.html">Docs</a></li>
- <li>Tutorials</li>
- <li>Intermediate</li>
- <li><a href="how_to_use_materials.html">How to Use Materials</a></li>
- </ul>
- </nav>
- <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/tutorials/pages/intermediate/how_to_use_materials.adoc">Edit this Page</a></div>
- </div>
- <div class="content">
- <article class="doc">
- <h1 class="page">How to Use Materials</h1>
- <div id="preamble">
- <div class="sectionbody">
- <div class="paragraph">
- <p>A Geometry (mesh) is just the shape of the object. jMonkeyEngine cannot render a shape without knowing anything about its surface properties. You need to apply a color or texture to the surface of your Geometries to make them visible. In jMonkeyEngine, colors and textures are represented as Material objects. (An alternative would also be to load a model that includes materials generated by a mesh editor, such as Blender.)</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>All Geometries must have Materials that defines color or texture.</p>
- </li>
- <li>
- <p>Each Material is based on a Material Definition file.<br>
- Examples of included Material Definitions: Lighting.j3md, Unshaded.j3md</p>
- </li>
- </ul>
- </div>
- <div class="paragraph">
- <p>You want to make the most of your 3D models by specifying good looking material parameters. The developers must be in contact with the graphic designers regarding which of the <a href="../../jme3/advanced/materials_overview.html" class="page">Material properties</a> they intend to use in their 3D models. You must have an understanding what <a href="terminology.html#materials-textures" class="page">texture maps</a> are, to be able to use texture-mapped materials.</p>
- </div>
- <div class="admonitionblock important">
- <table>
- <tr>
- <td class="icon">
- <i class="fa icon-important" title="Important"></i>
- </td>
- <td class="content">
- <div class="paragraph">
- <p>Don’t forget to add a <a href="../../jme3/advanced/light_and_shadow.html" class="page">Light Source</a> to the scene! All Materials (except “Unshaded” ones) are <strong>invisible</strong> without a light source.</p>
- </div>
- </td>
- </tr>
- </table>
- </div>
- <div class="paragraph">
- <p>If you want more advanced background info: You can learn more about <a href="../../jme3/advanced/material_definitions.html" class="page">Material Definitions</a> in general here. You can find the full list of Material Parameters in the <a href="../../jme3/advanced/materials_overview.html" class="page">Material Definitions Properties</a> overview. The following sections introduce you to the most commonly used cases. You typically initialize Material objects in the <code>simpleInitApp()</code> method, and configure them using the setters described here. Then load the Materials using <code>myGeometry.setMaterial(mat)</code>.</p>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="code-sample"><a class="anchor" href="#code-sample"></a>Code Sample</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>The following samples assume that you loaded a Geometry called myGeometry, and want to assign a material to it.</p>
- </div>
- <div class="paragraph">
- <p>This example creates a simple unshaded blue material: Use it for abstract objects that need no illumination/shading, e.g. sky, <abbr title="Graphical User Interface">GUI</abbr> and billboard nodes, tiles/cards, or toons.</p>
- </div>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Spatial myGeometry = assetManager.loadModel("Models/Teapot/Teapot.j3o");
- Material mat = new Material(assetManager, // Create new material and...
- "Common/MatDefs/Misc/Unshaded.j3md"); // ... specify .j3md file to use (unshaded).
- mat.setColor("Color", ColorRGBA.Blue); // Set some parameters, e.g. blue.
- myGeometry.setMaterial(mat); // Use new material on this Geometry.</code></pre>
- </div>
- </div>
- <div class="paragraph">
- <p>This example creates a <a href="http://en.wikipedia.org/wiki/Phong_reflection_model">Phong</a>-illuminated blue material. Use it for illuminated, naturalistic objects, such as characters, buildings, terrains, vehicles. Needs a light source, otherwise it will be invisible.</p>
- </div>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Spatial myGeometry = assetManager.loadModel("Models/Teapot/Teapot.j3o");
- Material mat = new Material(assetManager, // Create new material and...
- "Common/MatDefs/Light/Lighting.j3md"); // ... specify .j3md file to use (illuminated).
- mat.setBoolean("UseMaterialColors",true); // Set some parameters, e.g. blue.
- mat.setColor("Ambient", ColorRGBA.Blue); // ... color of this object
- mat.setColor("Diffuse", ColorRGBA.Blue); // ... color of light being reflected
- myGeometry.setMaterial(mat); // Use new material on this Geometry.</code></pre>
- </div>
- </div>
- <div class="admonitionblock tip">
- <table>
- <tr>
- <td class="icon">
- <i class="fa icon-tip" title="Tip"></i>
- </td>
- <td class="content">
- <div class="paragraph">
- <p>Do you reuse Materials? You can <a href="../../sdk/material_editing.html" class="page">store Material properties in a .j3m file</a> and load all properties in one line using</p>
- </div>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">myGeometry.setMaterial( assetManager.loadMaterial("Materials/myMaterial.j3m"));</code></pre>
- </div>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="colored-or-textured"><a class="anchor" href="#colored-or-textured"></a>Colored or Textured</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>Every Material must have at least Material Colors or Textures. Some optional material features also require a combination of both.</p>
- </div>
- <div class="sect2">
- <h3 id="colored"><a class="anchor" href="#colored"></a>Colored</h3>
- <div class="paragraph">
- <p>To give an unshaded material a color:</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>Specify the color property</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setColor("Color", ColorRGBA.Blue); // with Unshaded.j3md</code></pre>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="paragraph">
- <p>To give an Phong-illuminated material a color:</p>
- </div>
- <div class="olist arabic">
- <ol class="arabic">
- <li>
- <p>Activate material colors:</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setBoolean("UseMaterialColors",true); // with Lighting.j3md</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>Specify at least Diffuse and Ambient colors. Set both to the same color in the standard case.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setColor("Diffuse", ColorRGBA.Blue ); // with Lighting.j3md
- mat.setColor("Ambient", ColorRGBA.Blue ); // with Lighting.j3md</code></pre>
- </div>
- </div>
- </li>
- </ol>
- </div>
- </div>
- <div class="sect2">
- <h3 id="textured"><a class="anchor" href="#textured"></a>Textured</h3>
- <div class="paragraph">
- <p>To give an unshaded material a texture:</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>Specify at least a ColorMap:</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setTexture("ColorMap", assetManager.loadTexture("Textures/monkey.png")); // with Unshaded.j3md</code></pre>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="paragraph">
- <p>To give a Phong-illuminated material a texture:</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>Specify at least the DiffuseMap texture:</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setTexture("DiffuseMap", assetManager.loadTexture("Textures/wood_diffuse.png")); // with Lighting.j3md</code></pre>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="admonitionblock tip">
- <table>
- <tr>
- <td class="icon">
- <i class="fa icon-tip" title="Tip"></i>
- </td>
- <td class="content">
- <div class="paragraph">
- <p>It can happen that you load textures at different scales, for example, your blades of grass may look as big as twigs, or your spaceship’s heat tiles may look like small bathroom tiles. Then you need to adjust the texture scale, either bigger (> 1.0f) or smaller (< 1.0f).</p>
- </div>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">geometry.scaleTextureCoordinates(new Vector2f(0.5f, 0.5f));</code></pre>
- </div>
- </div>
- </td>
- </tr>
- </table>
- </div>
- <div class="paragraph">
- <p>All other Texture Maps or Material settings are optional. If used skillfully, they make your model look really spiffy.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="optional-bumpy"><a class="anchor" href="#optional-bumpy"></a>(Optional) Bumpy</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>A NormalMap (also called BumpMap) is an extra colored texture that describes the fine bumpy details of the Material surface. E.g. fine cracks, pores, creases, notches. Using a BumpMap is more efficient than trying to shape the mesh to be bumpy.</p>
- </div>
- <div class="paragraph">
- <p>To add a BumpMap (this only makes sense for illuminated Materials):</p>
- </div>
- <div class="olist arabic">
- <ol class="arabic">
- <li>
- <p>Generate normal vectors information for the Mesh (not for the Geometry!) using <code>com.jme3.util.TangentBinormalGenerator</code>.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">TangentBinormalGenerator.generate(mesh);</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>Specify the <code>NormalMap</code> texture for the Material.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setTexture("NormalMap", assetManager.loadTexture("Textures/wood_normal.png")); // with Lighting.j3md</code></pre>
- </div>
- </div>
- </li>
- </ol>
- </div>
- <div class="paragraph">
- <p><a href="http://en.wikipedia.org/wiki/Bump_mapping">Learn more about creating and using NormalMaps and BumpMaps here.</a></p>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="optional-shiny"><a class="anchor" href="#optional-shiny"></a>(Optional) Shiny</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>To activate Shininess (this only makes sense for illuminated Materials):</p>
- </div>
- <div class="olist arabic">
- <ol class="arabic">
- <li>
- <p>Specify the <code>Shininess</code> intensity the Material.<br>
- Shininess is a float value between 1 (rough surface with blurry shininess) and 128 (very smooth surface with focused shininess)</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setFloat("Shininess", 5f);</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>Activate material colors:</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setBoolean("UseMaterialColors",true);</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>Specify the <code>Specular</code> and <code>Diffuse</code> colors of the shiny spot.<br>
- Typically you set Specular to the ColorRGBA value of the light source, often RGBA.White.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setColor("Specular",ColorRGBA.White);
- mat.setColor("Diffuse",ColorRGBA.White);</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>(Optional) Specify a <code>SpecularMap</code> texture.<br>
- You optionally hand-draw this grayscale texture to outline in detail where the surface should be more shiny (whiter grays) and where less (blacker grays). If you don’t supply a SpecularMap, the whole material is shiny everywhere.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setTexture("SpecularMap", assetManager.loadTexture("Textures/metal_spec.png")); // with Lighting.j3md</code></pre>
- </div>
- </div>
- </li>
- </ol>
- </div>
- <div class="paragraph">
- <p>To deactivate shininess</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>Set the <code>Specular</code> color to <code>ColorRGBA.Black</code>. Do not just set <code>Shininess</code> to 0.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setColor("Specular",ColorRGBA.Black);</code></pre>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="optional-glow"><a class="anchor" href="#optional-glow"></a>(Optional) Glow</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>To activate glow:</p>
- </div>
- <div class="olist arabic">
- <ol class="arabic">
- <li>
- <p>Add one <a href="../../jme3/advanced/bloom_and_glow.html" class="page">BloomFilter PostProcessor</a> in your simpleInitApp() method (only once, it is used by all glowing objects).</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">FilterPostProcessor fpp=new FilterPostProcessor(assetManager);
- BloomFilter bloom = new BloomFilter(BloomFilter.GlowMode.Objects);
- fpp.addFilter(bloom);
- viewPort.addProcessor(fpp);</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>Specify a <code>Glow</code> color.<br>
- A ColorRGBA value of your choice, e.g. choose a warm or cold color for different effects, or white for a neutral glow.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setColor("GlowColor",ColorRGBA.White);</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>(Optional) Specify a <code>GlowMap</code> texture.<br>
- This texture outlines in detail where the DiffuseMap texture glows. If you don’t supply a GlowMap, the whole material glows everwhere.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setTexture("GlowMap", assetManager.loadTexture("Textures/alien_glow.png"));</code></pre>
- </div>
- </div>
- </li>
- </ol>
- </div>
- <div class="paragraph">
- <p>To deactivate glow:</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>Set the <code>Glow</code> color to <code>ColorRGBA.Black</code>.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setColor("GlowColor", ColorRGBA.Black);</code></pre>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div class="paragraph">
- <p>Learn more about <a href="../../jme3/advanced/bloom_and_glow.html" class="page">Bloom and Glow</a>.</p>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="optional-transparent"><a class="anchor" href="#optional-transparent"></a>(Optional) Transparent</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>Most Material Definitions support an alpha channel to make a model opaque, translucent, or transparent.</p>
- </div>
- <div class="ulist">
- <ul>
- <li>
- <p>Alpha=1.0f makes the color opaque (default),</p>
- </li>
- <li>
- <p>Alpha=0.0f make the color fully transparent</p>
- </li>
- <li>
- <p>Alpha between 0f and 1f makes the color more or less translucent.</p>
- </li>
- </ul>
- </div>
- <div class="paragraph">
- <p>To make a Geometry transparent or translucent:</p>
- </div>
- <div class="olist arabic">
- <ol class="arabic">
- <li>
- <p>Specify which areas you want to be transparent or translucent by specifying the alpha channel:</p>
- <div class="ulist">
- <ul>
- <li>
- <p>(For colored Materials) In any RGBA color, the first three are Red-Green-Blue, and the last float is the Alpha channel. For example, to replace ColorRGBA.Red with a translucent red:</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setColor("Color", new ColorRGBA(1,0,0,0.5f));</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>(For textured Materials) Supply an AlphaMap that outlines which areas are transparent.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setTexture("AlphaMap", assetManager.loadTexture("Textures/window_alpha.png"));</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>(For textured Materials) If the DiffuseMap has an alpha channel, use:</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setBoolean("UseAlpha",true);</code></pre>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </li>
- <li>
- <p>Specify BlendMode Alpha for the Material.</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>Put the Geometry (not the Material!) in the appropriate render queue bucket.<br></p>
- <div class="ulist">
- <ul>
- <li>
- <p>Objects in the translucent bucket (e.g. particles) are not affected by SceneProcessors (e.g. shadows).</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">geo.setQueueBucket(Bucket.Translucent);</code></pre>
- </div>
- </div>
- </li>
- <li>
- <p>Objects in the transparent bucket (e.g. foliage) are affected by SceneProcessors (e.g. shadows).</p>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">geo.setQueueBucket(Bucket.Transparent);</code></pre>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </li>
- <li>
- <p>(Optional) Specify other material settings.</p>
- </li>
- </ol>
- </div>
- <table class="tableblock frame-all grid-all stretch">
- <colgroup>
- <col style="width: 33.3333%;">
- <col style="width: 33.3333%;">
- <col style="width: 33.3334%;">
- </colgroup>
- <thead>
- <tr>
- <th class="tableblock halign-left valign-top">Standard Material Transparency</th>
- <th class="tableblock halign-left valign-top">Description</th>
- <th class="tableblock halign-left valign-top">Example</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>getAdditionalRenderState().setBlendMode(BlendMode.Off);</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>This is the default, no transparency.</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>Use for all opaque objects like walls, floors, people…</p>
- </div></div></td>
- </tr>
- <tr>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>getAdditionalRenderState().setBlendMode(BlendMode.Alpha);</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>Interpolates the background pixel with the current pixel by using the current pixel’s alpha.</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>This is the most commonly used BlendMode for transparency and translucency: Frosted window panes, ice, glass, alpha-blended vegetation textures…</p>
- </div></div></td>
- </tr>
- <tr>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>getAdditionalRenderState().setDepthWrite(false);</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>Disables writing of the pixel’s depth value to the depth buffer.</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>Deactivate this on Materials if you expect two or more transparent/translucent objects to be obscuring one another, but you want to see through both.</p>
- </div></div></td>
- </tr>
- <tr>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>getAdditionalRenderState().setAlphaTest(true)<br>
- getAdditionalRenderState().setAlphaFallOff(0.5f);</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>Enables Alpha Testing and uses an AlphaDiscardThreshold as alpha fall-off value. This means that gradients in the AlphaMap are no longer interpreted as soft translucency, but parts of the texture become either fully opaque or fully transparent. Only pixels above the alpha threshold (e.g. 0.5f) are rendered.</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>Activate Alpha Testing for (partially) <strong>transparent</strong> objects such as foliage, hair, etc.<br>
- Deactivate Alpha Testing for gradually <strong>translucent</strong> objects, such as colored glass, smoked glass, ghosts.</p>
- </div></div></td>
- </tr>
- </tbody>
- </table>
- <div class="admonitionblock tip">
- <table>
- <tr>
- <td class="icon">
- <i class="fa icon-tip" title="Tip"></i>
- </td>
- <td class="content">
- <div class="paragraph">
- <p>It is possible to load a DiffuseMap texture that has an Alpha channel, and combine it with an underlying Material Color.</p>
- </div>
- <div class="listingblock">
- <div class="content">
- <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat.setBoolean("UseAlpha",true);</code></pre>
- </div>
- </div>
- <div class="paragraph">
- <p>The Material Color bleeds through the transparent areas of the top-layer DiffuseMap texture. In this case you do not need BlendMode Alpha – because it’s not the whole Material that is transparent, but only one of the texture layers. You use this bleed-through effect, for example, to generate differently colored uniforms, animals, or plants, where each Material uses the same “template” DiffuseMap texture but combines it with a different color.</p>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- <div class="sect1">
- <h2 id="optional-wireframe"><a class="anchor" href="#optional-wireframe"></a>(Optional) Wireframe</h2>
- <div class="sectionbody">
- <div class="paragraph">
- <p>Additionally to the above settings, you can switch off and on a wireframe rendering of the mesh. Since a wireframe has no faces, this temporarily disables the other Texture Maps.</p>
- </div>
- <table class="tableblock frame-all grid-all stretch">
- <colgroup>
- <col style="width: 33.3333%;">
- <col style="width: 33.3333%;">
- <col style="width: 33.3334%;">
- </colgroup>
- <thead>
- <tr>
- <th class="tableblock halign-left valign-top">Material Property</th>
- <th class="tableblock halign-left valign-top">Description</th>
- <th class="tableblock halign-left valign-top">Example</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>getAdditionalRenderState().setWireframe(true);</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>Switch to showing the (textured) Material in wireframe mode. The wireframe optionally uses the Material’s <code>Color</code> value.</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>Use wireframes to debug meshes, or for a “matrix” or “holodeck” effect.</p>
- </div></div></td>
- </tr>
- <tr>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>getAdditionalRenderState().setLineWidth(2f);</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
- <p>When in wireframe mode, sets the line width of the mesh.</p>
- </div></div></td>
- <td class="tableblock halign-left valign-top"><div class="content"></div></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <nav class="pagination">
- <span class="prev"><a href="terminology.html">3D Graphics Terminology</a></span>
- <span class="next"><a href="transparency_sorting.html">Transparency Sorting</a></span>
- </nav>
- </article>
- <aside class="toc sidebar" data-title="Contents" data-levels="2">
- <div class="toc-menu"></div>
- </aside>
- </div>
- </main>
- </div>
- <footer class="footer">
- <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
- </footer>
- <script src="../../../_/js/vendor/docsearch.min.js"></script>
- <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
- <script>
- var search = docsearch({
- apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
- indexName: 'jmonkeyengine',
- inputSelector: '#search-input',
- autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
- algoliaOptions: { hitsPerPage: 10 }
- }).autocomplete
- search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
- function focusSearchInput () { document.querySelector('#search-input').focus() }
- if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
- </script>
- <script src="../../../_/js/site.js"></script>
- <script async src="../../../_/js/vendor/highlight.js"></script>
- </body>
- </html>
|