Question

我试图用GLSL绘制复杂的形状，它由4个功能图像生成，它们是

x ^ 2 + y ^ 2 = 1
y = 0.8 * log（0.63 * x + 0.64）+0.8
y = 0.5 * log（10 * x-2）+1
y = -0.1（x + -0.5）^ 2 + 1.8

这是我在desmos中绘制的形状：Magatama。

这是我到目前为止所执行的：sharingan

我想在片段着色器中选择这一部分：

我不知道该如何挑选。希望有人能提供一些想法。

THX。

Answer 1

GLSL语言提供了log(x)或pow之类的功能来进行强大的计算。有关完整的功能，请参见GLSL - The OpenGL Shading Language 4.6; Chapter 8. Built-In Functions; page 152。

例如

float y1 = 0.4*log(0.63*x+0.64)+1.8;

要绘制这样的形状，您必须在屏幕空间中绘制一个四边形，然后将规范化的设备x和y坐标传递给片段着色器。左下角的坐标是（-1，-1），右上角的坐标是（1，1），当然中心是0.0。

要找到形状“处于”状态的区域，必须将计算结果转换为原子语句。使用step函数将值与边进行比较，如果结果为true，则获取1.0；如果结果为false，则获取0.0。

例如测试坐标是否在圆中：

float a0 = step(x*x + y*y, 1.0);

例如测试由 f（x）计算出的y坐标是否在函数的所形成曲线的下方（小于）：

  float y3 = -0.1 * pow(x+-0.5, 2.0)+1.8;
  float a3 = step(y, y3);

要找出片段的格式，您可以通过对浮点值进行“逻辑”运算来获得不同计算的结果。

例如可以通过max函数来计算逻辑 OR 操作：

float a = max(a0, a1); // a := a0 OR a1

例如逻辑 AND 运算可以通过乘法运算符或min函数来计算：

float a = a0 * a1; // a := a0 AND a1

使用最终结果设置输出颜色。 mix函数可用于在2种颜色之间进行插值。由于计算的“标称”结果为0.0或1.0，因此mix函数用于“选择”以下2种颜色：

vec3 col_fill = vec3(1.0, 0.0, 0.0); // red
vec3 col_back = vec3(0.0, 0.0, 0.0); // black

vec4 frag_color = vec4(mix(col_back, col_fill, a), 1.0);

请参阅WebGL示例，该示例使用具有此技术的片段着色器来生成与问题相似的形状。由于问题的公式无法产生预期的结果，因此对公式进行了一些调整。形状的不同部分的逻辑结果用不同的颜色表示：

(function loadscene() {

var gl, canvas, prog, bufObj = {};

function render(deltaMS) {

  gl.viewport( 0, 0, vp_size[0], vp_size[1] );
  gl.enable( gl.DEPTH_TEST );
  gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
  gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
  ShProg.Use( progDraw );
  ShProg.SetF2( progDraw, "resolution", vp_size );
  VertexBuffer.Draw( bufRect );

  requestAnimationFrame(render);
}  

function initScene() {

  canvas = document.getElementById( "texture-canvas");
  gl = canvas.getContext( "experimental-webgl" );
  //gl = canvas.getContext( "webgl2" );
  if ( !gl )
    return;
    
  progDraw = ShProg.Create( 
    [ { source : "draw-shader-vs", stage : gl.VERTEX_SHADER },
      { source : "draw-shader-fs", stage : gl.FRAGMENT_SHADER }
    ] );
  progDraw.inPos = gl.getAttribLocation( progDraw.progObj, "inPos" );
  if ( progDraw.progObj == 0 )
      return;

  bufRect = VertexBuffer.Create(
  [ { data :  [ -1, -1, 1, -1, 1, 1, -1, 1 ], attrSize : 2, attrLoc : progDraw.inPos } ],
    [ 0, 1, 2, 0, 2, 3 ] );

  window.onresize = resize;
  resize();
  requestAnimationFrame(render);
}

function resize() {
  //vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];
  vp_size = [window.innerWidth, window.innerHeight]
  vp_size[0] = vp_size[1] = Math.min(vp_size[0], vp_size[1]); 
  //vp_size = [256, 256]
  canvas.width = vp_size[0];
  canvas.height = vp_size[1];
}

var ShProg = {
Create: function (shaderList) {
  var shaderObjs = [];
  for (var i_sh = 0; i_sh < shaderList.length; ++i_sh) {
      var shderObj = this.Compile(shaderList[i_sh].source, shaderList[i_sh].stage);
      if (shderObj) shaderObjs.push(shderObj);
  }
  var prog = {}
  prog.progObj = this.Link(shaderObjs)
  if (prog.progObj) {
      prog.attrInx = {};
      var noOfAttributes = gl.getProgramParameter(prog.progObj, gl.ACTIVE_ATTRIBUTES);
      for (var i_n = 0; i_n < noOfAttributes; ++i_n) {
          var name = gl.getActiveAttrib(prog.progObj, i_n).name;
          prog.attrInx[name] = gl.getAttribLocation(prog.progObj, name);
      }
      prog.uniLoc = {};
      var noOfUniforms = gl.getProgramParameter(prog.progObj, gl.ACTIVE_UNIFORMS);
      for (var i_n = 0; i_n < noOfUniforms; ++i_n) {
          var name = gl.getActiveUniform(prog.progObj, i_n).name;
          prog.uniLoc[name] = gl.getUniformLocation(prog.progObj, name);
      }
  }
  return prog;
},
AttrI: function (prog, name) { return prog.attrInx[name]; },
UniformL: function (prog, name) { return prog.uniLoc[name]; },
Use: function (prog) { gl.useProgram(prog.progObj); },
SetI1: function (prog, name, val) { if (prog.uniLoc[name]) gl.uniform1i(prog.uniLoc[name], val); },
SetF1: function (prog, name, val) { if (prog.uniLoc[name]) gl.uniform1f(prog.uniLoc[name], val); },
SetF2: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform2fv(prog.uniLoc[name], arr); },
SetF3: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform3fv(prog.uniLoc[name], arr); },
SetF4: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform4fv(prog.uniLoc[name], arr); },
SetM33: function (prog, name, mat) { if (prog.uniLoc[name]) gl.uniformMatrix3fv(prog.uniLoc[name], false, mat); },
SetM44: function (prog, name, mat) { if (prog.uniLoc[name]) gl.uniformMatrix4fv(prog.uniLoc[name], false, mat); },
Compile: function (source, shaderStage) {
  var shaderScript = document.getElementById(source);
  if (shaderScript)
      source = shaderScript.text;
  var shaderObj = gl.createShader(shaderStage);
  gl.shaderSource(shaderObj, source);
  gl.compileShader(shaderObj);
  var status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
  if (!status) alert(gl.getShaderInfoLog(shaderObj));
  return status ? shaderObj : null;
},
Link: function (shaderObjs) {
  var prog = gl.createProgram();
  for (var i_sh = 0; i_sh < shaderObjs.length; ++i_sh)
      gl.attachShader(prog, shaderObjs[i_sh]);
  gl.linkProgram(prog);
  status = gl.getProgramParameter(prog, gl.LINK_STATUS);
  if ( !status ) alert(gl.getProgramInfoLog(prog));
  return status ? prog : null;
} };

