Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 6, 2021 10:39 pm GMT

WegGL ( 3)

.obj , webgl

, gl.LINES.

( , )

, , /, ! :

! , ...

, gl.LINES , . - , , , .

, uv ( ), , , uv . - .

. , , . . , .
.

const uv4 = [[0, 0], [1, 0], [1, 1], [0, 1]]; //   //    .obj      .export function getVBForVSTFromObj(obj) {  const preLines = obj.split(/[\r
]
/).filter(s => s.length); // const exNs = (a, fchar) => a .filter(s => s[0] === fchar) .map(s => s .split(" ") .filter(s => s.length) .slice(1) .map(Number) ); // , (faces) const exFs = s => s .filter(s => s[0] === "f") .map(s => s .split(/\s+/) .filter(s => s.length) .slice(1) .map(s => s.split("/").map(Number)) ); const vertexList = exNs(preLines, "v"); // const faceList = exFs(preLines); // const filteredFaceList = faceList.filter(is => is.length === 4); // 4 , .. const vertexes = filteredFaceList .map(is => { const [v0, v1, v2, v3] = is.map(i => vertexList[i[0] - 1]); return [[v0, v1, v2], [v0, v2, v3]]; }) // .flat(4); const uvs = Array.from({ length: filteredFaceList.length }, () => [ [uv4[0], uv4[1], uv4[2]], [uv4[0], uv4[2], uv4[3]] ]).flat(4); // return [vertexes, uvs];}

, :

precision mediump float;varying vec2 v_texture_coords; //     // define   #define FN (0.07) //  ,  - ,   #define LINE_COLOR vec4(1,0,0,1) //  . .#define BACKGROUND_COLOR vec4(1,1,1,1) //  . .void main() {  if (     v_texture_coords.x < FN || v_texture_coords.x > 1.0-FN ||    v_texture_coords.y < FN || v_texture_coords.y > 1.0-FN   )    //       ,         gl_FragColor = LINE_COLOR;  else     gl_FragColor = BACKGROUND_COLOR;}

()



, ! . , , . smoothstep ( ) .

precision mediump float;uniform vec3 uLineColor; //      js,    uniform vec3 uBgColor;uniform float uLineWidth;varying vec2 vTextureCoords;//      uv  ""     //    threshold       ,    ,    gap      .   gap,   .//         0  1float calcFactor(vec2 uv, float threshold, float gap) {  return clamp(    smoothstep(threshold - gap, threshold + gap, uv.x) + smoothstep(threshold - gap, threshold + gap, uv.y), 0.,     1.  );}void main() {  float threshold = 1. - uLineWidth;  float gap = uLineWidth + .05;  float factor = calcFactor(vTextureCoords, threshold, gap);  //  mix   3   1   2,  .  gl_FragColor = mix(vec4(uLineColor, 1.), vec4(uBgColor, 1.), 1. - factor);}

,  ,   ?

, ! . - , .

, , "" .
, 2 . , ...

, . 2 , , , , , - .

, , cinema4d , .
, , , , , .

x .

, , - . , - , 2 4 , , .

, , - .

 ,

, .

if (vTextureCoords.x > uLineWidth && vTextureCoords.x < 1.0 - uLineWidth && vTextureCoords.y > uLineWidth && vTextureCoords.y < 1.0 - uLineWidth) {    gl_FragColor = vec4(uBgColor, 1.);  } else {    gl_FragColor = vec4(uLineColor, 1.);  }

- .

, webgl. webgl.

float border(vec2 uv, float uLineWidth, vec2 gap) {  vec2 xy0 = smoothstep(vec2(uLineWidth) - gap, vec2(uLineWidth) + gap, uv);  vec2 xy1 = smoothstep(vec2(1. - uLineWidth) - gap, vec2(1. - uLineWidth) + gap, uv);  vec2 xy = xy0 - xy1;  return clamp(xy.x * xy.y, 0., 1.);}void main() {  vec2 uv = vTextureCoords;  vec2 fw = vec2(uLineWidth + 0.05);  float br = border(vTextureCoords, uLineWidth, fw);  gl_FragColor = vec4(mix(uLineColor, uBgColor, br), 1.);}

. !

, , , .
, OES_standard_derivatives webgl. - , glsl - . fwidth ( , , ), . , .

  #ifdef GL_OES_standard_derivatives    fw = fwidth(uv);  #endif

, !

!


Original Link: https://dev.to/dimensi/weggl-3-3k58

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To