@woosh/meep-engine/src/engine/graphics/impostors/octahedral/shader/ImpostorShaderWireframeV0.js

Pure JavaScript game engine. Fully featured and production ready.

import {
    AddEquation,
    CustomBlending,
    GLSL3,
    OneFactor,
    OneMinusSrcAlphaFactor,
    RawShaderMaterial,
    Vector3
} from "three";

/*
 *
 * For ray projection using projection matrix : https://encreative.blogspot.com/2019/05/computing-ray-origin-and-direction-from.html
 */
const shader_vx = `
    
    in vec3 position;
    
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    uniform mat3 normalMatrix;
    
    uniform vec3 uOffset;
    uniform float uRadius;
    uniform float uFrames;
    
    void main() {
        
        vec2 framesMinusOne = uFrames - vec2(1.0);
        
        mat4 m4 = modelViewMatrix;
        
        m4[0][0] = 1.0;
        m4[0][1] = 0.0;
        m4[0][2] = 0.0;

        m4[1][0] = 0.0;
        m4[1][1] = 1.0;
        m4[1][2] = 0.0;

        m4[2][0] = 0.0;
        m4[2][1] = 0.0;
        m4[2][2] = 1.0;
        
        vec3 object_scale = vec3(
            length(modelViewMatrix[0].xyz),
            length(modelViewMatrix[1].xyz),
            length(modelViewMatrix[2].xyz)
        ); 
        
        // scale by object's baking bounding sphere's radius
        float card_diameter = uRadius*2.0;
        object_scale *= card_diameter;
        
        vec4 mvPosition = m4 * vec4( object_scale*(position+uOffset/card_diameter), 1.0 );
                
        gl_Position = projectionMatrix * mvPosition;
        
    }
`;
const shader_fg = `
    precision highp float;
    precision highp int;
    
    out vec4 color_out;

    void main(){
        
        color_out = vec4(1.0, .0, .0, 1.0);
    }
`;

export class ImpostorShaderWireframeV0 extends RawShaderMaterial {
    constructor() {
        super({
            fragmentShader: shader_fg,
            vertexShader: shader_vx,
            uniforms: {
                /**
                 * RGB + Alpha
                 */
                tBase: {
                    value: null
                },
                /**
                 * Normal+Depth
                 */
                tGeometry: {
                    value: null
                },
                /**
                 * Material properties: Occlusion, Roughness, Metalness
                 * Alpha unused
                 */
                tMaterial: {
                    value: null
                },
                /**
                 * Number of frames
                 */
                uFrames: {
                    value: 0
                },
                /**
                 * Radius of bounding sphere of the impostor
                 */
                uRadius: {
                    value: 0
                },
                /**
                 * Impostor offset
                 */
                uOffset: {
                    value: new Vector3(0, 0, 0)
                },
                uIsFullSphere: {
                    value: false
                },
                uDepthScale: {
                    // value should be in range between 0 and 1
                    value: 1
                }
            },
            glslVersion: GLSL3
        });

        // Save some effort by disabling blending
        this.blending = CustomBlending;
        this.blendEquation = AddEquation;
        this.blendSrc = OneFactor;
        this.blendDst = OneMinusSrcAlphaFactor;

    }
}