如何在GLSL中复制正方形以制作图案？

问题描述

我正在学习如何在GLSL代码中创建形状，最近我使用以下代码在正方形的中心制作了星形的形状：

#idef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_time;


void main(){
  vec2 st = gl_FragCoord.xy/u_resolution.xy;
  st.x *= u_resolution.x/u_resolution.y;
  vec3 color = vec3(0.0);
  float d = 0.0;

  // Remap space to -1 to 1.
  st = st *2.-1.;

  // Make distance Field
  d = length(abs(st)-.3);
  d = length(min(abs(st)-.3,0.));

  // Visualize the distance Field
  gl_FragColor = vec4(vec3(fract(d*10.0)),1.0);

  // Draw with the distance field
  gl_FragColor = vec4(vec3(step(.3,d)),1.0);

}

我现在想尝试将此方形设计复制到有边框的类似瓷砖的图案中，但是我不知道如何修改我的代码以将其复制到列中。有人可以帮忙吗？

解决方法

只需按图块数缩放st并按fract()得出结果的分数部分。例如：

void main()
{
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    
    float tiles = 5.0;
    st = fract(st * tiles);

    // [...]
}

---

在您的示例中，您必须略微修改提交的距离的计算（0.3-> 0.32）：

// Make Distance Field
d = length(abs(st)-.32);
d = length(min(abs(st)-.32,0.));

---

使用问题中的片段着色器查看WebGL示例：

(function loadscene() {    

var canvas,gl,vp_size,prog,bufObj = {};

function initScene() {

    canvas = document.getElementById( "ogl-canvas");
    gl = canvas.getContext( "experimental-webgl" );
    if ( !gl )
      return;

    progDraw = gl.createProgram();
    for (let i = 0; i < 2; ++i) {
        let source = document.getElementById(i==0 ? "draw-shader-vs" : "draw-shader-fs").text;
        let shaderObj = gl.createShader(i==0 ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
        gl.shaderSource(shaderObj,source);
        gl.compileShader(shaderObj);
        let status = gl.getShaderParameter(shaderObj,gl.COMPILE_STATUS);
        if (!status) alert(gl.getShaderInfoLog(shaderObj));
        gl.attachShader(progDraw,shaderObj);
        gl.linkProgram(progDraw);
    }
    status = gl.getProgramParameter(progDraw,gl.LINK_STATUS);
    if ( !status ) alert(gl.getProgramInfoLog(progDraw));
    progDraw.inPos = gl.getAttribLocation(progDraw,"inPos");
    progDraw.u_time = gl.getUniformLocation(progDraw,"u_time");
    progDraw.u_resolution = gl.getUniformLocation(progDraw,"u_resolution");
    gl.useProgram(progDraw);

    var pos = [ -1,-1,1,1 ];
    var inx = [ 0,2,3 ];
    bufObj.pos = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER,bufObj.pos );
    gl.bufferData( gl.ARRAY_BUFFER,new Float32Array( pos ),gl.STATIC_DRAW );
    bufObj.inx = gl.createBuffer();
    bufObj.inx.len = inx.length;
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER,bufObj.inx );
    gl.bufferData( gl.ELEMENT_ARRAY_BUFFER,new Uint16Array( inx ),gl.STATIC_DRAW );
    gl.enableVertexAttribArray( progDraw.inPos );
    gl.vertexAttribPointer( progDraw.inPos,gl.FLOAT,false,0 ); 
    
    gl.enable( gl.DEPTH_TEST );
    gl.clearColor( 0.0,0.0,1.0 );

    window.onresize = resize;
    resize();
    requestAnimationFrame(render);
}

function resize() {
    //vp_size = [gl.drawingBufferWidth,gl.drawingBufferHeight];
    vp_size = [window.innerWidth,window.innerHeight];
    //vp_size = [256,256]
    canvas.width = vp_size[0];
    canvas.height = vp_size[1];
}

function render(deltaMS) {

    gl.viewport( 0,canvas.width,canvas.height );
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
   
    gl.uniform1f(progDraw.u_time,deltaMS/1000.0);
    gl.uniform2f(progDraw.u_resolution,canvas.height);
    gl.drawElements( gl.TRIANGLES,bufObj.inx.len,gl.UNSIGNED_SHORT,0 );
    
    requestAnimationFrame(render);
}  

initScene();

})();

<script id="draw-shader-vs" type="x-shader/x-vertex">
#version 100
//precision mediump float;

attribute vec2 inPos;

//varying vec2 ndcPos;

void main()
{
    //ndcPos = inPos;
    gl_Position = vec4( inPos.xy,1.0 );
}
</script>

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

//varying vec2 ndcPos;  // normaliced device coordinates in range [-1.0,1.0]
uniform float u_time;
uniform vec2 u_resolution;

void main()
{
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    
    float tiles = 5.0;
    st = fract(st * tiles);
    
    vec3 color = vec3(0.0);
    float d = 0.0;

    // Remap space to -1 to 1.
    st = st *2.-1.;

    // Make Distance Field
    d = length(abs(st)-.32);
    d = length(min(abs(st)-.32,0.));

    // Visualize the Distance Field
    gl_FragColor = vec4(vec3(fract(d*10.0)),1.0);

    // Draw with the distance field
    gl_FragColor = vec4(vec3(step(.3,d)),1.0);
}
</script>

<canvas id="ogl-canvas" style="border: none"></canvas>