Setting up WebGL shaders on Mac, Three.js, & vite-plugin-glsl - macos

Question

I am working on learning shaders through Three.js but I am having a bit trouble trying to get the setup to work. I am using vites plugin glsl for my shader which I have set up. At first I tried following along some more advance videos, but the glsl/frag/vert files didn't seem to work so I found a video that brought it down to the basicss. Thankfully I can get the shader to visualize and change color, but it looks like my vertex shader does not want to work. Originally I placed them in separate GLSL files, but that was giving me more problems that way, so I opted towards embedding them inside of my JS files. Here is my current basic project.
import * as THREE from 'three';
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight)
camera.position.set(-10, 10, -1)
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const canvas = document.body;
canvas.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, canvas);
// Lights
const ambientLights = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLights)
const directionalLight = new THREE.DirectionalLight('#ffffff', 1);
directionalLight.castShadow = true;
directionalLight.receiveShadow = true;
directionalLight.shadow.mapSize.set(window.innerWidth, window.innerHeight);
directionalLight.shadow.camera.far = 0.01;
directionalLight.shadow.normalBias = 1.05;
directionalLight.position.set(200, 400, 10.25);
scene.add(directionalLight);
const shaderMaterial = new THREE.RawShaderMaterial({
vertexShader: `
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
uniform float uFrequency;
uniform float uAmplitude;
attribute vec3 position;
void main() {
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
// anything I place in here doesn't update
modelPosition.y += sin(modelPosition.x * uFrequency) * uAmplitude;
vec4 viewPosition = viewMatrix * modelPosition;
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.5, 0.5, 1.0);
}
`,
wireframe: true,
side: THREE.DoubleSide,
uniforms: {
uFrequency: { value: 10.0 },
uAmplitude: { value: 0.1 }
}
})
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(10, 10, 10, 10),
shaderMaterial
)
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.castShadow = true;
plane.receiveShadow = true;
scene.add(plane);
const animate = () => {
controls.update();
renderer.render(scene, camera)
requestAnimationFrame(animate);
}
animate();
The fragment shader works because I see the change in color, however my vertex shader is where the issue lies. It doesn't disappear, but nothing changes and it also doesn't throw any errors to debug. Whenever I try updating my vertex shader, nothing happens. So it's semi working, but can't really do anything pass setting it up like so. I understand that WebGL was deprecated for MACs, but I always notice several videos online with mac users still using it, so I figure it has to work, there must be some things I'm just missing

Answer 1

The issue with your vertex shader is that you're assigning values to modelPosition, but then you're not using them! When you assign the final output to gl_Position, you're not using any of the calculations you performed previously:
void main() {
// You create and modify modelPosition...
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
modelPosition.y += sin(modelPosition.x * uFrequency) * uAmplitude;
vec4 viewPosition = viewMatrix * modelPosition;
// ...but then you don't use it on your final output!
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}
Instead of doing all the matrix multiplications again from scratch, just make sure you use the position you've modified.
void main() {
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
modelPosition.y += sin(modelPosition.x * uFrequency) * uAmplitude;
vec4 viewPosition = viewMatrix * modelPosition;
// Make sure you use viewPosition in your final output
gl_Position = projectionMatrix * viewPosition;
}