Question

处理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]; 
    }

Answer 1

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

?? & 0x8表示当第3位（0,1,2,3）为真时表达式为真。二进制中的第3位是每隔一组8个值为真（0-7它是假的，8-15它是真的，16-23它是假的，等等）。

然后代码与== 0相反。

它适用于i和j。

^表示 exclusive-or ，当两个部分不同（true，false或false，true）时为true，当它们都相同时为false（false，false）或者是真的，真实的）。因为^是一个按位运算符，所以这两个值首先转换为整数，因此false变为0而true变为1.然后，2个int值的位为 exclusive-或 ed so

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

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

这里有一些代码来绘制它

＆＃13;

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);
    }

＆＃13;

canvas { border: 1px solid black; }

＆＃13;

<body></body>

＆＃13;

请注意，代码似乎没有多大意义。它说texSize所以它似乎在制作一个纹理，但是每个像素会产生一个Float32Array（所说的那条线）

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

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

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来制作纹理

没有一些上下文，但我不知道代码的最终目的是什么。

Answer 2

&是按位和。

^是按位xor。

0x8是整数8的十六进制表达式。

如果c或i，则{p> j将为1，但在第4位中没有1 - 也就是说，按位且0x8（二进制1000）返回0。

再详细说明一下：

i & 0x8将返回0（如果i的值在第4位为0）或8（如果在该位置有1）。

(i & 0x8) == 0将为真或假。

如果(((i & 0x8) == 0) ^ ((j & 0x8) == 0))或((i & 0x8) == 0)为真，则

((j & 0x8) == 0)为1，如果两者均为假，则为0，或者两者均为真。

JavaScript二元运算符

2 个答案: