Passed attributes to manipulate the vertex and fragment

lessons/27-shaders/src/script.js

@@ -27,11 +27,21 @@ const textureLoader = new THREE.TextureLoader();
 // Geometry
 const geometry = new THREE.PlaneGeometry(1, 1, 32, 32);
 
+const count = geometry.attributes.position.count;
+const randoms = new Float32Array(count);
+
+for (let i = 0; i < count; i++) {
+  randoms[i] = Math.random();
+}
+
+geometry.setAttribute("aRandom", new THREE.BufferAttribute(randoms, 1));
+
 // Material
 const material = new THREE.RawShaderMaterial({
   vertexShader: testVertexShader,
   fragmentShader: testFragmentShader,
   side: THREE.DoubleSide,
+  transparent: true,
 });
 
 // Mesh

lessons/27-shaders/src/shaders/test/fragment.frag

@@ -1,5 +1,7 @@
 precision mediump float;
 
+varying float vRandom;
+
 void main() {
-   gl_FragColor = vec4(0.5, 0.0, 0.0, 1.0);
-}
+   gl_FragColor = vec4(0.5, vRandom, 0.5, 0.5);
+}

lessons/27-shaders/src/shaders/test/vertex.vert

@@ -3,7 +3,19 @@ uniform mat4 viewMatrix;
 uniform mat4 modelMatrix;
 
 attribute vec3 position;
+attribute float aRandom;
+
+varying float vRandom;
 
 void main() {
-   gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
-}
+   vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+   // modelPosition.z += sin(modelPosition.x * 10.0) * 0.1;
+   modelPosition.z += aRandom * 0.1;
+
+   vec4 viewPosition = viewMatrix * modelPosition;
+   vec4 projectedPosition = projectionMatrix * viewPosition;
+
+   gl_Position = projectedPosition;
+
+   vRandom = aRandom;
+}