JavaScript二元运算符

2023-01-12 07:17:49

在WebGL项目上工作,我正在查看类示例中的代码.在其中一个循环中,给出了以下代码：

var c = (((i & 0x8) == 0) ^ ((j & 0x8)  == 0));

变量i和j在for循环中上升到某个值.这句话是什么意思？这是否确保变量c是十六进制形式？

var texSize = 64; 
var image1 = new Array(); 
for (var i =0; i<texSize; i++) 
    image1[i] = new Array(); 
for (var i =0; i<texSize; i++) 
    for ( var j = 0; j < texSize; j++) 
        image1[i][j] = new Float32Array(4); 
for (var i =0; i<texSize; i++) 
    for (var j=0; j<texSize; j++) 
    { 
        var c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)); 
        image1[i][j] = [c, c, c, 1]; 
    }

解决方法:

SMchrohan的回答是正确的.代码基本上是一个棋盘纹理.

?? ?? &安培; 0x8表示当第3位(0,1,2,3)为真时表达式为真.二进制中的位3是每隔一组8个值为真(0-7为假,8-15为真,16-23为假等).

然后代码与== 0相反.

它适用于i和j.

^表示异或 – 当两个部分不同(true,false或false,true)时为true,当它们都相同时为false(false,false或true,true).因为^是一个按位运算符,所以这两个值首先转换为整数,因此false变为0,true变为1.然后,2个int值的位被排除在外

0 ^ 0 = 0
1 ^ 0 = 1
0 ^ 1 = 1
1 ^ 1 = 0

这意味着image1中的每个条目都是[0,0,0,1]或[1,1,1,1]

这里有一些代码来绘制它

var texSize = 64; 
var image1 = new Array(); 
for (var i =0; i<texSize; i++) 
    image1[i] = new Array(); 
for (var i =0; i<texSize; i++) 
    for ( var j = 0; j < texSize; j++) 
        image1[i][j] = new Float32Array(4); 
for (var i =0; i<texSize; i++) 
    for (var j=0; j<texSize; j++) 
    { 
        var c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)); 
        image1[i][j] = [c, c, c, 1]; 
    }

// lets plot it

var ctx = document.createElement("canvas").getContext("2d");
document.body.appendChild(ctx.canvas);
ctx.canvas.width = texSize;
ctx.canvas.height = texSize;

for (var i =0; i<texSize; i++) 
    for (var j=0; j<texSize; j++) 
    { 
        var c = image1[i][j][0]
        ctx.fillStyle = c ? "red" : "yellow";
        ctx.fillRect(i, j, 1, 1);
    }

canvas { border: 1px solid black; }

<body></body>

请注意,代码似乎没有多大意义.它说texSize所以它似乎正在制作一个纹理,但它每个像素制作一个Float32Array(说的那条线)

image1[i][j] = new Float32Array(4);

然后它在这一行用一个JavaScript本机数组替换每个单独的Float32Arrays

image1[i][j] = [c, c, c, 1];

这使得Float32Array系列毫无用处.

最重要的是,我不知道1像素Float32Arrays的数组或数组是多少.您无法将其上传到WebGL.

通常我会为这样的整个纹理制作一个Uint8Array

var texSize = 64; 
var pixels = new Uint8Array(texSize * texSize * 4);

for (var i =0; i<texSize; i++)  {
    for (var j=0; j<texSize; j++) { 
        var c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)); 
        var p = c ? 255 : 0;
        var offset = (i * texSize + j) * 4;
        pixels[offset + 0] = p;  // red
        pixels[offset + 1] = p;  // green
        pixels[offset + 2] = p;  // blue
        pixels[offset + 3] = 255;// alpha
    }

}

或者我使用2D画布API来制作纹理

没有一些上下文虽然我不知道代码的最终目的是什么.

码农公寓

相关文章