I’ve ported Imphenzia’s PixPal palette texture material setup to a Babylon.js node PBR material. This is a really neat setup for creating great looking, flexible yet high performance low poly models for games.
Imphenzia’s PixPal palette textures, Blender, Unity and Unreal example projects are public domain and available for free download at https://imphenzia.com/
See also his YouTube channel:
So ccoool
Huge! this is great mate!
I’ve updated this to Imphenzia’s PixPal Palette Texture version 1.2 and showcase example (see readme.txt below and in code comment for info, licensing and links). I haven’t added shadows, reflection probes and other polish yet.
Node material is here https://nme.babylonjs.com/#1E76JR#11 (thanks to @Evgeni_Popov for the assistance)
Imphenzia PixPal Palette Version 1.2
*** LICENSE *******************************************************************
CC0 - Creative Commons 0 - Public Domain
CC0 License Covers TEXTURES, MATERIALS and SHADERS:
* ImphenziaPixPal_BaseColor.png
* ImphenziaPixPal_Emission.png
* ImphenziaPixPal_Attributes.png
* Blender Imphenzia PixPal Material
* ImphenziaPixPal_URP.mat (Unity Material)
* ImphenziaPixPal_URP.shadergraph (Unity Shader Graph)
* Imphenzia-PixPal.uasset (Unreal Engine Material)
* ImphenziaPixPal.tres (Godot Material)
!! CC0 License _DOES NOT_ cover the SHOWCASE SAMPLE ASSETS !!
The showcase sample assets are are NOT covered by the license.
The showcase sample assets are copyright by Imphenzia Pty Ltd.
You can purchase a license (very cheap) to use the low poly characters and
furniture which are included in larger asset packs at https://www.imphenzia.com
*** CONTENTS ******************************************************************
Textures\ImphenziaPixPal_BaseColor.png
- the texture used for base colors.
Textures\ImphenziaPixPal_Emission.png
- the texture used for emission.
Textures\ImphenziaPixPal_Attributes.png
- the texture used to control metallic, roughness and animation.
Blender\Imphenzia-PixPal.blend
- A Blender 4.3 file with the textures, material, and showcase sample assets.
Blender\Imphenzia-PixPal-PreBlender_4_2.blend
- A legacy blender file for earlier versions of blender before Bloom was removed and changed
to a compositor glare feature.
Game_Engines\Unity_Packages\Imphenzia_PixPal_Unity_6.unitypackage
- a Unity 6 package containing only the textures, and material with shader graph.
Game_Engines\Unity_Packages\Imphenzia_PixPal_Unity_6_WithShowcase.unitypackage
- a Unity 6 package containing textures, material, shader graph and showcase sample assets.
Game_Engines\Unity_Project\Imphenzia_PixPal_Unity_6_URP_Project.zip
- a Unity 6 URP project with textures, material, and showcase sample assets.
Game_Engines\Unreal_Engine_Project\Imphenzia_PixPal_UnrealEngine_5_5_1_Project.zip
- an Unreal Engine 5.5.1 project with textures, material, and showcase sample assets.
Game_Engines\Godot\Imphenzia_PixPal_Godot_4_3_Project.zip
- a Godot 4.3 project with textures, material, and showcase sample assets.
*** REFLECTIVE SURFACES (METAL & MIRROR) **************************************
The materials in the Blender file, the Unity project, the Unreal Engine
project and the Godot project have the correct texture settings, material and
shaders for texture quality, emission, to work.
Note that Unity URP and Godot do not support reflection as good as Blender and
Unreal Engine.
*** VERY IMPORTANT INFORMATION ************************************************
If you create your own materials, take the following into consideration:
!! USE NEAREST NEIGHBOR / CLOSEST / POINT FILTERING !!
If you use the textures in a game engine, make sure you set the filtering to
Nearest Neighbor or Closest (it should NOT be bilinear or bicubic - it smears
the textures since the colors are only one pixel in width).
!! DO NOT USE TEXTURE COMPRESSION !!
If you use compression on the textures in a game engine, the colors will be
incorrect. Disable any form of compression on the texture - it needs to be
pixel perfect.
!! DO NOT USE MIPMAPS !!
The pixel perfect textures are already as small as they can be so it is
advised to disable mipmapping, especially in Unreal Engine where Nanite
can create artifacts around edges of low poly objects.
!! USE WRAP / REPEAT - NOT CLAMP !!
Animations rely on UVs wrapping or repeating at the edges, otherwise the
animated colors will stop as time goes beyond one second.
*** VERSION HISTORY ***********************************************************
1.2 Updated projects to Blender 4.3, Unity 6.0, Unreal Engine 5.5.1, Godot 4.3
Added more sample assets (furniture, character, and car)
1.1 Added Godot 4.1 project (thanks Flynsarmy!)
Updated Unreal Engine project to Unreal Engine 5.3
Added emission strength parameter in game engine projects to control bloom.
Changed Unreal Engine texture disable mipmap which caused Nanite artifacts.
1.0 Initial Release
*** PORTS *********************************************************************
babylon.js by - user inteja
https://forum.babylonjs.com/t/imphenzia-pixpal-palette-texture-node-pbr-material-example/56066
You are welcome to port the Imphenzia PixPal palette textures, materials, and
shaders to any game engine or software.
!! You may also include some or all showcase sample assets in such ports but
you must then also include this readme.txt file !!
*** THANK YOU *****************************************************************
Please subscribe to my YouTube channel, https://www.youtube.com/imphenzia
Enjoy the rewards as a patron on https://www.patreon.com/imphenzia
Check out my low poly assets on https://www.imphenzia.com/assets
I Love it :)D
Pretttyyyyyy !!!
@inteja : for 8.0 release I would like to use your PG to demonstrate that bjs can run on webgl or webgpu with no change for the user. Are you ok with that?
@Deltakosh Sure! If you’re adding attributions/credits to the video, I think it best to attribute to Imphenzia as all I did was implement his assets and material.
cc @PirateJC (FYI for the WebGPU part)
This is so nice if I could use this in my own website 3d scenes.
But… am I the only one to see that this code here (both playgrounds referenced above at Babylon.js Playground and https://playground.babylonjs.com/#FBKO9Y#21) don’t run on the latest babylon.js in the playground?
If I switch the playground engine from 8.2.0 back to 7.54.2 then I does run perfectly.
Also, when I click to the material editor at https://nme.babylonjs.com/#1E76JR#11
then I get these errors:
17:59:38: Shader compilation error: FRAGMENT SHADER ERROR: 0:617: ‘,’ : syntax error
17:59:38: Shader compilation error: FRAGMENT SHADER ERROR: 0:617: ‘,’ : syntax error
So something changed in 8 that broke this?
Can anyone tell me what could be wrong? or am i looking at old code and is there updated code available somewhere ?
Yes, it’s the same problem than in:
Looks like that solved the shader problem indeed. I guess there is still a lot I’ll have to learn.
Maybe a little extra question.
To solve this problem i had to atach a float to an input of the PBR node, but there is mentioned something about an PR that was merged yesterday. Does that mean that the problem would correct itself automatically in a couple of days ?
Current release version is 8.2.0
The fix will be in place in the next release version.
The release version is always possible to check here - https://github.com/BabylonJS/Babylon.js/releases
A little follow up question here.
I tried to add a very simple default cube and plane to this scene.
The material here has a changing texture output for the flickering and the rotating UVs on the right side of the imphenzia pallette.
However… on my cube and plane I attach the same material and nothing moves on the texture. The 3D scene works fine, but on my objects… nothing moves.
Am I doing something wrong? I guessed that by default a plane and cube show the texture from (0,0) to (1,1) and therefore I should have seen the animation in the texture on my plane and cube faces too (since it animates in the shader?
The problem is that the default plane and cube don’t have UVs that target just the animated part of the texture. Take a look at the scene in wireframe and you’ll notice that the plane on the back wall has extra vertices and UVs on the right side that target the animated gradients.
So, it’s only the blue portion of the attributes texture that is animated i.e. UV texture coordinates need to be in the range 0.8,0.0 to 1.0,1.0 for the animation to work.
If you follow Imphenzia’s tutorials on how to use the textures and export those meshes from Blender, they should work fine. But using Babylon’s inbuilt meshes won’t produce the desired results, unless you use a mesh like a sphere with enough segments or a ground plane with enough subdivisions.
Strange. I get what you say but I thought that the default plane I added has uvs from (0,0) to (1,1) and therefore it does display the part of the texture that should rotate. It actually shows all of the texture as far as I can see but just not the animation. I’ll investigate further
The default plane (of 4 corner vertices and 2 triangles) does have UVs from 0.0, 0.0 to 1.0, 1.0 but that’s the issue. The shader uses the blue component of that attributes texture to only animate the UVs of faces that are in the range 0.8,0.0 to 1.0,1.0. So, for the default plane, the entire texture is shown on the plane but there’s no animation.
If in your example, you simply change the Plane to a Ground and increase the subdivisions to something like 10, you will see the animation because now there are a number of faces of the plane that are within the correct UV range.
Ok got it. My misunderstanding was that the whole texture was updated each frame in the shader and therefore I was expecting to see the change. I’ll retest in 5 days when I’m back from holiday. (And I’ll revisit the Imphenzia pixpal videos on youtube.) Am I right to see that shadows don’t work in this shader? (I see code in the playground to receive shadows but I guess that currently doesn’t do anything)
Shadows will work fine. I just haven’t played around with them enough to make them look good.
