Vehicle HTML

Vehicle Lua and HTML Homepage

Prerequisites

• Knowledge of HTML
• Knowledge of JavaScript
  • If you wish to make you page interactive this will be required. As long as you know any programming language(s) you should be fine, JavaScript is fairly simple.
• A Lua file in order to create the HTML page (and call JavaScript functions)
• A text editor.
  • Any will do but it is strongly advised to use a more advanced one than NotePad, a good free option is NotePad++.

How Vehicle HTML Works

For the most part just like a normal web page.

BeamNG has Chromium embedded, this allows HTML pages with JavaScript to be loaded in game and used as textures. All standard features of a normal HTML webpage are supported such as CSS and JavaScript. However these webpages do NOT have internet access, only locally stored files can be accessed (such as textures etc).

How to define a HTML texture

Editing the materials.cs

You will need to define a material inside your materials.cs file in order to create a HTML texture. This tells BeamNG what material you want your texture to map onto as well as other material information.

Here is an example from the ETK K vehicle.

singleton Material(etkc_screen)
{
    mapTo = "etkc_screen";
    diffuseMap[0] = "@etkc_screen";
    specularMap[0] = "vehicles/common/null.dds";
    diffuseColor[0] = "1 1 1 1";
    specularPower[0] = "32";
    useAnisotropic[0] = "1";
    castShadows = "1";
    translucent = "0";
    translucentBlendOp = "None";
    alphaTest = "0";
    alphaRef = "0";
    emissive[0] = "1";
    //cubemap = "global_cubemap_metalblurred";
    materialTag0 = "beamng"; materialTag1 = "vehicle";
};

So this will define that the texture "@etkc_screen" should be mapped onto the material "etkc_screen". The texture "@etkc_screen" will be defined within your Lua file. The material "etkc_screen" will be defined within your 3d model.

Editing the Lua file

Your Lua file will need to define the texture.

An example of this is below:

htmlTexture.create(screenMaterialName, htmlFilePath, textureWidth, textureHeight, textureFPS, 'automatic')

This section of code should be placed within the "onInit()" function within your Lua since it needs to create the texture when the vehicle is initialised. You can then either replace all of the parameters with strings containing the values you wish to use, or define variables of the same name containing those strings.

Parameter	Description
screenMaterialName	This will be the name of your screen, it should match the materials.cs "diffuseMap[0]" value that you set
htmlFilePath	This should be the file path to your HTML file
textureWidth	This will be the width of the texture that you wish to create.
textureHeight	This will be the height of the texture that you wish to create.
textureFPS	This will define how many frames per second to update the HTML page at. (Currently does nothing, FPS will be locked to 30fps)
'automatic'	Do not touch.

It is important that you do not set your HTML texture to be too high resolution. Higher resolutions will be more taxing on your system and may cause performance issues. You should remember that your HTML texture may only be taking up a very small percentage of the players screen, resolutions such as 512x256 are more than enough for most situations with lower values advisable.

Your resolution does not need to have the same aspect ratio as the surface you are mapping it onto, the pixels will be stretched to fit.

How to use JavaScript to make interactive displays

[Coming soon™]