Texture Mapping in GLSL [Shaders Monthly #5]

In Episode #5 of Shaders Monthly, we talk about texture mapping and how it can be implemented in GLSL.
1) Textured Triangle
GSN Composer: www.gsn-lib.org/index.html#pr...
C++: www.mathematik.uni-marburg.de...
Java: www.mathematik.uni-marburg.de...
2) Textured Cube
GSN Composer: www.gsn-lib.org/index.html#pr...
C++: www.mathematik.uni-marburg.de...
Java: www.mathematik.uni-marburg.de...
Documentation for the shader plugin node of the GSN Composer:
gsn-lib.org/docs/nodes/Shader...
Additional lecture slides:
www.uni-marburg.de/en/fb12/re...
00:00 What are Textures?
03:19 Textured Triangle
10:19 Texture Wrapping
12:18 Textured Cube
14:58 Phong Shading with Textures
Stone Demon 3D Model (CC0): sketchfab.com/3d-models/stone...
Music: Left U Into - Otis McDonald (KZbin Audio Library)

[@teamavatar6460]

great stuff!

[@mcpegamerz949]

Thanks!

[@wewakemartin]

Thanks for making these tutorials. Very helpful to visualise whats going on in the background of games and 3d animation software. I tried mapping a texture on a plane object and the texture stretches and distorts when I increase the segments number to more than one. Why is this happening?

[@gsn-composer]

Thank you for your comment. In which application? Blender? GSN Composer? In the GSN Composer, I have tried to replace the triangle with a plane (3D.Compute.Generate.Plane) in the provided example ( www.gsn-lib.org/index.html#projectName=ShadersMonthly05&graphName=TexturedTriangle ) and it is possible to increase the number of segments without any problems. In general, you can debug the texture coordinates by assigning them to the output color (see 6:19 min:sec in the video). Or if you do not have access to the shader, you can simply assign a UV color grid as a texture for debugging. In the GSN Composer, a color grid image can be generated with the ImageProcessing.Compute.Generate.ColorGrid node. For Blender, you can follow this tutorial: kzbin.info/www/bejne/m6LdhZSAedWhmc0 Does this answer your question?

[@wewakemartin]

@@gsn-composer hello, thank you for your response. :) I'm using one of the examples on GSN composer. I have increased the segmentX of a Cube to 2, effectively increasing number of faces to 10. Then I used texCoordEdit node to map different areas of labelled colorGrid texture to different faces of the cube using count. However, the texture is distorting on certain areas. What am I doing wrong? Please advise. GSN Composer Graph: #projectName=CubeMappingTest&graphName=CubeMapping

[@gsn-composer]

​@@wewakemartin Okay, now I get it. Yes, in the second example, when you increase the segments of the cube, the texture coordinates are messed up by the 3D.Compute.Mesh.TexCoordEdit node. You can either bypass this node by connecting the mesh from the Cube node directly to the Shader node, or you can "reset" the TexCoordEdit node by selecting its "offset" output and deleting the text. Otherwise, the TexCoordEdit node assigns offsets to the initial texture coordinates and they end up at wrong locations that cause this distortion.

[@wewakemartin]

@@gsn-composer I see, thank you, ill try that out. I was hoping to create some sort of animated mosaic by sampling random parts of a single texture image onto different segments using shaders.. but if they are going to stretch/distort, I will have to figure out another way..

[@gsn-composer]

​@@wewakemartin I created this “mosaic“ example for you: www.gsn-lib.org/index.html#projectName=ForumShadersMonthly05&graphName=RandomTextureLocations Distortion can be avoided by using the same similarity transformation for the texture coordinates for all vertices of a quad (or triangle).

[@unveil7762]

This isi so cool!! is there a way to out put the result on an external screen? have a quad mapper as web app can be pritty handy!!

[@gsn-composer]

It is not possible to have two synchronized instances of the GSN Composer in two different browser tabs, one running on an external screen and the other on the primary screen. However, it is possible to view the output in full screen mode. In the GSN Composer interface, you can use the "View Control" panel to set the output of any node as the background. But you will still see some of the interface. Currently there are two ways to get a "clean" full screen mode: 1) If you make the project "public", you will find a "GalleryLink" in the project dialog (next to the graph name). If you append "&fs=1" to this link, you will get a full screen output, see www.gsn-lib.org/docs/gallery.php To switch the browser to full screen mode, press "F11" on Windows. 2) In the project dialog, use the "Export as Website" button. If you are familiar with basic CSS, you will be able to place/scale the output as you like on your website.