小编joh*_*doe的帖子

我想要发生什么:

为了测试我想到的游戏艺术风格,我想以像素艺术形式渲染3D世界.例如,拍摄这样的场景(但是使用某种颜色/样式进行渲染,以便在像素化后看起来很好):

让它看起来像这样:

通过使用不同的造型3D源的方式,我认为像素化输出看起来不错.当然要获得这种效果,只需将图像缩小到~80p,然后使用最近邻重新采样将其放大到1080p.但是直接渲染到80p画布并且只是进行升级更有效.

这通常不是人们如何使用着色器来调整最近邻格式的位图大小,但是它的性能优于我发现实时进行这种转换的任何其他方式.

我的代码:

我的位图缓冲区存储在row major中,因为r1, g1, b1, a1, r2, g2, b2, a2...我正在使用gpu.js,它实际上将这个JS函数转换为着色器.我的目标是获取一个位图并以最大邻域缩放返回一个位图,因此每个像素变为2x2平方或3x3,依此类推.假设inputBuffer是由该setOutput方法确定的输出大小的缩放分数.

var pixelateMatrix = gpu.createKernel(function(inputBuffer, width, height, scale) {
  var y = Math.floor((this.thread.x / (width[0] * 4)) / scale[0]);
  var x = Math.floor((this.thread.x % (width[0] * 4)) / scale[0]);
  var remainder = this.thread.x % 4;
  return inputBuffer[(x * y) + remainder]; 
}).setOutput([width * height * 4]);

的jsfiddle

请记住,它正在遍历全尺寸输出的新缓冲区,因此我必须找到sourceBuffer基于当前索引 的较小坐标outputBuffer(由lib公开的索引this.thread.x).

发生了什么事:

这不是使最近邻居高档,而是制作一个漂亮的小彩虹(上面是小正常渲染,下面是着色器的结果,右边你可以看到一些调试记录,包含有关输入和输出缓冲区的统计数据) ): …

我在React Native中收到警告,我已经缩小到一行,我不知道为什么.

我已经构建了一个辅助函数来为类似的系列中的颜色和值设置动画:

animate([this, "textColor", 250, "#fff1cc"]);
animate([this, "rise", 250, 25], [this, "rise", 250, 0]);

而且该功能非常简单,请注意导致错误的注释行:

// React Modules

import { Animated } from "react-native";

// Export

export default function func() {
  step(0, arguments);
}

// Extras

function step(index, args, delay = 0) {
  if (args[index]) {
    let argument = args[index];
    index++;
    handle(argument, delay, () => {
      step(index, args);
    });
  }
}

function handle(argument, delay = 0, callback) {
  let that = argument[0];
  let label = argument[1];
  let duration = …

我想对物体的局部轴施加向前力,但我使用的引擎只允许我在全局轴上施加力.

我可以作为四元数访问对象的全局旋转.然而,我不熟悉使用quats(通常未经过高级数学训练).是否有足够的信息来抵消沿所需轴施加的力？怎么样？

例如,为了全球化,我会这样做:

this.entity.rigidbody.applyForce(0, 0, 5);

但为了保持沿物体的局部轴施加力,我需要根据物体的旋转量子以轴的不同方式分配施加的力,例如:

w:0.5785385966300964
x:0
y:-0.815654993057251
z:0

我已经研究了四元数试图解决这个问题,但观看一个关于它们是什么以及为什么它们被使用的视频并没有帮助我弄清楚如何与它们实际合作甚至开始弄清楚如何应用所需的偏移量这里.

到目前为止我尝试过的是对如何做到这一点的猜测,但这是错误的:

Math.degrees = function(radians) {
    return radians * 180 / Math.PI;
};

//converted this from a python func on wikipedia, 
//not sure if it's working properly or not
function convertQuatToEuler(w, x, y, z){ 
    ysqr = y * y;
    t0 = 2 * (w * x + y * z);
    t1 = 1 - 2 * (x * x + ysqr);
    X = Math.degrees(Math.atan2(t0, t1));
    t2 = 2 * …

我正在使用webpack，如果我理解正确，它不支持本机webworker语法，因此我尝试使用worker-loadernpm模块，但出现了一个奇怪的错误。

该模块可以在这里找到。

我的webpack配置：

module.exports = {
    entry: "./app",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [{
            test: /\.worker\.js$/,
            use: {
                loader: 'worker-loader'
            }
        }]
    }
}

我的代码触发错误：

import Worker from '../workers/sim.js';

class Synapse {
  // ...
}

module.exports = Synapse;

错误：

Cannot assign to read only property 'exports' of object '#<Object>'?

指向 module.exports = Synapse