Browse Source

Normalize texture coordinates in [0,1] to avoid seam mark (#3936)

Beuc 4 years ago
parent
commit
77f13f16a5
1 changed files with 14 additions and 10 deletions
  1. 14 10
      tutorials/shading/your_first_shader/your_first_spatial_shader.rst

+ 14 - 10
tutorials/shading/your_first_shader/your_first_spatial_shader.rst

@@ -169,13 +169,15 @@ Once you set it up and should look like this.
 
 
 Now, access the noise texture using the ``texture()`` function. ``texture()`` takes a texture as the first
 Now, access the noise texture using the ``texture()`` function. ``texture()`` takes a texture as the first
 argument and a ``vec2`` for the position on the texture as the second argument. We use the ``x`` and ``z``
 argument and a ``vec2`` for the position on the texture as the second argument. We use the ``x`` and ``z``
-channels of ``VERTEX`` to determine where on the texture to look up. ``texture()`` returns a ``vec4`` of the
+channels of ``VERTEX`` to determine where on the texture to look up. Note that the PlaneMesh coordinates are
+within the [-1,1] range (for a size of 2), while the texture coordinates are within [0,1], so to normalize
+we divide by the size of the PlaneMesh 2.0 and add 0.5. ``texture()`` returns a ``vec4`` of the
 ``r, g, b, a`` channels at the position. Since the noise texture is grayscale, all of the values are the same,
 ``r, g, b, a`` channels at the position. Since the noise texture is grayscale, all of the values are the same,
 so we can use any one of the channels as the height. In this case we'll use the ``r``, or ``x`` channel.
 so we can use any one of the channels as the height. In this case we'll use the ``r``, or ``x`` channel.
 
 
 .. code-block:: glsl
 .. code-block:: glsl
 
 
-  float height = texture(noise, VERTEX.xz / 2.0 ).x; //divide by the size of the PlaneMesh
+  float height = texture(noise, VERTEX.xz / 2.0 + 0.5).x;
   VERTEX.y += height;
   VERTEX.y += height;
 
 
 Note: ``xyzw`` is the same as ``rgba`` in GLSL, so instead of ``texture().x`` above, we could use ``texture().r``.
 Note: ``xyzw`` is the same as ``rgba`` in GLSL, so instead of ``texture().x`` above, we could use ``texture().r``.
@@ -289,16 +291,18 @@ Lastly, in order to ensure that we are reading from the same places on the noise
 texture, we are going to pass the ``VERTEX.xz`` position from the ``vertex()`` function to the ``fragment()``
 texture, we are going to pass the ``VERTEX.xz`` position from the ``vertex()`` function to the ``fragment()``
 function. We do that with varyings.
 function. We do that with varyings.
 
 
-Above the ``vertex()`` define a ``vec2`` called ``vertex_position``. And inside the ``vertex()`` function
-assign ``VERTEX.xz`` to ``vertex_position``.
+Above the ``vertex()`` define a ``vec2`` called ``tex_position``. And inside the ``vertex()`` function
+assign ``VERTEX.xz`` to ``tex_position``.
 
 
 .. code-block:: glsl
 .. code-block:: glsl
 
 
-  varying vec2 vertex_position;
+  varying vec2 tex_position;
 
 
   void vertex() {
   void vertex() {
     ...
     ...
-    vertex_position = VERTEX.xz / 2.0;
+    tex_position = VERTEX.xz / 2.0 + 0.5;
+    float height = texture(noise, tex_position).x;
+    ...
   }
   }
 
 
 And now we can access ``vertex_position`` from the ``fragment()`` function.
 And now we can access ``vertex_position`` from the ``fragment()`` function.
@@ -328,16 +332,16 @@ most of the difficult stuff for you.
   uniform sampler2D noise;
   uniform sampler2D noise;
   uniform sampler2D normalmap;
   uniform sampler2D normalmap;
 
 
-  varying vec2 vertex_position;
+  varying vec2 tex_position;
 
 
   void vertex() {
   void vertex() {
-    vertex_position = VERTEX.xz / 2.0;
-    float height = texture(noise, vertex_position).x;
+    tex_position = VERTEX.xz / 2.0 + 0.5;
+    float height = texture(noise, tex_position).x;
     VERTEX.y += height * height_scale;
     VERTEX.y += height * height_scale;
   }
   }
 
 
   void fragment() {
   void fragment() {
-    NORMALMAP = texture(normalmap, vertex_position).xyz;
+    NORMALMAP = texture(normalmap, tex_position).xyz;
   }
   }
 
 
 That is everything for this part. Hopefully, you now understand the basics of vertex
 That is everything for this part. Hopefully, you now understand the basics of vertex