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

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

我想在我的片段着色器中挑选出这部分：

不知道怎么选out.Hope谁能出出主意

谢谢。

Answer 1

GLSL 语言提供了像 log(x) or pow to do powerful calculations. See 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;

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

要找到"in"形状的面积，您必须将计算结果转化为原子语句。使用 step 函数将值与边进行比较，如果结果为真则获得 1.0，如果结果为假则获得 0.0。

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

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

例如测试由 f(x) 计算的 y 坐标是否小于 "under" （小于）函数形成的曲线：

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

要确定一个片段是否在表单中，您可以通过对浮点值的 "logical" 操作获得不同计算的结果。

例如逻辑 OR 运算可以通过 max 函数计算：

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

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

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

使用最终结果设置输出颜色。 mix 函数可用于在 2 种颜色之间进行插值。由于 "logocal" 计算结果为 0.0 或 1.0，因此 mix 函数用于 "select" 两种颜色中的一种：

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 中绘制由多个函数生成的形状？

How to draw a shape generated by several functions in GLSL?

shader

glsl

fragment-shader