[![Image from Gyazo](https://i.gyazo.com/e0fd6adb57097f138c70f0a21c3ebc00.gif)](https://gyazo.com/e0fd6adb57097f138c70f0a21c3ebc00)

http://glslsandbox.com/e#57356

シンプレックスノイズとは、パーリンノイズの改良版アルゴリズム。

- https://github.com/ashima/webgl-noise/blob/master/src/noise2D.glsl
- https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl

cf.
- https://thebookofshaders.com/11/?lan=jp
- [WebGLでSimplex NoiseのGLSLを使ってグラフィックパターンを生成する](https://qiita.com/yuichiroharai/items/1eaf4ce7e542b11da9ac)

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;


vec3 mod289(vec3 x) {
	return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
	return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
	return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r)
{
	return 1.79284291400159 - 0.85373472095314 * r;
}

float snoise(vec3 v){ 
    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

    // First corner
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 =   v - i + dot(i, C.xxx) ;

    // Other corners
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );

    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
    //   x1 = x0 - i1  + 1.0 * C.xxx;
    //   x2 = x0 - i2  + 2.0 * C.xxx;
    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
    vec3 x1 = x0 - i1 + C.xxx;
    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y

    // Permutations
    i = mod289(i); 
    vec4 p = permute( permute( permute( 
                i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
            + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
            + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

    // Gradients: 7x7 points over a square, mapped onto an octahedron.
    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
    float n_ = 0.142857142857; // 1.0/7.0
    vec3  ns = n_ * D.wyz - D.xzx;

    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)

    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);

    vec4 b0 = vec4( x.xy, y.xy );
    vec4 b1 = vec4( x.zw, y.zw );

    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
    vec4 s0 = floor(b0)*2.0 + 1.0;
    vec4 s1 = floor(b1)*2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));

    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

    vec3 p0 = vec3(a0.xy,h.x);
    vec3 p1 = vec3(a0.zw,h.y);
    vec3 p2 = vec3(a1.xy,h.z);
    vec3 p3 = vec3(a1.zw,h.w);

    //Normalise gradients
    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;

    // Mix final noise value
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
                                dot(p2,x2), dot(p3,x3) ) );
}

void main() {
	vec2 st = gl_FragCoord.xy/resolution.xy;
	vec2 pos = vec2(st*5.0);
	float n = snoise(vec3(pos, time));
	gl_FragColor = vec4(vec3(n+sin(time), n, n),1.0);
}

http://glslsandbox.com/e#57199

cf. https://thebookofshaders.com/10/?lan=jp

## TruchetPattern

https://en.wikipedia.org/wiki/Truchet_tiles

https://www.google.com/search?q=truchet&source=lnms&tbm=isch&sa=X&ved=0ahUKEwi6z7zQv7vkAhW0IaYKHSvXCT0Q_AUIEigB&biw=1320&bih=515

## Diagonal

cf. https://10print.org/

```
color = smoothstep(tile.x-0.1,tile.x,tile.y)-
        smoothstep(tile.x,tile.x+0.1,tile.y);
```

これも同じ

```
color = smoothstep(tile.y-0.1,tile.y,tile.x)-
        smoothstep(tile.y,tile.y+0.1,tile.x);
```

