It seems like you have opened this file by double-clicking on it. In order to test your build in a browser you need to load this file from a web server. You can either upload this file and the rest of the files from a Defold HTML5 bundle to a web hosting service OR host them using a local web server on your home network.
In this example, we create a new material for 3D models in which we convert vertex coordinates to screenspace to get a special effect. It may be called “surface fill”, “screenspace fill” and is used, most often in combination with outlines, to highlight objects in 3D games or indicate their status.
We added two game objects and two models to which we assigned our new screenspace material. The material is based on unlit, but in it:
vertex shader: we added a conversion of the clip space position to the screen position to pass that value to the fragment shader.
fragment shader: we added sampling the color based on screenspace coordinates and blending into the final output color.
material properties: we added a new sampler to set a second texture to be used as a pattern, and user-defined uniforms to control the fragment shader.
The last important thing is to pass the screen size to the shader to adjust the aspect ratio:
To activate a perspective camera and to have camera controls, we added the orbit_camera.script script from the Orbit Camera (3D) example.
The shaders are written in GLSL 1.40, which is available from Defold 1.9.2. The model used in this example is from Kenney’s Prototype Pack, licensed under CC0.
Scripts
screenspace.script
screenspace.vp
screenspace.fp
If you want to play with these examples, you can get the project on Github.
Do you want to see more examples? Why not write a few yourself and submit a pull request? We love contributions.