Björn Ritzl 6 달 전
부모
커밋
82e0c792eb
3개의 변경된 파일14개의 추가작업 그리고 11개의 파일을 삭제
  1. 3 0
      .wordlist.txt
  2. 6 6
      docs/en/tutorials/shadertoy.md
  3. 5 5
      docs/en/tutorials/texture-scrolling.md

+ 3 - 0
.wordlist.txt

@@ -10,10 +10,13 @@ TCP
 RPG
 UHD
 NPC
+rgb
+rgba
 github
 https
 Lua
 moltenvk
+GLSL
 OpenGL
 OpenGLES
 vulkan

+ 6 - 6
docs/en/tutorials/shadertoy.md

@@ -29,10 +29,10 @@ Blender is a free, open-source 3D software which can be downloaded from [blender
 
 ![quad in Blender](images/shadertoy/quad_blender.png)
 
-1. Export the model as a *Collada* file called *quad.dae* and drag it into a new Defold project.
+1. Export the model as a *Collada* file called *`quad.dae`* and drag it into a new Defold project.
 2. Open your "main.collection" file in Defold and create a new game object "star-nest".
 3. Add a *Model* component to "star-nest".
-4. Set the *Mesh* property to the *quad.dae* file.
+4. Set the *Mesh* property to the *`quad.dae`* file.
 5. The model is small (2⨉2 units) so we need to scale the "star-nest" game object to a reasonable size. 600⨉600 is a nice large size so set the X and Y scale to 300.
 
 The model should appear in the scene editor, but it is rendered all black. That is because it has no material set yet:
@@ -41,7 +41,7 @@ The model should appear in the scene editor, but it is rendered all black. That
 
 ## Creating the material
 
-Create a new material file *star-nest.material*, a vertex shader program *star-nest.vp* and a fragment shader program *star-nest.fp*:
+Create a new material file *`star-nest.material`*, a vertex shader program *`star-nest.vp`* and a fragment shader program *`star-nest.fp`*:
 
 1. Open *star-nest.material*.
 2. Set the *Vertex Program* to `star-nest.vp`.
@@ -52,7 +52,7 @@ Create a new material file *star-nest.material*, a vertex shader program *star-n
 
     ![material](images/shadertoy/material.png)
 
-7. Open the vertex shader program file *star-nest.vp*. It should contain the following code. Leave the code as is.
+7. Open the vertex shader program file *`star-nest.vp`*. It should contain the following code. Leave the code as is.
 
     ```glsl
     // star-nest.vp
@@ -71,7 +71,7 @@ Create a new material file *star-nest.material*, a vertex shader program *star-n
     }
     ```
 
-8. Open the fragment shader program file *star-nest.fp* and modify the code so the fragment color is set based on the X and Y coordinates of the UV coordinates (`var_texcoord0`). We do this to make sure we have the model set up correctly:
+8. Open the fragment shader program file *`star-nest.fp`* and modify the code so the fragment color is set based on the X and Y coordinates of the UV coordinates (`var_texcoord0`). We do this to make sure we have the model set up correctly:
 
     ```glsl
     // star-nest.fp
@@ -231,7 +231,7 @@ void main()
 
 The final step is to feed a time value to the shader:
 
-1. Create a new script file *star-nest.script*.
+1. Create a new script file *`star-nest.script`*.
 2. Enter the following code:
 
 ```lua

+ 5 - 5
docs/en/tutorials/texture-scrolling.md

@@ -18,18 +18,18 @@ The project is setup like this:
 
 * One subdivided 3D plane (.dae) that will be used to display the scrolling texture.
 * One model component with the 3D plane (.dae file) assigned.
-* Two 64x64 texture images (water_bg.png and water_wave.png) created to seamlessly tile are assigned in the .model properties.
+* Two 64x64 texture images (`water_bg.png` and `water_wave.png`) created to seamlessly tile are assigned in the .model properties.
 * One shader (Material + Vertex Program + Fragment Program) that is assigned to the plane model.
 * One constant set in materials and the shader.
 * One script component attached to the model game object to start the animation loop.
 
 ![](images/texture-scrolling/model_setup.png)
 
-_Note: water_bg is assigned to tex0 slot and water_wave is set to tex1 slot. Two sampler slots are assigned in material sampler properties shown below._
+_Note: `water_bg` is assigned to `tex0` slot and `water_wave` is set to `tex1` slot. Two sampler slots are assigned in material sampler properties shown below._
 
 ![](images/texture-scrolling/material_setup.png)
 
-_Currently tex1 will be the texture that will be scrolling so Wrap U & V are set to Repeat._
+_Currently `tex1` will be the texture that will be scrolling so Wrap U & V are set to Repeat._
 
 That is the basic setup and now we can move on to the `water_scroll.vp` (vertex) and `water_scroll.fp` (fragment) programs. You can see in the image above these are set to the material.
 
@@ -62,7 +62,7 @@ void main()
 }
 ```
 
-The model supplies the attribute `texcoord0` which is our texture UV coordinates. We declare our vec4 uniform named animation_time and we also have two vec2 varying texcoords 0 and 1 which we pass to the fragment program after we assign them the attribute UV coordinates `texcoord0` in `void main()`. As you can see `var_texcoord1` is different because this one we are offsetting before it is sent to the fragment program. Assign a vec2 so that we can `animation_time` to the x and y separately if we want. In this case we only take `texcoord0.x` and subtract our constant `animation_time.x` which when animated will offset in the negative U axis (horizontal left), we set `texcoord0.y` to keep its attribute position. EZ PZ!
+The model supplies the attribute `texcoord0` which is our texture UV coordinates. We declare our vec4 uniform named animation_time and we also have two `vec2` varying `var_texcoord0` and `var_texcoord1` which we pass to the fragment program after we assign them the attribute UV coordinates `texcoord0` in `void main()`. As you can see `var_texcoord1` is different because this one we are offsetting before it is sent to the fragment program. Assign a `vec2` so that we can `animation_time` to the x and y separately if we want. In this case we only take `texcoord0.x` and subtract our constant `animation_time.x` which when animated will offset in the negative U axis (horizontal left), we set `texcoord0.y` to keep its attribute position.
 
 
 ```glsl
