Custom Materials for Materials Live Wallpaper

Materials that can be imported to Materials Live Wallpaper

Samples

• Colorful Circular Brush

  4 circles with red, green, blue and silver colors with a natural looking brush texture and visible edges.

  Generated using generate_circular_brush.py, generate_circular_colorful_base_ref.py and generate_circular_colorful_others.py scripts.

  Download 1024x1024, Download 2048x2048, Download 4096x4096

• Glitter

  Generated using generate_glitter.py script.

  512x512 is recommended for most screen resolutions. All glitter variations have 5 layers (4 additional layers), you can reduce them by setting the Max Allowed Additional Layers in the app settings if it runs slow or drains battery. Only glitter materials with black backgrounds are (almost) compatible with v0.1.

  Dark gray background and RGB & white glitters: Download 512x512, Download 1024x1024

  Gray background and RGB & white glitters: Download 512x512, Download 1024x1024

  Black background and RGB & white glitters: Download 512x512, Download 1024x1024

  Dark gray background and Reminimalism colors & white glitters: Download 512x512, Download 1024x1024

• Hologram Label

  The hologram label rainbow reflections.

  Generated using generate_hologram_label_main.py and generate_hologram_label_others.py scripts.

  This material has 5 layers (4 additional layers), the more layers you allow, the more complete the rainbow is going to be!

  Download 1024x1024, Download 2048x2048, Download 4096x4096

• Wave Pattern

  Wave brush pattern.

  Generated using generate_wave_pattern.py script.

  Try the lower resolutions too!

  Soft half-slope waves, 4px brush lines: Download 1024x1024, Download 2048x2048, Download 4096x4096

  Soft half-slope waves, 8px brush lines: Download 1024x1024, Download 2048x2048, Download 4096x4096

  1-slope waves, 4px brush lines: Download 1024x1024, Download 2048x2048, Download 4096x4096

  1-slope waves, 8px brush lines: Download 1024x1024, Download 2048x2048, Download 4096x4096

• Default Materials

  The samples that are included in the app.

  Download zip (4096x4096)

How to create a Custom Material

Create a zip file containing these optional files:

Base color texture a.k.a. Diffuse map

File name: base.<image-format>, for example base.png

An image file representing the base colors. Also known as diffuse map.

Default behavior when base texture is not included: Black texture.

Reflections color texture

File name: reflections.<image-format>, for example reflections.png

An image file representing the color (filter) of reflections in different points. Black color reflects no light, white reflects any light with max brightness, red only reflects the red hue of the lights. Make sure that the sum of base and reflections color at each point is less than or equal to white color.

Default behavior when reflections texture is not included: Black texture.

Normal texture

File name: normal.<image-format>, for example normal.png

An image file that represents the normal vector at each point. Normal vector shows what direction the surface is facing. The y axis is the phone's up direction, x is its right direction and z points to its front (screen) direction, same for Brush texture's x, y and z. Red represents x, Green represents y, Blue represents z. 0 value translates to -1, 128 or 127 to 0, and 255 to 1.

Default behavior when normal texture is not included: A texture filled with (128, 128, 255) or #8080FF (forward direction).

Shininess texture

File name: shininess.<image-format>, for example shininess.png

An image file that represents shininess, the more the shininess, the smaller the reflection radius/size is. This can be in grayscale format (1 byte per pixel).

Default behavior when shininess texture is not included: Black texture (0 value).

Brush texture

File name: brush.<image-format>, for example brush.png

An image file representing brush direction and magnitude at different points. The brush effect doesn't expand the reflection radius, it shrinks it in a specific direction, so try to use less shininess values in the brushed areas. Red represents x, Green represents y, Blue represents z. 0 translates to almost -1 (-1.003921569), 128 to exactly 0, and 255 to almost 1 (0.996078431). It is recommended to use 1 (= 128 - 127) as -1, and 255 (= 128 + 127) as 1.

Default behavior when brush texture is not included: A texture filled with (128, 128, 128) or #808080 (0 vector).