[![Image from Gyazo](https://i.gyazo.com/d8853ff6c9a7d6baf7de0ee329c9f78c.png)](https://gyazo.com/d8853ff6c9a7d6baf7de0ee329c9f78c)

動かしてみる

```
float offset(in float _value) {
    return sin(time)*_value;
}

vec2 truchetPattern(in vec2 _st, in float _index){
    _index = fract(((_index-0.5)*2.0));
    if (_index + offset(0.25) > 0.75) {
        _st = vec2(1.0) - _st;
    } else if (_index + offset(0.25) > 0.5) {
        _st = vec2(1.0-_st.x,_st.y);
    } else if (_index + offset(0.25) > 0.25) {
        _st = 1.0-vec2(1.0-_st.x,_st.y);
    }
    return _st;
}
```

[![Image from Gyazo](https://i.gyazo.com/7e3ee302a48cb5b21fec94b6412baa22.gif)](https://gyazo.com/7e3ee302a48cb5b21fec94b6412baa22)


## Quarter-circles

```
color = (step(length(tile),0.6) -
        step(length(tile),0.4) ) +
        (step(length(tile-vec2(1.)),0.6) -
        step(length(tile-vec2(1.)),0.4) );
```

[![Image from Gyazo](https://i.gyazo.com/b294303e4277eb48e84319a68be37720.png)](https://gyazo.com/b294303e4277eb48e84319a68be37720)

## Contrasting triangles

```
color = step(tile.x,tile.y);
```

[![Image from Gyazo](https://i.gyazo.com/d6532258db8658dfffede60b5b9620f8.png)](https://gyazo.com/d6532258db8658dfffede60b5b9620f8)

// Author @patriciogv - 2015
// Title: Truchet - 10 print

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265358979323846

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float random (in vec2 _st) {
    return fract(sin(dot(_st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
}

vec2 truchetPattern(in vec2 _st, in float _index){
    _index = fract(((_index-0.5)*2.0));
    if (_index > 0.75) {
        _st = vec2(1.0) - _st;
    } else if (_index > 0.5) {
        _st = vec2(1.0-_st.x,_st.y);
    } else if (_index > 0.25) {
        _st = 1.0-vec2(1.0-_st.x,_st.y);
    }
    return _st;
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st *= 10.0;
    // st = (st-vec2(5.0))*(abs(sin(u_time*0.2))*5.);
    // st.x += u_time*3.0;

    vec2 ipos = floor(st);  // integer
    vec2 fpos = fract(st);  // fraction

    vec2 tile = truchetPattern(fpos, random( ipos ));

    float color = 0.0;

    // Maze
    color = smoothstep(tile.y-0.1,tile.y,tile.x)-
            smoothstep(tile.y,tile.y+0.1,tile.x);

    // Circles
    // color = (step(length(tile),0.6) -
    //          step(length(tile),0.4) ) +
    //         (step(length(tile-vec2(1.)),0.6) -
    //          step(length(tile-vec2(1.)),0.4) );

    // Truchet (2 triangles)
    // color = step(tile.x,tile.y);

    gl_FragColor = vec4(vec3(color),1.0);
}

## ランダム関数

```
float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
}
```

cf. [ランダムな値を返す関数 on GLSL](https://qiita.com/shimacpyon/items/d15dee44a0b8b3883f76)

## シンプルなノイズ

```
vec3 color = vec3(random(st));
```

[![Image from Gyazo](https://i.gyazo.com/5496d4f41a3e94865d65dc268c1b2829.png)](https://gyazo.com/5496d4f41a3e94865d65dc268c1b2829)


## 分割ノイズ

空間座標を10倍したあとに、座標を整数部分と小数部分に分離。整数部分でランダム値を取得することで10x10のノイズができる。

```
st *= 10.0;
vec2 ipos = floor(st);
vec3 color = vec3(random( ipos ));
```

[![Image from Gyazo](https://i.gyazo.com/e60d04519827c4eff33a20be6431c99d.png)](https://gyazo.com/e60d04519827c4eff33a20be6431c99d)

ちょっと面白かったので  
http://glslsandbox.com/e#57196.0

```
float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(sin(time),cos(time))))*
        0.5);
}
```

[![Image from Gyazo](https://i.gyazo.com/2196b066a8a2e6cbd15dc4a87a6e0c63.gif)](https://gyazo.com/2196b066a8a2e6cbd15dc4a87a6e0c63)

cf. https://thebookofshaders.com/10/?lan=jp

// Author @patriciogv - 2015
// Title: Mosaic

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    st *= 10.0; // Scale the coordinate system by 10
    vec2 ipos = floor(st);  // get the integer coords
    vec2 fpos = fract(st);  // get the fractional coords
    
    vec3 color = vec3(random(st));

    // Assign a random value based on the integer coord
    // color = vec3(random( ipos ));

    // Uncomment to see the subdivided grid
    // color = vec3(fpos,0.0);

    gl_FragColor = vec4(color,1.0);
}

GLSLで拡大縮小

<a href="https://www.codecogs.com/eqnedit.php?latex=\begin{bmatrix}&space;S_{x},0,0&space;\\&space;0,S_{y},0&space;\\&space;0,0,S_{z}&space;\end{bmatrix}&space;\begin{bmatrix}&space;x&space;\\&space;y&space;\\&space;z&space;\end{bmatrix}&space;=&space;\begin{bmatrix}&space;S_{x}&space;\ast&space;x&space;\\&space;S_{y}&space;\ast&space;y&space;\\&space;S_{z}&space;\ast&space;z&space;\end{bmatrix}" target="_blank"><img src="https://latex.codecogs.com/gif.latex?\begin{bmatrix}&space;S_{x},0,0&space;\\&space;0,S_{y},0&space;\\&space;0,0,S_{z}&space;\end{bmatrix}&space;\begin{bmatrix}&space;x&space;\\&space;y&space;\\&space;z&space;\end{bmatrix}&space;=&space;\begin{bmatrix}&space;S_{x}&space;\ast&space;x&space;\\&space;S_{y}&space;\ast&space;y&space;\\&space;S_{z}&space;\ast&space;z&space;\end{bmatrix}" title="\begin{bmatrix} S_{x},0,0 \\ 0,S_{y},0 \\ 0,0,S_{z} \end{bmatrix} \begin{bmatrix} x \\ y \\ z \end{bmatrix} = \begin{bmatrix} S_{x} \ast x \\ S_{y} \ast y \\ S_{z} \ast z \end{bmatrix}" /></a>

cf.
- https://thebookofshaders.com/08/?lan=jp
- http://www.opengl-tutorial.org/jp/beginners-tutorials/tutorial-3-matrices/

mat2 scale(vec2 _scale){
    return mat2(_scale.x,0.0,
                0.0,_scale.y);
}

mat3 scale(vec3 _scale){
    return mat3(_scale.x,0.0,0.0,
                0.0,_scale.y,0.0,
                0.0,0.0,_scale.z);
}

[![Image from Gyazo](https://i.gyazo.com/7ab33cab5083c349e94c98c3f1241320.gif)](https://gyazo.com/7ab33cab5083c349e94c98c3f1241320)

http://glslsandbox.com/e#57159

cf.
- https://thebookofshaders.com/07/?lan=jp
- https://wgld.org/d/glsl/g004.html
- [glsl atan 仕様まとめ](https://qiita.com/7CIT/items/ad76cfa6771641951d31)

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main( void ) {
	vec2 st = gl_FragCoord.xy/resolution.xy;
	vec3 color = vec3(0.0);
	vec2 pos = vec2(0.5)-st;
	float num_leaf = 4.;
	float r = length(pos)*2.0;
	float a = atan(pos.y,pos.x);
	
	// fill
	float u1 = cos((a+time)*num_leaf);
	float t1 = 1.-smoothstep(u1,u1+0.01,r);
	vec3 color1 = vec3(t1);
	
	// outline
	float u2 = sin((a+time)*num_leaf);
	float t2 = 0.01 / abs(u2 - r);
	vec3 color2 =  vec3(t2);
	
	color = color1 + color2;
	
	gl_FragColor = vec4(color, 1.0);
}

[![Image from Gyazo](https://i.gyazo.com/4e256f4ce0e401c2dbef45841798e759.png)](https://gyazo.com/4e256f4ce0e401c2dbef45841798e759)
http://glslsandbox.com/e#56814.0

An excercise from https://thebookofshaders.com/07/?lan=jp
https://github.com/michaelbromley/shader-playground/blob/master/mondrian.glsl

[GLSLでモンドリアン風 | Superpeachman
](http://superpeachman.info/?p=715)  
こっちのほうがわかりやすいか

原点と面積を渡す関数か、  
左下と右上を渡す関数か。

矩形全般の描き方  
[GLSLのstep()を使っての矩形の描き方](https://nogson2.hatenablog.com/entry/2017/11/04/000639)

#ifdef GL_ES
precision mediump float;
#endif

float rectangle(in vec2 st, in vec2 origin, in vec2 dimensions) {
    vec2 bl = step(origin, st); // 0 or 1 のvec2
    float pct = bl.x * bl.y;
    vec2 tr = step(1.0 - origin - dimensions, 1.0 - st); // 0 or 1 のvec2
    pct *= tr.x * tr.y; // 全部閾値を越えていたら1
    return pct;
}

void main(){
    vec2 st = gl_FragCoord.xy/iResolution.xy;
    vec3 color = vec3(0.0);
    color += rectangle(st, vec2(0.0, 0.0), vec2(0.2, 0.65));
    color += rectangle(st, vec2(0.22, 0.0), vec2(0.5, 0.1));
    color.b += rectangle(st, vec2(0.74, 0.0), vec2(0.2, 0.1));
    color.b += rectangle(st, vec2(0.96, 0.0), vec2(0.04, 0.1));
    color += rectangle(st, vec2(0.22, 0.12), vec2(0.5, 0.53));
    color += rectangle(st, vec2(0.74, 0.12), vec2(0.2, 0.53));
    color += rectangle(st, vec2(0.96, 0.12), vec2(0.04, 0.53));
    color.r += rectangle(st, vec2(0.0, 0.67), vec2(0.07, 0.17));
    color.r += rectangle(st, vec2(0.09, 0.67), vec2(0.11, 0.17));
    color += rectangle(st, vec2(0.22, 0.67), vec2(0.5, 0.17));
    color += rectangle(st, vec2(0.74, 0.67), vec2(0.2, 0.17));
    color.rg += vec2(rectangle(st, vec2(0.96, 0.67), vec2(0.04, 0.17)));
    color.r += rectangle(st, vec2(0.0, 0.86), vec2(0.07, 0.17));
    color.r += rectangle(st, vec2(0.09, 0.86), vec2(0.11, 0.17));
    color += rectangle(st, vec2(0.22, 0.86), vec2(0.5, 0.17));
    color += rectangle(st, vec2(0.74, 0.86), vec2(0.2, 0.17));
    color.rg += vec2(rectangle(st, vec2(0.96, 0.86), vec2(0.04, 0.17)));

    gl_FragColor = vec4(color, 1.0);
}

[![Image from Gyazo](https://i.gyazo.com/6c8edcf4db645685b764b64fc2e56def.gif)](https://gyazo.com/6c8edcf4db645685b764b64fc2e56def)
https://www.shadertoy.com/view/3lSSRV

[[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４）](https://qiita.com/doxas/items/f3f8bf868f12851ea143)

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{   
    // Normalized pixel coordinates (from -1 to 1)
    vec2 p = (fragCoord * 2.0 - iResolution.xy) / min(iResolution.x, iResolution.y);
    
    float l = 0.1 * abs(tan(iTime)) / length(p);
    fragColor = vec4(vec3(l), 1.0);
}

uniform vec4 uDiffuseColor;
uniform vec4 uAmbientColor;
uniform vec3 uSpecularColor;
uniform float uShininess;
uniform float uShadowStrength;
uniform vec3 uShadowColor;

// these are our new uniforms
uniform sampler2D s_scaleRef;
uniform sampler2D s_rot;
uniform vec2 u_inst_grid;
uniform float u_disp_scale;
uniform float u_rot_max;

// a new rotate funciton
vec2 rotate2D(float angle, vec2 prevXY){
	mat2 transMat 	= mat2(	cos(angle), -sin(angle),
							sin(angle), cos(angle));
	vec2 new_rot 	= transMat * prevXY;
	return new_rot;
}

out Vertex
{
	vec4 color;
	vec3 worldSpacePos;
	vec3 worldSpaceNorm;
	vec3 texCoord0;
	flat int cameraIndex;
} oVert;

void main()
{
	// here we use the grid size to crate a UV lookup for our texture
	vec2 samplerLookup	 	= TDInstanceTranslate().xy / (u_inst_grid/2);
	samplerLookup 			= (samplerLookup / 2) + 0.5;

	// here we grab the alpha value from our texture to determine scale
	float scale 			= texture(s_scaleRef, samplerLookup).a * u_disp_scale;

	// let's also grab our texture for rotation
	float rotAngle 			= texture(s_rot, samplerLookup).r * u_rot_max;

	// rotate the instance
	vec2 instRot  			= rotate2D(rotAngle, TDInstanceTranslate().xy);

	vec3 new_p 				= P;

	new_p.xy 				+= instRot;

	// scale the instance
	new_p 					*= scale;

	// First deform the vertex and normal
	// TDDeform always returns values in world space
	vec4 worldSpacePos =TDDeform(new_p);
	gl_Position = TDWorldToProj(worldSpacePos);

	// This is here to ensure we only execute lighting etc. code
	// when we need it. If picking is active we don't need this, so
	// this entire block of code will be ommited from the compile.
	// The TD_PICKING_ACTIVE define will be set automatically when
	// picking is active.
#ifndef TD_PICKING_ACTIVE

	{ // Avoid duplicate variable defs
		vec3 texcoord = TDInstanceTexCoord(uv[0]);
		oVert.texCoord0.stp = texcoord.stp;
	}
	int cameraIndex = TDCameraIndex();
	oVert.cameraIndex = cameraIndex;
	oVert.worldSpacePos.xyz = worldSpacePos.xyz;
	oVert.color = TDInstanceColor(Cd);
	vec3 worldSpaceNorm = normalize(TDDeformNorm(N));
	oVert.worldSpaceNorm.xyz = worldSpaceNorm;

#else // TD_PICKING_ACTIVE

	// This will automatically write out the nessessary values
	// for this shader to work with picking.
	// See the documentation if you want to write custom values for picking.
	TDWritePickingValues();

#endif // TD_PICKING_ACTIVE
}

$scope.applyXray = function() {
    $scope.view.wdg['modelItem-1']['texture'] = "app/resources/Uploaded/cvc.jpg?name=tex0&edge=repeat";
    $scope.view.wdg['modelItem-1']['shader'] = "xray;mixer f 0.0";
}
 
 

<script name="xray" type="x-shader/x-fragment">
precision mediump float;
varying vec3 I;
varying vec3 N;
const float edgeFalloff = 1.0;
const float intensity = 1.0;
const float ambient = 0.2;
void main() {
vec4 color = vec4(1.0);
float opacity = abs(dot(normalize(-N), normalize(-I)));
opacity = ambient + intensity*(1.0-pow(opacity,edgeFalloff));
gl_FragColor = opacity * color;
gl_FragColor.a = opacity;
}
</script>
<script name="xray" type="x-shader/x-vertex">
attribute vec3 vertexPosition;
attribute vec3 vertexNormal;
varying vec3 I;
varying vec3 N;
uniform mat4 modelViewProjectionMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 normalMatrix;
void main() {
vec4 vp4 = vec4(vertexPosition,1.0);
vec4 P = modelViewMatrix * vp4;
I = P.xyz - vec3(0);
N = vec3(normalMatrix * vec4(vertexNormal,0.0));
gl_Position = modelViewProjectionMatrix * vp4;
}
</script>

<script name="circuit" type="x-shader/x-fragment">
// Credit http://glslsandbox.com/e#23316.0
precision highp float;

#define PI 3.1415926535897932384626433832795

uniform float time;
uniform float resolution;
uniform float intensity;
uniform float speed;
uniform vec3 lightColor;
uniform vec3 baseColor;

varying vec2 vUv;
varying vec3 vPosition;

vec2 circuit(vec2 p) {
	p = fract(p);
	float r = 0.3;
	float v = 0.0, g = 1.0;
	float d;
	
	const int iter = 7;
	for(int i = 0; i < iter; i ++)
	{
		d = p.x - r;
		g += pow(clamp(1.0 - abs(d), 0.0, 1.0), 200.0);
		
		if(d > 0.0) {
			p.x = (p.x - r) / (1.8 - r);
		}
		else {
			p.x = p.x;
		}
		p = p.yx;
	}
	v /= float(iter);
	return vec2(g, v);
}

void main()
{
	vec2 uv = ( vUv.xy + 0.5 ) * resolution;
	vec2 cid2 = floor(uv);
	float cid = (cid2.y + cid2.x);

	vec2 dg = circuit(uv);
	float d = dg.x;
	vec3 col1 = (0.2-vec3(max(min(d, 2.0) - 1.0, 0.0))) * baseColor;
	vec3 col2 = vec3(max(d - 1.0, 0.0)) * lightColor;

	float f = max(0.4 - mod(uv.y - uv.x + (time * speed) + (dg.y * 0.2), 2.5), 0.0) * intensity;
	col2 *= f;
	
	gl_FragColor = vec4(col1 + col2, 1.0);
</script>

<script name="circuit" type="x-shader/x-vertex">
precision highp float;
precision highp int;
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
attribute vec2 uv2;

varying vec2 vUv;
varying vec3 vPosition;

void main() {
    vUv = uv;
    vPosition = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>