堆棧內存溢出
  簡體   English   中英

在webgl中切換着色器

[英]Switching shaders in webgl

 原文  2015-11-28 18:22:10  4   1    javascript/ webgl/ shader

問題描述

我用webgl編寫的程序有問題，我不知道如何調試它，因為瀏覽器控制台沒有顯示任何錯誤。 Webgl什么都沒畫。

我有以下一組着色器： 

<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;

uniform sampler2D uSampler;

varying vec2 vTextureCoord;    
varying vec3 vEye;
varying vec3 vNormal;
uniform vec3 uLightDirection;    // Vector direccion de la luz
uniform vec3 uDirectionalColor; // Color de la luz direcional

uniform vec3 uColShadeless;
uniform vec3 uAmbientColor;
uniform float uKAmbiente;
uniform vec3 uColDifuso;
uniform float uKDifuso;
uniform vec3 uColEspecular;
uniform float uKEspecular;
uniform float uGlossiness;

void main(void) 
{
    vec3 normal = normalize(vNormal);
    float mLambert = max(dot(normal, uLightDirection), 0.0);
    vec3 vLuzLambert = uDirectionalColor * mLambert;

    vec3 r = 2.0 * max(dot(normal, uLightDirection), 0.0) * normal - uLightDirection;
    //vec3 r = reflect(uLightDirection, normal); // <- Da glossines del otro lado también
    float specular = pow(max(dot(r, normalize(vEye)), 0.0), uGlossiness) ;
    vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    vec3 componenteShadeless = uColShadeless * textureColor.rgb * uColDifuso;             // luz autoiluminada * colores difusos
    vec3 componenteAmbiente = uKAmbiente * uAmbientColor * textureColor.rgb * uColDifuso; // k% * luz ambiente * colores difusos
    vec3 componenteDifusa = uKDifuso * textureColor.rgb * uColDifuso * vLuzLambert;
    vec3 componenteEspecular = uKEspecular * specular * uColEspecular ;
    gl_FragColor = vec4(componenteShadeless + componenteAmbiente + componenteDifusa + componenteEspecular, textureColor.a);
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;

uniform mat4 uViewMatrix;
uniform mat4 uModelMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;

varying vec2 vTextureCoord;
varying vec3 vEye;
varying vec3 vNormal;

uniform vec2 aUVOffset;

void main(void) 
{

        // Transformamos al vértice al espacio de la cámara
        vec4 pos_camera_view = uViewMatrix * uModelMatrix * vec4(aVertexPosition, 1.0);
        // Transformamos al vértice al espacio de la proyección
        gl_Position = uPMatrix * pos_camera_view;
        // Coordenada de textura
        vTextureCoord.x = aTextureCoord.x + aUVOffset.x;
        vTextureCoord.y = aTextureCoord.y + aUVOffset.y;

        // Para iluminación
        vEye = -vec3(pos_camera_view.xyz);
        vNormal = uNMatrix * aVertexNormal;
}
</script>

<script id="vs" type="x-shader/x-vertex">
        attribute vec3 aPositionL;
        attribute vec3 aNormalL;
        attribute vec3 aTangentL;
        attribute vec2 aTexCoord;

        uniform mat4 uMatrixMVP;
        uniform mat4 uMatrixMV;

        varying vec4 vPositionV;
        varying vec3 vNormalV;
        varying vec3 vTangentV;
        varying vec2 vTexCoord;

        attribute vec3 aVertexPosition;
        attribute vec3 aVertexNormal;
        attribute vec2 aTextureCoord;

        uniform mat4 uViewMatrix;
        uniform mat4 uModelMatrix;
        uniform mat4 uPMatrix;
        uniform mat3 uNMatrix;
        varying vec3 vNormal;

        uniform vec2 aUVOffset;
        void main(void) 
        {

        // Transformamos al vértice al espacio de la cámara
        vec4 pos_camera_view = uViewMatrix * uModelMatrix * vec4(aPositionL, 1.0);
        // Transformamos al vértice al espacio de la proyección
        gl_Position = uPMatrix * pos_camera_view;

        vNormal = uNMatrix * aVertexNormal;
        vPositionV = uMatrixMV * vec4(aPositionL, 1.0);
        vNormalV = (uMatrixMV * vec4(aNormalL, 0.0)).xyz;
        vTangentV = (uMatrixMV * vec4(aTangentL, 0.0)).xyz;
        vTexCoord = aTexCoord;
}
</script>

<script id="fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif

        uniform sampler2D uColorSampler;
        uniform sampler2D uNormalSampler;
        uniform float uTime;

        varying vec4 vPositionV;
        varying vec3 vNormalV;
        varying vec3 vTangentV;
        varying vec2 vTexCoord;

        void main(void) {
            vec3 diffuse = texture2D(uColorSampler, vTexCoord).rgb;
            vec3 normalT = texture2D(uNormalSampler, vTexCoord).xyz;
            normalT.y = 1.0 - normalT.y;
            normalT = 2.0 * normalT - vec3(1.0, 1.0, 1.0);
            normalT.z *= 10.0;

            vec3 binormalV = cross(vNormalV, vTangentV);
            vec3 normalV = normalT.x * vTangentV + normalT.y * binormalV + normalT.z * vNormalV;

            normalV = normalize(normalV);
            vec3 lightV = normalize(vec3(10.0 * cos(uTime), 10.0, 10.0 * sin(uTime)));

            float d = dot(normalV, lightV);
            float s = dot(reflect(-lightV, normalV), normalize(-vPositionV.xyz));
            s = pow(s, 30.0);

            vec3 color = diffuse * (0.1 + 0.5 * d + 0.4 * s);

            gl_FragColor = vec4(color, 1.0);
        }

所以vs和fs是用於繪制具有法線貼圖紋理的曲面的着色器。 我使用shader-fs和shader-vs代替其余的代碼。

以下代碼用於初始化着色器並更改它們： 

function initShaders()
{
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }

    initShaders2();
}