@@ -83,7 +83,7 @@ void main()
 }
 ```
 
-Now to the fragment program, we have a simple setup. Two "in" varying vec2’s that we sent from the vertex program `var_textcoord0` and `var_texcoord1` and then we supply uniforms for the sampler textures we set in our model and material they are named `tex0` and `tex1`. Then in `void main()` we create vector 4’s to assign to our textures using `texture2d()`, the images are in RGBA (red,green,blue,alpha) channel format. We assign sampler name and then the texture coordinates we want them to use. As you see in the image above "water_waves" has `var_texcoord1` assigned. this is the texture we are animating/scrolling and `var_texcoord0` assigned to water_bg we left as is. For the global reserved variable `gl_FragColor` this is where pixel colors are assigned with the same `vec4(r,g,b,a)` format. We want to combine the 2 textures together so we use addition to mix the rgb channels of each texture together, also we are not using the textures alpha channel so we assign a float value of 1.0 which equals full opacity.
+Now to the fragment program, we have a simple setup. Two "in" varying vec2’s that we sent from the vertex program `var_textcoord0` and `var_texcoord1` and then we supply uniforms for the sampler textures we set in our model and material they are named `tex0` and `tex1`. Then in `void main()` we create vector 4’s to assign to our textures using `texture2d()`, the images are in RGBA (red,green,blue,alpha) channel format. We assign sampler name and then the texture coordinates we want them to use. As you see in the image above "water_waves" has `var_texcoord1` assigned. this is the texture we are animating/scrolling and `var_texcoord0` assigned to `water_bg` we left as is. For the global reserved variable `gl_FragColor` this is where pixel colors are assigned with the same `vec4(r,g,b,a)` format. We want to combine the 2 textures together so we use addition to mix the rgb channels of each texture together, also we are not using the textures alpha channel so we assign a float value of 1.0 which equals full opacity.
 
 
 ## Shader animation script