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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To