function changeShaderBasic()
{

    gl.useProgram(shaderProgramMap);

    gl.disableVertexAttribArray(shaderProgramMap.aPositionL);
    gl.disableVertexAttribArray(shaderProgramMap.aNormalL);
    gl.disableVertexAttribArray(shaderProgramMap.aTangentL);
    gl.disableVertexAttribArray(shaderProgramMap.aTexCoord);

    gl.useProgram(shaderProgram);

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

    shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

    shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);

    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
    shaderProgram.ViewMatrixUniform = gl.getUniformLocation(shaderProgram, "uViewMatrix");
    shaderProgram.ModelMatrixUniform = gl.getUniformLocation(shaderProgram, "uModelMatrix");
    shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
    shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");

    shaderProgram.ambientColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientColor"); // Color ambiente
    shaderProgram.lightingDirectionUniform = gl.getUniformLocation(shaderProgram, "uLightDirection"); // Direccion de la luz
    shaderProgram.directionalColorUniform = gl.getUniformLocation(shaderProgram, "uDirectionalColor"); // Color de la luz

    shaderProgram.shadelessColorUniform = gl.getUniformLocation(shaderProgram, "uColShadeless");
    shaderProgram.ambientKUniform = gl.getUniformLocation(shaderProgram, "uKAmbiente");
    shaderProgram.diffuseColorUniform = gl.getUniformLocation(shaderProgram, "uColDifuso");
    shaderProgram.diffuseKUniform = gl.getUniformLocation(shaderProgram, "uKDifuso");
    shaderProgram.specularColorUniform = gl.getUniformLocation(shaderProgram, "uColEspecular");
    shaderProgram.specularKUniform = gl.getUniformLocation(shaderProgram, "uKEspecular");
    shaderProgram.specularGlossiness = gl.getUniformLocation(shaderProgram, "uGlossiness");    

    shaderProgram.uvOffsetUniform = gl.getUniformLocation(shaderProgram, "aUVOffset");

}



function initShaders2() {

            var vs = getShader(gl,'vs');
            var fs = getShader(gl,'fs');

            shaderProgramMap = gl.createProgram();
            gl.attachShader(shaderProgramMap, vs);
            gl.attachShader(shaderProgramMap, fs);
            gl.linkProgram(shaderProgramMap);

            if (!gl.getProgramParameter(shaderProgramMap, gl.LINK_STATUS)) {
                alert('Could not link the shader normal program.');
                return;
            }
}


function changeShaderNormal()
{
    gl.useProgram(shaderProgram);
    gl.disableVertexAttribArray(shaderProgram.vertexPositionAttribute);
    gl.disableVertexAttribArray(shaderProgram.textureCoordAttribute);
    gl.disableVertexAttribArray(shaderProgram.vertexNormalAttribute);

    gl.useProgram(shaderProgramMap);

    shaderProgramMap.ViewMatrixUniform = gl.getUniformLocation(shaderProgramMap, "uViewMatrix");
    shaderProgramMap.ModelMatrixUniform = gl.getUniformLocation(shaderProgramMap, "uModelMatrix");
    shaderProgramMap.aPositionL = gl.getAttribLocation(shaderProgramMap, 'aPositionL');
    gl.enableVertexAttribArray(shaderProgramMap.aPositionL);
    shaderProgramMap.aNormalL = gl.getAttribLocation(shaderProgramMap, 'aNormalL');
    gl.enableVertexAttribArray(shaderProgramMap.aNormalL);
    shaderProgramMap.aTangentL = gl.getAttribLocation(shaderProgramMap, 'aTangentL');
    gl.enableVertexAttribArray(shaderProgramMap.aTangentL);
    shaderProgramMap.aTexCoord = gl.getAttribLocation(shaderProgramMap, 'aTexCoord');
    gl.enableVertexAttribArray(shaderProgramMap.aTexCoord);
    shaderProgramMap.uMatrixMVP = gl.getUniformLocation(shaderProgramMap, 'uMatrixMVP');
    shaderProgramMap.uMatrixMV = gl.getUniformLocation(shaderProgramMap, 'uMatrixMV');
    shaderProgramMap.uColorSampler = gl.getUniformLocation(shaderProgramMap, 'uColorSampler');
    shaderProgramMap.uNormalSampler = gl.getUniformLocation(shaderProgramMap, 'uNormalSampler');
    shaderProgramMap.uTime = gl.getUniformLocation(shaderProgramMap, 'uTime');
}

所以我首先調用函數“changeShaderBasic”，當我想用​​法線貼圖繪制表面時，我做了類似這樣的事情： 

changeShaderNormal();
*Draw the surface*
changeShaderBasic();

如果我刪除它的部分代碼 - 那么着色器shader-fs和shader-vs似乎工作正常。 問題似乎是其他着色器（vs和fs）或在着色器之間切換的函數。

我已經省略了程序用來創建紋理的代碼部分。

我不知道我做錯了什么，我不知道如何找到問題。

1 個解決方案

解決方案1
 3 已采納  2015-11-28 20:45:15

問題是shaderProgramMap某些着色器參數未啟用。 例如，有 

 shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

和 

 gl.disableVertexAttribArray(shaderProgram.vertexPositionAttribute);

但是shaderProgramMap沒有任何shaderProgramMap ，該腳本也具有aVertexPosition屬性。

當你開始遇到這類問題時， 你無法找到你編寫的代碼有什么問題，那是因為代碼不再清晰：概述丟失了。 有重復的代碼：同樣的事情做了兩次，即編譯，鏈接和配置着色器。 然后，是時候重構：提取所有重復的代碼，並參數化不同的東西。

有許多可能的步驟。 一種是抽象着色器參數： attributes和uniforms 。
下面的代碼將生成一個參數hashmap，其中包含有關着色器源中所有參數的信息。 請注意，它可能無法涵蓋所有​​可能性，但它只是為了給您一個想法。 

function initShaderParams( gl, shaderProgram, vs, fs )
{
    /** We'll be returning this: */
    var params = {
        uniform:{},
        attribute:{},

        uniforms: function(arr) {
            for ( var a in arr )
                if ( params.uniform[a] )
                    params.uniform[ a ].set( arr[a] );
                else throw new Error("unknown uniform '"+a+"' referenced in shader " + vs+"+"+fs
                    + ";\navailable uniforms: " + Object.keys(params.uniform)
                );
        },

        enable: function() {
            for ( var a in this.attribute )
                gl.disableVertexAttribArray( this.attribute[a] );
        }

        // disable: ....
    };


    /** returns a function to set the value of a uniform given it's type */
    function getUniformFN( type ) {
        switch ( type ) {
            case 'vec2': return function(v){gl.uniform2f( this.loc, false, v[0], v[1] );};
            case 'mat4': return function(v){gl.uniformMatrix4fv( this.loc, false, v );};
            default:
                throw new Error("unknown uniform type " + type + " in shader " + vs+"+"+fs );
        }
    }

    /** same, for attributes. */
    function getAttributeFN( type ) {
        switch ( type ) {
            case 'vec2': return function(v){ gl.bindBuffer( gl.ARRAY_BUFFER, v ); gl.vertexAttribPointer( this.loc, 2, gl.FLOAT, false, 0, 0 ); };
            case 'vec3': return function(v){ gl.bindBuffer( gl.ARRAY_BUFFER, v ); gl.vertexAttribPointer( this.loc, 3, gl.FLOAT, false, 0, 0 ); };
            case 'vec4': return function(v){ gl.bindBuffer( gl.ARRAY_BUFFER, v ); gl.vertexAttribPointer( this.loc, 4, gl.FLOAT, false, 0, 0 ); };
            default:
                throw new Error("unknown uniform type " + type + " in shader " + vs+"+"+fs );
        }
    }

    /** Utility method to map a regex callback */
    function regexMap(regex, text, callback) {
        while ((result = regex.exec(text)) != null)
            callback(result);
    }

    // extract parameters:

    var src = vs + fs;

    regexMap(/(uniform)\s+(\w+)\s+(\w+)(\[\d+\])?\s*;/g, src, function(groups) {
        var loc = gl.getUniformLocation( shaderProgram, groups[3] );
        if ( loc == null ) {
            console.warn("declared ", groups[0], " not used" );
            return;
        }

        params.uniform[ groups[3] ] = {
            type: groups[2],
            loc:  loc,
            set:  getUniformFN( groups[2] )
       };
    } );

    regexMap(/(attribute)\s+(\w+)\s+(\w+)\s*;/g, src, function(groups) {
        var loc = gl.getAttribLocation ( shaderProgram, groups[3] );
        if ( loc == -1 ) {
            console.warn("declared ", groups[0], " not used" );
            return;
        }
        params.attribute[ groups[3] ] = {
            type: groups[2],
            loc:  loc,
            set:  getAttributeFN( groups[2] )
        };
    } );

    return params;
}

調用此方法，您將可以訪問着色器參數，並且可以迭代它們，或者一次性設置它們： 

var params = initShaderParams( gl, shaderProgram, vsSource, fsSource );

params.uniforms( {
    uViewMatrix: ...,
    uModelMatrix: ...,
    ...
} );

這樣，代碼變得更加清晰，並且可以更容易地發現缺少的內容。 您甚至可以編寫一個函數來為您執行此操作： 計算 params.uniforms鍵和給定參數的交集 ，以查看是否已指定所有這些鍵，或者跟蹤是否使用setter函數設置它們。 當然，還有很多其他方法; 您還可以創建一個Shader類並覆蓋方法。

復制粘貼編碼會導致無法維護的代碼。 根據經驗，每當你需要兩次編程時，你經常會這樣做。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 WebGL多個着色器 在javascript中定義的webgl着色器 在WebGL中調試ELSL着色器 WebGL 着色器不尊重形狀方向 WebGL將顏色變量傳遞給着色器 webGl着色器未捕獲的語法錯誤 WebGL：如何有效地獲取/緩存着色器？ Openlayers 訪問低級 WebGL 着色器 使用HTML5 WebGL着色器進行計算 如何在 webgl 着色器中使用 console.log？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM