GLSL shader not showing anything in scene in THREE.js - why?

Question

I'm trying to make my own shader for a THREE.js project I'm working on, and I wanted to make a GLSL shader as part of it for one of the meshes in my scene. However, despite writing very basic code for it, the mesh (just a cylinder) won't display at all in the scene. This was the relevant code I've been working with at the moment:

main.js:

import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
    80, /* FOV */
    window.innerWidth / window.innerHeight, /* aspect ratio */
    0.1, /* closest visible distance */
    1000 /* furthest visible distance */
)

camera.position.x = -0.15
camera.position.y = 0.15
camera.position.z = 0.15
camera.lookAt(new THREE.Vector3(0, 0, 0))

const renderer = new THREE.WebGLRenderer({
    antialias: true
})

renderer.setSize(
    window.innerWidth, /* width */
    window.innerHeight /* height */
)

document.body.appendChild(renderer.domElement)

let cylinderGeometry = new THREE.CylinderGeometry(0.002, 0.002, 0.25)

let cylinderMaterial = new THREE.ShaderMaterial({
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent
})

let cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
cylinderMesh.position.y = 0.125
scene.add(cylinderMesh)

function animate() {

    window.requestAnimationFrame(animate)
    renderer.render(scene, camera)
}

animate()

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Rubik's Cube</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body style="background-color: #dedede">
        <script type="module" src="./src/main.js"></script>
        <script id="vertexShader" type="x-shader/x-vertex"> 
            void main() {
                gl_Position = vec4(1.0, 1.0, 1.0, 1.0 );
            }
        </script>
        <script id="fragmentShader" type="x-shader/x-fragment">
            void main() {
                gl_FragColor = vec4(1.0, 1.0, 1.0 ,1.0);
            }
        </script>
    </body>
</html>

Apologies if the answer happened to be obvious – this is my first time working with GLSL.

Łukasz Daniel Mastalerz · Accepted Answer · 2025-09-24 03:59:28Z

3

You neet use vertex position coming from 3js and transform it with model-view-projection matrix. Now your every vertex is placed at clip-space coords 1,1,1,1 and all vertices are set into single point, so you see nothing. Try in vertex

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

answered Sep 24 at 3:59

Łukasz Daniel Mastalerz

2,6162 gold badges10 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

2pha · Accepted Answer · 2025-09-24 22:40:28Z

1

I was experimenting with three.js shaders about 10 years ago and created a blog post that may help you.
Glancing at your code I do see that you don't seem to call the render function.
Try adding this at the end of your code:
renderer.render(scene, camera);

Edit: I just updated the blog link with the correct link. It has a few different examples of implementing different shaders, though is for an old version of three.js, but should still be relevant.

edited Sep 24 at 22:40

answered Sep 24 at 1:19

2pha

10.2k2 gold badges32 silver badges48 bronze badges

Collectives™ on Stack Overflow

GLSL shader not showing anything in scene in THREE.js - why?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related