Note: If the brush vector at a point is defined as V, -V has the same effect as V because it's about brushing, so it can be applied both ways.

Brush Intensity texture

File name: brush_intensity.<image-format>, for example brush_intensity.png

An image file representing a number at each point to multiply the brush vector by it. This is used to have more precise brushes, by using more ranges in the brush texture, representing brush directions, and then reducing the brush vector sizes using this texture.

Default behavior when brush intensity texture is not included: A texture filled with (255, 255, 255) or #FFFFFF, or 255 or #FF grayscale value (1 coefficient).

As an example, see CircularBrush.zip located in DefaultMaterials.zip or one of ColorfulCircularBrush_<resolution>.zip, available in samples section and releases.

Depth and height textures

File names: depth.<image-format> and height.<image-format>

Depth represents depth at each point and height represents height. 0 for depth means on screen, 255 is max depth. 0 for height means on screen, 255 is max height. Depth and height intensities can be set in the config file. It is recommended to lower FrameWithParallaxEnabled for higher intensities, unless the edges are tiled and the intensity is low enough. If both depth and height are present, their final values will add up.

Default behavior when either of them are not included: A texture filled with 0 (black).

The FrameWithParallaxDisabled setting is used from the config if neither of the depth/height textures are in the zip for any layer.

Config

File name: config.json

There are these optional fields to set:

• TargetVersion: The version name of the target version.
• Pixelated<texture-name>: Whether the pixels of a low res texture should be rendered as squares. This is the full list:
  • PixelatedBase
  • PixelatedReflections
  • PixelatedNormal
  • PixelatedShininess
  • PixelatedBrush
  • PixelatedBrushIntensity
• NormalizeNormal: Whether to normalize the normal map in the shader.
• DepthIntensity: Specifies how much movement deep points should have.
• HeightIntensity: Specifies how much movement high points should have.
• FrameWithParallaxEnabled: Specifies how much crop should be applied when there is the parallax effect.
  • For example 0.9 means 90% of the texture shown when looked at directly. 1.0 means no crop when looked at directly.
• FrameWithParallaxDisabled: Like FrameWithParallaxEnabled except when there is no parallax effect.

See sample_config.json as an example. Note that the name of this file in the zip should exactly be config.json. The values in the sample config file are the default values for the current version.

Resolutions and aspect ratios

Please use 1:1 aspect ratio (width=height) in all of the images, this is to support both portrait and landscape view without rotating the textures 90 degrees. Images can have different resolutions, they will be stretched to match the square, it is recommended to use resolutions that are powers of 2, for example 2048x2048. If the result is not intended to look pixelated, 2048x2048 is enough for 1080p displays, and almost fine for 1440p, 4096x4096 is enough for 4K and 1440p, 1024x1024 is almost fine for 720p.

Layers

Additional layers of each texture can be added to create global illumination or other effects. Maximum allowed number of additional layers is 4, and the default is 2 from v0.4. Each additional layer's file is named like this (1 ≤ number ≤ 4): <texture-name><layer-number>.<image-format>

For example: base.png, reflections.png, base1.png, reflections1.png, normal1.png, shininess1.png, reflections2.png, brush2.png, brush_intensity2.png

Avoid bright base and reflections for the additional layers to prevent an overexposed look. The blending mode used is additive, that means the resulting color in a pixel is the sum of all the colors in all layers in that pixel.

Users might allow a limited number of additional layers or turn them off, so prioritize on what to put in the main layer and the additional layers. The main layer (rendered from the files without numbers) is always shown. For additional layers, the less the layer's number, the more likely it's going to be shown.

Where to share custom materials

You can create an issue to include links to pages here.

Changelog

• 1.0:

  • Added depth and height texture support. (parallax)
  • Added the following config.json options:
    • DepthIntensity
    • HeightIntensity
    • FrameWithParallaxEnabled
    • FrameWithParallaxDisabled

• 0.2:

  • Added layers support.
  • Not including the base or reflections textures results in a behavior like the missing ones are black (don't exist).

• 0.1:

  • Default base and reflections textures are gray.