var VertexBuffer = {
Create: function(attribs, indices, type) {
  var buffer = { buf: [], attr: [], inx: gl.createBuffer(), inxLen: indices.length, primitive_type: type ? type : gl.TRIANGLES };
  for (var i=0; i<attribs.length; ++i) {
      buffer.buf.push(gl.createBuffer());
      buffer.attr.push({ size : attribs[i].attrSize, loc : attribs[i].attrLoc, no_of: attribs[i].data.length/attribs[i].attrSize });
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer.buf[i]);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array( attribs[i].data ), gl.STATIC_DRAW);
  }
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
  if ( buffer.inxLen > 0 ) {
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer.inx);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( indices ), gl.STATIC_DRAW);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
  }
  return buffer;
},
Draw: function(bufObj) {
  for (var i=0; i<bufObj.buf.length; ++i) {
      gl.bindBuffer(gl.ARRAY_BUFFER, bufObj.buf[i]);
      gl.vertexAttribPointer(bufObj.attr[i].loc, bufObj.attr[i].size, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray( bufObj.attr[i].loc);
  }
  if ( bufObj.inxLen > 0 ) {
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufObj.inx);
      gl.drawElements(bufObj.primitive_type, bufObj.inxLen, gl.UNSIGNED_SHORT, 0);
      gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null );
  }
  else
      gl.drawArrays(bufObj.primitive_type, 0, bufObj.attr[0].no_of );
  for (var i=0; i<bufObj.buf.length; ++i)
      gl.disableVertexAttribArray(bufObj.attr[i].loc);
  gl.bindBuffer( gl.ARRAY_BUFFER, null );
} };

initScene();

})();

<script id="draw-shader-fs" type="x-shader/x-fragment">
precision mediump float;
  
uniform vec2 resolution;
varying vec2 vpos;

vec3 col_fill = vec3(0.6);
vec3 col_back = vec3(0.0);

float scale = 3.0;

void main( void )
{
    vec2 pos = scale * vpos;
    float x = pos.x;
    float y = pos.y;

    float a0 = step(x*x + y*y, 1.0); 
    
    float y1 = 0.4*log(0.63*x+0.64)+1.8;
    float a1 = step(y, y1);

    float y2 = 0.3*log(10.0*x-2.0)+0.8;
    float a2 = step(y2, y) + step(x,0.2);

    float y3 = -0.1 * pow(x+-0.5, 2.0)+1.8;
    float a3 = step(y, y3);

    float a = max(a0, a1*a2*a3*step(0.0,y));

    vec3 rgb = mix(col_back, col_fill, a) + 0.4 * vec3(a1, a2, a3);
    
    gl_FragColor = vec4(rgb, 1.0);
}
</script>

<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;

attribute vec2 inPos;
varying vec2 vpos;

void main()
{
    vpos = inPos.xy; 
    gl_Position = vec4( inPos.xy, 0.0, 1.0 );
}
</script>

<canvas id="texture-canvas" style="border: none"></canvas>

如何绘制由GLSL中的多个函数生成的形状？

1 个答案: