webgl shader 输出字符串格式

最新推荐文章于 2024-05-15 10:19:57 发布

这一生只吹边疆的风

最新推荐文章于 2024-05-15 10:19:57 发布

阅读量558

点赞数

本文链接：https://blog.csdn.net/HzjCsdn/article/details/108591885

版权

第一种方式：使用html的输出来格式化你的shader代码

<html>

<head>
    <title>www.caoyaohero.com</title>
    <meta charset='utf-8' />
    <meta name='renderer' content='webkit' />
    <meta name='viewport'
        content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' />
    <meta name='apple-mobile-web-app-capable' content='yes' />
    <meta name='full-screen' content='true' />
    <meta name='x5-fullscreen' content='true' />
    <meta name='360-fullscreen' content='true' />
    <meta name='laya' screenorientation='landscape' />
    <meta http-equiv='expires' content='0' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <meta http-equiv='expires' content='0' />
    <meta http-equiv='Cache-Control' content='no-siteapp' />

    <!-- <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" /> -->
</head>

<body>
    <canvas id="myCanvas" width="720" height="1080" style="border: 1px solid red"></canvas>
    <!--在这个脚本下输入你的shader 输入完以后 请执行 控制台会有打印-->
    <script id="glsl" type="notjs">
   precision mediump float;

// Passed in from the vertex shader.
varying vec2 v_texcoord;

// The texture.
uniform sampler2D u_texture;

void main() {
   gl_FragColor = texture2D(u_texture, v_texcoord);
}
    </script>


    <script type="text/javascript">
        var vs = document.getElementById('glsl');
        var str = vs.text;
        var sp = str.split("\n");

        var searchAllSpace = function (search) {
            var count = 0;
            for (var j = 0; j < search.length; j++)
                if (search[j] == " ") count++;
            return count < search.length ? true : false
        }
        var replaceSpace = function (search) {
            for (var j = 0; j < search.length; j++)
                if (search[j] != " ") {
                    return search.slice(j);
                }
        }
        var result = [];
        for (var j = 0; j < sp.length; j++) {
            {
                var search = sp[j];
                if (search != " " && search != "}" && search.indexOf("//") < 0 && searchAllSpace(search)) {
                    // sp[j] = sp[j]+"+";
                    var target = replaceSpace(search);
                    console.log("'" + target + "'+");
                    result.push("'" + target + "'+")
                }
                else if (search.indexOf("}") >= 0) {
                    var target = replaceSpace(search);
                    //末尾
                    console.log("'" + target + "'");
                }
            }
        }

    </script>
</body>

</html>

第二种方式使用··

const vs = `
  attribute vec4 a_position;
  attribute vec3 a_normal;
  attribute vec3 a_tangent;
  attribute vec2 a_texcoord;
  attribute vec4 a_color;

  uniform mat4 u_projection;
  uniform mat4 u_view;
  uniform mat4 u_world;
  uniform vec3 u_viewWorldPosition;

  varying vec3 v_normal;
  varying vec3 v_tangent;
  varying vec3 v_surfaceToView;
  varying vec2 v_texcoord;
  varying vec4 v_color;

  void main() {
    vec4 worldPosition = u_world * a_position;
    gl_Position = u_projection * u_view * worldPosition;
    v_surfaceToView = u_viewWorldPosition - worldPosition.xyz;
    mat3 normalMat = mat3(u_world);
    v_normal = normalize(normalMat * a_normal);
    v_tangent = normalize(normalMat * a_tangent);

    v_texcoord = a_texcoord;
    v_color = a_color;
  }
  `;