Unreal Engine 4 Browser Material Editor

Latest: UE4 Materia - V0.81 Hotfix.


UE4 Materia is a browser based tool that allows you to show off and preview Materials from UE4. Simply select your nodes in UE4, copy and paste, and hit Create Material!
Above in the top right corner there is a link that you can use to show your material with others.

V0.81 Hotfix - See:

Hey there guys!

So over the last two days I’ve currently been working on a small tool that I hope will benefit the community. From looking on answers, I’ve found a lot of people posting small screenshots of large materials and with these screenshots it’s been extremely difficult for people viewing to understand and interpret these materials from the screenshots.

In steps - Browsers, Javascript and a whole lot of awesome.
I’ve been developing a parsing tool, that interprets the copy and paste code generated by nodes to create material nodes on a graph.


The system as it stands creates nodes, understands which type and creates all the nodes based on the positions found within the graph. I’m currently working on the bezier curve system which will be used to connect each pin to another.

Plans for the future:
1 - Create a database system that will temporarily store a material and generate a link to allow people to share materials with others.
2 - Split view: The original material on the left, and the changes on the right. Users will be able to edit a material and view their changes. An example use of this is if you are trying to teach someone what setup is correct, you can make changes and pass the link to the student - showing them the correct way of setting up the material for their needs.
3 - As this is a browser based system, the possible creation of materials on the go. This system is based on jQuery and allows for mobile support. Meaning you can create a material on public transport if you so wish to - the only issue here is debugging, to make sure that Unreal ‘likes’ your new material. You will need UE4 to test it.

Hope you guys like it!
I will continue to post updates about it here. Any suggestions on what you guys will like to see - I’d be more than happy to try and add them. And I hope you guys like it!

  • Scott Baker.

That is pretty awesome and will surely benefit a lot of people! Keep up the good work!

Nice. A gist for materials is a fantastic idea. Now that HTML5 exporting is getting good I wonder how feasible it is to use existing code? Probably to heavy to use… just thinking out loud :slight_smile:

Fantastic idea Sythen! Keep going on this, it could benefit a lot of people. You should apply for a little Epic grant money to fund the endeavor :wink:

Wow, this is a really good idea. Thank you.

@Bino: It would be interesting, if there was a way to import textures, on-the-fly with a UE4 HTML5 Export. We could technically create a real time approximate of how the material looks - that would be very interesting.

Thanks guys! Just another little update. Lines are now correctly drawn between each node, added some math to correctly calculate the bezier curves between each (can still do with a bit more work). :slight_smile:
Also just noticed - lines flow under the nodes in the Material Editor. I will fix this for the next screenshot :stuck_out_tongue:

Fantastic, good job!

I present to you the first alpha release!
This is very buggy. If you can let me know what nodes break for you, that’d be awesome!

Stuff I know about already:
clamp - Fixed
StaticSwitchParameter - Fixed
StaticSwitch - Fixed
ComponentMasks - Fixed
VertexColor - Fixed
TextureObjectParameter - Fixed
Power - Fixed
OneMinus - Fixed
… I should probably get a table up somewhere of nodes that are to be done and to be fixed - This is going to be a long list.

(All of which will be updated soon!)

Let me know what you guys think!
Scott Baker.

You are a wizard.

Thank you :slight_smile:

This is a great tool, it will be awesome to merge with which work with blueprint code (normal nodes) but not with material.

[SIZE=1][SIZE=2]Version 0.8 Release Notes:
Added support for SHARED MATERIALS - on submission of a material, you will receive a link that you can share to others.
Added example material (in case you are on a tablet/mobile and still want to see how Materia works - click the Preview Material link on the website.)
Improved a whole selection of nodes. [/SIZE][/SIZE]clamp, StaticSwitchParameter, StaticSwitch, ComponentMasks, VertexColor, TextureObjectParameter, Power, OneMinus.

Known issues:
TextureSampleParameter2D’s add to many output pins.

As always, I hope you guys like it :slight_smile:

Dude, you are awesome!

What the… I’m a bit late to the party, but holy **** Scott! This looks incredible, thank you so much!! :smiley:

@Luos: Thank you dude! :smiley:

@DotCam: No problem dude, just my little bit to assist in awesome game development. :slight_smile:

V0.81 Hotfix
In the previous release as a result of adding the database system, the second parser (used for displaying the nodes on a link) was basically half thrown together.
Today I spent some time to sit down and completely rewrite both parsers. UE4 Materia now has a good chunk of code removed, and now runs 20fps faster in your browser viewport.

Rotators, Panners, BumpOffset, Sine.

Hopefully things should run smoother for everyone now :slight_smile:

Also to test out the system, I went a little crazy. Here’s a material with 91 nodes:[/SIZE][SIZE=2]


This is a great tool, nice work!! One thing that I think would be a great addition is an option to browse materials that have already been submitted. Maybe offer a way to name the material and then just display them all in a big list.

Already working on it! Materials do have names, hits, likes and author values. I just need to develop the page to show all that content. :slight_smile: Thanks for the suggestion!

I think he’s right. This something Epic seriously might want to invest in. This could really help the community.

This is indeed OVER 9000! You’re so going to help me out with this mate! I hope Epic spotlights you asap :smiley: