How to render a double-sided shader material

Mauro_Colella · May 20, 2020, 3:33am

Hello all. The question is simple: I have a custom shader material, which I apply to Points (not a Mesh) to basically deform the surface. The gist is:

void main() {
	vUv = uv;
	vec3 transformedNormal = normal;

	// add time to the noise parameters so it's animated
	noise = 10.0 *  -.10 * turbulence( 7.5 * transformedNormal + time );
	float b = magnitude * pnoise( 0.05 * position + vec3( 2.0 * time ), vec3( 100.0 ) );
	float displacement = - noise + b;

	vec3 newPosition = position + transformedNormal * displacement * displacement;
	gl_PointSize = pointSize;
	gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}

How do I go about also rendering the points when normals are back-facing?

prisoner849 · May 20, 2020, 9:09am

@Mauro_Colella
Is this similar to what you’re looking for: Way to hide Points if geometry is seen from backside? ?

Mauro_Colella · May 20, 2020, 9:47am

@prisoner849 I think I am looking for the opposite. You can see the source code here:

github.com

maurocolella/three-folio/blob/6f1fb4b24cad23422532b32c45311ac746bd8f62/src/components/Cylinder/index.tsx

import React, { useRef } from 'react';
import { useFrame } from 'react-three-fiber';
import { Points, ShaderMaterial, DoubleSide } from 'three';
import { TurbulenceShader } from '../../shaders/TurbulenceShader';

function Cylinder(props: any) {
    // This reference will give us direct access to the mesh
    const mesh = useRef<Points>();
    const mat = useRef<ShaderMaterial>();

    // Rotate mesh every frame, this is outside of React without overhead
    useFrame(({ clock }) => {
        mesh.current!.rotation.z += 0.001;
        if (mat.current) {
            mat.current.uniforms.time.value = clock.getElapsedTime() * 0.2;
        }
    });

    return (
        <points

This file has been truncated. show original

The vertex shader is here:

github.com

maurocolella/three-folio/blob/6f1fb4b24cad23422532b32c45311ac746bd8f62/src/shaders/TurbulenceShader/index.js

import classicnoise3D from '../common/classicnoise3D.glsl';
import { Vector3 } from 'three';

const TurbulenceShader = {
    uniforms: {
        color: { value: new Vector3(0, 0, 0) },
        magnitude: { value: 2.0 },
        time: { value: 0 },
        pointSize: { value: 0.01 },
        uScale: { value: 1.0 },
        uYrot: { value: 1.0 },
    },
    vertexShader: `
        ${classicnoise3D}

        varying vec2 vUv;
        varying float noise;
        uniform float time;
        uniform float magnitude;
        uniform float pointSize;

This file has been truncated. show original

But I want to display all the points. As it stands, points do not appear on the backside. If I rotate the geometry (as I do), I only see a “half-moon”, ie. a half-cylinder.

prisoner849 · May 20, 2020, 9:58am

In my example, use non-negated normalized mvPosition: normalize(mvPosition.xyz) (without minus)

Mauro_Colella · May 20, 2020, 11:40am

Actually, thanks a lot for your help, it turns out my shaders are working as they should, but there is some kind of clipping along a vertical plane occurring at depth 0.

If I move the geometry to z = 100, with my camera at z = 1,000 in my case (and the camera.far, by default, at 2,000), then all the points show as expected.

I am still confused. The camera is preset by the framework (react-three-fiber in this case), so I am not sure which setting is causing this clipping. Ideas welcome to help me fix this.

Topic		Replies	Views
Rotate a PointsMaterial in three dimensions with custom shader Questions materials , shaders , rotation	0	721	December 18, 2020
Invert light direction for the back side outside shader code Questions textures , materials , shaders , light	5	1075	August 21, 2022
Having problem with using MeshReflectorMaterial Questions materials , shaders	4	2245	November 16, 2022
ShaderMaterial, vertex shader and shadows Questions shadows , shader-material	6	3007	October 7, 2022
Change vertex positions on a plane by customizing the meshStandardMaterial Questions materials , shaders	2	918	July 8, 2021

How to render a double-sided shader material

Related topics