My very simple RawShader does not work. I don't see it in postprocessing

Spiri 0
Viewed 40

I need a 3D texture in my postprocessing shader and I need sampler3D for that. My RawShader works. I have now recreated this beautiful example and it works without problems.

https://threejs.org/examples/?q=webgl2#webgl2_volume_perlin

I don’t understand why in my simplest possible example the postprocessing screen no longer works as soon as I include “glslVersion: THREE.GLSL3,”.

why does it work for me with the perlinnoise example but not in my very simple postprocessing shader.

import * as THREE from "../lib/three/build/three.module.js";
import { OrbitControls } from '../lib/three/examples/jsm/controls/OrbitControls.js';
import { RenderPass } from '../lib/three/examples/jsm/postprocessing/RenderPass.js'; 
import { ShaderPass } from '../lib/three/examples/jsm/postprocessing/ShaderPass.js';
import { EffectComposer } from '../lib/three/examples/jsm/postprocessing/EffectComposer.js'; 
import WebGL from '../lib/three/examples/jsm/WebGL.js';


function main() {
    new Main();
}

class Main {
    constructor(){
        this.init();
        this.animate(); 
    }
    
        
    init(){

       if (!WebGL.isWebGL2Available()) {
        return false;
      }
    
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('webgl2');
        
        this.renderer = new THREE.WebGLRenderer({ 
            canvas: canvas,
            context: context,
            antialias: true 
        });
        
        this.renderer.setPixelRatio( window.devicePixelRatio ); 
        this.renderer.shadowMap.enabled = true; 
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.autoClear = false;
        
        this.container = document.getElementById('container');
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
        this.container.appendChild( this.renderer.domElement );

        this.aspect = this.container.clientWidth / this.container.clientHeight; 
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color( 0x000000 );
        
        this.camera = new THREE.PerspectiveCamera( 60, this.aspect, .1, 10000 );
        this.camera.position.set(0, 100, 0);
    
        this.controls = new OrbitControls( this.camera, this.renderer.domElement );
        this.controls.enableZoom = true;
        this.controls.enabled = true;
        this.controls.target.set(0, 0, 0);
    
    //-------------------------------------------------------------------------------------------------

        this.composer = new EffectComposer(this.renderer);
        const renderPass = new RenderPass(this.scene, this.camera);
        this.composer.addPass(renderPass);

        const geometry = new THREE.BoxGeometry( 10, 10, 10 ); 
        const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
        const cube = new THREE.Mesh( geometry, material ); 
        this.scene.add( cube );
        
        
        const VS =`
            attribute vec2 uv;

            void main() {  
                gl_Position = vec4( (uv - 0.5)*2.0, 0.0, 1.0 );
            }`;

        const FS =`
                    
            //uniform sampler3D tDiffuse;   //I need this
            
            void main() {
                gl_FragColor = vec4(1., 0., 0., 1.);
            }`;

        const shaderMaterial = new THREE.RawShaderMaterial({ 
            uniforms: {
            },
            glslVersion: THREE.GLSL3,  //why does my red postprocessing screen disappear when I embed this?
            vertexShader: VS,   
            fragmentShader: FS, 
        });


        this.composer.addPass(new ShaderPass(shaderMaterial));

    
    }//end init
    
    
    animate(){
        requestAnimationFrame( this.animate.bind(this) );  
        this.render();
    }//end animate
    
    
    render(){
        
        this.controls.update();
        this.renderer.render(this.scene, this.camera); 
        this.composer.render();
    
    }//end render
}//end class
    
main();
three.js
1 Answers

resolved after two very hard days of relentless thought. The shader language is different in webgl2. gl_fragColor, varying, attributes, all of that is deprecated. That's why it only works with a raw shader, because the normal shader includes webgl1 standards

here the working correction:

        const VS =`

            in vec2 uv;

            void main() {  
                gl_Position = vec4( (uv - 0.5)*2.0, 0.0, 1.0 );
            }`;

        const FS =`
            precision highp float; 
            precision highp int;
            precision mediump sampler3D;
            
            uniform sampler3D dtex; 
            out vec4 outColor;
    
            void main() {

                outColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        const shaderMaterial = new THREE.RawShaderMaterial({ 
            glslVersion: THREE.GLSL3,
            uniforms: {
            },
            vertexShader: VS,   
            fragmentShader: FS,
        });

time for party

Spiri0
Related