KinderPass

kinderpass

Startups Of The Year 2023: Asia Winners

Moving to the upcoming WebGPU means more than just switching graphics APIs. It's also a step towards the future of web graphics. But this migration will turn out better with preparation and understanding — and this article will get you ready. Hello everyone, my name is Dmitrii Ivashchenko and I'm a software engineer at MY.GAMES. In this article, we'll discuss the differences between WebGL and the upcoming WebGPU, and we'll lay out how to prepare your project for migration. Content Overview Timeline of WebGL and WebGPU The current state of WebGPU, and what's to come High-level Conceptual Differences Initialization • WebGL: The Context Model • WebGPU: The Device Model Programs and Pipelines • WebGL: Program • WebGPU: Pipeline Uniforms • Uniforms in WebGL 1 • Uniforms in WebGL 2 • Uniforms in WebGPU Shaders • Shader Language: GLSL vs WGSL • Comparison of Data Types • Structures • Function Declarations • Built-in functions • Shader Conversion Convention Differences Textures • Viewport Space • Clip Spaces WebGPU Tips & Tricks • Minimize the number of pipelines you use. • Create pipelines in advance • Use RenderBundles Summary Timeline of WebGL and WebGPU , like many other web technologies, has roots that stretch back quite far into the past. To understand the dynamics and motivation behind the move towards WebGPU, it's helpful to first take a quick look at the history of WebGL development: WebGL The desktop version of OpenGL debuts. OpenGL desktop (1993) : This was the first stable release of WebGL, based on OpenGL ES 2.0, which was itself introduced in 2007. It provided web developers with the ability to use 3D graphics directly in browsers, without the need for additional plugins. WebGL 1.0 (2011) : Introduced six years after the first version, WebGL 2.0 was based on OpenGL ES 3.0 (2012). This version brought with it a number of improvements and new capabilities, making 3D graphics on the web even more powerful. WebGL 2.0 (2017) In recent years, there has been a surge of interest in new graphics APIs that provide developers with more control and flexibility: : Created by the Khronos group, this cross-platform API is the "successor" to OpenGL. Vulkan provides lower-level access to graphics hardware resources, allowing for high-performance applications with better control over graphics hardware. Vulkan (2016) : This API was created by Microsoft and is exclusively for Windows and Xbox. D3D12 is the successor to D3D10/11 and provides developers with deeper control over graphics resources. D3D12 (2015) : Created by Apple, Metal is an exclusive API for Apple devices. It was designed with maximum performance on Apple hardware in mind. Metal (2014) The current state of WebGPU, and what's to come Today, WebGPU is available on multiple platforms such as Windows, Mac, and ChromeOS through the Google Chrome and Microsoft Edge browsers, starting with version 113. Support for Linux and Android is expected in the near future. Here are some of the engines that already support (or offer experimental support) for WebGPU: : Full support for WebGPU. Babylon JS : Experimental support at the moment. ThreeJS : In development, but with very promising prospects. PlayCanvas : Very early and experimental WebGPU support was announced in version 2023.2 alpha. Unity : Officially supports WebGPU, making it one of the pioneers in this area. Cocos Creator 3.6.2 : currently supported in v113+ for Windows, macOS, and ChromeOS only. Construct Considering this, transitioning to WebGPU or at least preparing projects for such a transition appears to be a timely step in the near future. High-level Conceptual Differences Let's zoom out and take a look at some of the high-level conceptual differences between WebGL and WebGPU, starting with initialization. Initialization When starting to work with graphics APIs, one of the first steps is to initialize the main object for interaction. This process differs between WebGL and WebGPU, with some peculiarities for both systems. WebGL: The Context Model In WebGL, this object is known as "context", which essentially represents an interface for drawing on an HTML5 canvas element. Obtaining this context is quite simple: const gl = canvas.getContext('webgl'); The context of WebGL is actually tied to a specific canvas. This means that if you need to render on multiple canvases, you will need multiple contexts. WebGPU: The Device Model WebGPU introduces a new concept called "device". This device represents a GPU abstraction that you will interact with. The initialization process is a bit more complex than in WebGL, but it provides more flexibility: const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const context = canvas.getContext('webgpu');
context.configure({
   device,
   format: 'bgra8unorm',
}); One of the advantages of this model is that one device can render on multiple canvases or even none. This provides additional flexibility; for example, one device may control rendering in multiple windows or contexts. Programs and Pipelines WebGL and WebGPU represent different approaches to managing and organizing the graphics pipeline. WebGL: Program In WebGL, the main focus is on the shader program. The program combines vertex and fragment shaders, defining how vertices should be transformed and how each pixel should be colored. const program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);
gl.bindAttribLocation(program, 'position', 0);
gl.linkProgram(program); Steps for creating a program in WebGL: : The source code for shaders is written and compiled. Creating Shaders : Compiled shaders are attached to the program and then linked. Creating Program : The program is activated before rendering. Using Program : Data is transmitted to the activated program. Data Transmission This process allows for flexible graphics control, but can also be complex and prone to errors, especially for large and complex projects. WebGPU: Pipeline WebGPU introduces the concept of a "pipeline" instead of a separate program. This pipeline combines not only shaders but also other information, which in WebGL, is established as states. So, creating a pipeline in WebGPU looks more complex: const pipeline = device.createRenderPipeline({
 layout: 'auto',
 vertex: {
   module: shaderModule, entryPoint: 'vertexMain',
   buffers: [{
     arrayStride: 12,
     attributes: [{
       shaderLocation: 0, offset: 0, format: 'float32x3'
     }]
   }],
 },
 fragment: {
   module: shaderModule, entryPoint: 'fragmentMain',
   targets: [{ format, }],
 },
}); Steps to create a pipeline in WebGPU: : The shader source code is written and compiled, similar to how it's done in WebGL. Shader definition : Shaders and other rendering parameters are combined into a pipeline. Pipeline creation : The pipeline is activated before rendering. Pipeline usage While WebGL separates each aspect of rendering, WebGPU tries to encapsulate more aspects into a single object, making the system more modular and flexible. Instead of separately managing shaders and rendering states, as is done in WebGL, WebGPU combines everything into one pipeline object. This makes the process more predictable and less prone to errors: Uniforms Uniform variables provide constant data that is available to all shader instances. Uniforms in WebGL 1 In basic WebGL, we have the ability to set variables directly through API calls. uniform : GLSL uniform vec3 u_LightPos;
uniform vec3 u_LightDir;
uniform vec3 u_LightColor; : JavaScript const location = gl.getUniformLocation(p, "u_LightPos");
gl.uniform3fv(location, [100, 300, 500]); This method is simple, but requires multiple API calls for each variable. uniform Uniforms in WebGL 2 With the arrival of WebGL 2, we now have the ability to group variables into buffers. Although you can still use separate uniform shaders, a better option is to group different uniforms into a larger structure using uniform buffers. Then you send all this uniform data to the GPU at once, similar to how you can load a vertex buffer in WebGL 1. This has several performance advantages, such as reducing API calls and being closer to how modern GPUs work. uniform : GLSL layout(std140) uniform ub_Params {
   vec4 u_LightPos;
   vec4 u_LightDir;
   vec4 u_LightColor;
}; : JavaScript gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, gl.createBuffer()); To bind subsets of a large uniform buffer in WebGL 2, you can use a special API call known as . In WebGPU, there is something similar called dynamic uniform buffer offsets where you can pass a list of offsets when calling the API. bindBufferRange setBindGroup Uniforms in WebGPU WebGPU offers us an even better method. In this context, individual variables are no longer supported, and work is done exclusively through buffers. uniform uniform : WGSL [[block]] struct Params {
   u_LightPos : vec4<f32>;
   u_LightColor : vec4<f32>;
   u_LightDirection : vec4<f32>;
};
[[group(0), binding(0)]] var<uniform> ub_Params : Params; : JavaScript const buffer = device.createBuffer({
  usage: GPUBufferUsage.UNIFORM,
  size: 8
}); Modern GPUs prefer data to be loaded in one large block, rather than many small ones. Instead of recreating and rebinding small buffers each time, consider creating one large buffer and using different parts of it for different draw calls. This approach can significantly increase performance. WebGL is more imperative, resetting global state with each call, and striving to be as simple as possible. WebGPU, on the other hand, aims to be more object-oriented and focused on resource reuse, which leads to efficiency. Transitioning from WebGL to WebGPU may seem difficult due to differences in methods. However, starting with a transition to WebGL 2 as an intermediate step can simplify your life. Shaders Migrating from WebGL to WebGPU requires changes not only in the API, but also in shaders. The WGSL specification is designed to make this transition smooth and intuitive, while maintaining efficiency and performance for modern GPUs. Shader Language: GLSL vs WGSL WGSL is designed to be a bridge between WebGPU and native graphics APIs. Compared to GLSL, WGSL looks a bit more verbose, but the structure remains familiar. Here's an example shader for texture: : GLSL sampler2D myTexture;
varying vec2 vTexCoord;
void main() {
  return texture(myTexture, vTexCoord);
} : WGSL [[group(0), binding(0)]] var mySampler: sampler;
[[group(0), binding(1)]] var myTexture: texture_2d<f32>;
[[stage(fragment)]]
fn main([[location(0)]] vTexCoord: vec2<f32>) -> [[location(0)]] vec4<f32> {
  return textureSample(myTexture, mySampler, vTexCoord);
} Comparison of Data Types The table below shows a comparison of the basic and matrix data types in GLSL and WGSL: Transitioning from GLSL to WGSL demonstrates a desire for stricter typing and explicit definition of data sizes, which can improve code readability and reduce the likelihood of errors. Structures The syntax for declaring structures has also changed: GLSL: struct Light {
  vec3 position;
  vec4 color;
  float attenuation;
  vec3 direction;
  float innerAngle;
  float angle;
  float range;
}; WGSL: struct Light {
  position: vec3<f32>,
  color: vec4<f32>,
  attenuation: f32,
  direction: vec3<f32>,
  innerAngle: f32,
  angle: f32,
  range: f32,
}; Introducing explicit syntax for declaring fields in WGSL structures emphasizes the desire for greater clarity and simplifies understanding of data structures in shaders. Function Declarations : GLSL float saturate(float x) {
	return clamp(x, 0.0, 1.0);
} : WGSL fn saturate(x: f32) -> f32 {
  return clamp(x, 0.0, 1.0);
} Changing the syntax of functions in WGSL reflects the unification of the approach to declarations and return values, making the code more consistent and predictable. Built-in functions In WGSL, many built-in GLSL functions have been renamed or replaced. For example: Renaming built-in functions in WGSL not only simplifies their names, but also makes them more intuitive, which can facilitate the transition process for developers familiar with other graphics APIs. Shader Conversion For those who are planning to convert their projects from WebGL to WebGPU, it's important to know that there are tools for automatically converting GLSL to WGSL, such as **[Naga](https://github.com/gfx-rs/naga/)**, which is a Rust library for converting GLSL to WGSL. It can even work right in your browser with the help of WebAssembly. Here are Naga supported end-points: Convention Differences Textures After migration, you may encounter a surprise in the form of flipped images. Those who have ever ported applications from OpenGL to Direct3D (or vice versa) have already faced this classic problem. In the context of OpenGL and WebGL, textures are usually loaded in such a way that the starting pixel corresponds to the bottom left corner. However, in practice, many developers load images starting from the top left corner, which leads to the flipped image error. Nevertheless, this error can be compensated by other factors, ultimately leveling out the problem. Unlike OpenGL, systems such as Direct3D and Metal traditionally use the upper-left corner as the starting point for textures. Considering that this approach seems to be the most intuitive for many developers, the creators of WebGPU decided to follow this practice. Viewport Space If your WebGL code selects pixels from the frame buffer, be prepared for the fact that WebGPU uses a different coordinate system. You may need to apply a simple "y = 1.0 - y" operation to correct the coordinates. Clip Spaces When a developer faces a problem where objects are clipped or disappear earlier than expected, this is often related to differences in the depth domain. There's a difference between WebGL and WebGPU in how they define the depth range of the clip space. While WebGL uses a range from -1 to 1, WebGPU uses a range from 0 to 1, similar to other graphics APIs such as Direct3D, Metal, and Vulkan. This decision was made due to several advantages of using a range from 0 to 1 that were identified while working with other graphics APIs. The main responsibility for transforming your model's positions into clip space lies with the projection matrix. The simplest way to adapt your code is to ensure that your projection matrix outputs results in the range of 0 to 1. For those using libraries such as gl-matrix, there is a simple solution: instead of using the function, you can use ; similar functions are available for other matrix operations. perspective perspectiveZO if (webGPU) {
	// Creates a matrix for a symetric perspective-view frustum
  // using left-handed coordinates
  mat4.perspectiveZO(out, Math.PI / 4, ...);
} else {
  // Creates a matrix for a symetric perspective-view frustum
  // based on the default handedness and default near
  // and far clip planes definition.
  mat4.perspective(out, Math.PI / 4, …);
} However, sometimes you may have an existing projection matrix and you can't change its source. In this case, to transform it into a range from 0 to 1, you can pre-multiply your projection matrix by another matrix that corrects the depth range. WebGPU Tips & Tricks Now, let's discuss some tips and tricks for working with WebGPU. Minimize the number of pipelines you use. The more pipelines you use, the more state switching you have, and the less performance; this may not be trivial, depending on where your assets come from. Create pipelines in advance Creating a pipeline and using it immediately may work, but this is not recommended. Instead, create functions that return immediately and start working on a different thread. When you use the pipeline, the execution queue needs to wait for pending pipeline creations to finish. This can result in significant performance issues. To avoid this, make sure to leave some time between creating the pipeline and first using it. Or, even better, use the variants! The promise resolves when the pipeline is ready to use, without any stalling. create*PipelineAsync device.createComputePipelineAsync({
 compute: {
   module: shaderModule,
   entryPoint: 'computeMain'
 }
}).then((pipeline) => {
  const commandEncoder = device.createCommandEncoder();
  const passEncoder = commandEncoder.beginComputePass();
  passEncoder.setPipeline(pipeline);
  passEncoder.setBindGroup(0, bindGroup);
  passEncoder.dispatchWorkgroups(128);
  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);
}); Use RenderBundles Render bundles are pre-recorded, partial, reusable render passes. They can contain most rendering commands (except for things like setting the viewport) and can be "replayed" as part of an actual render pass later on. const renderPass = encoder.beginRenderPass(descriptor);

renderPass.setPipeline(renderPipeline);
renderPass.draw(3);

renderPass.executeBundles([renderBundle]);

renderPass.setPipeline(renderPipeline);
renderPass.draw(3);

renderPass.end(); Render bundles can be executed alongside regular render pass commands. The render pass state is reset to defaults before and after every bundle execution. This is primarily done to reduce the JavaScript overhead of drawing. GPU performance remains the same regardless of the approach. Summary Transitioning to WebGPU means more than just switching graphics APIs. It's also a step towards the future of web graphics, combining successful features and practices from various graphics APIs. This migration requires a thorough understanding of technical and philosophical changes, but the benefits are significant. Useful Resources & Links: WebGPU — All of the cores, none of the canvas From WebGL to WebGPU in Construct by Alain Galvan Raw WebGPU tutorial by Brandon Jones WebGPU Best Practices WebGL + WebGPU Meetup - July 2023 Link

Migrating from WebGL to WebGPU

WebGL থেকে WebGPU-তে স্থানান্তরিত হচ্ছে

Migration von WebGL zu WebGPU

Migrando de WebGL a WebGPU

Migration de WebGL vers WebGPU

WebGL से WebGPU पर माइग्रेट किया जा रहा है

WebGL から WebGPU への移行

WebGL에서 WebGPU로 마이그레이션

Migrando de WebGL para WebGPU

Переход с WebGL на WebGPU

WebGL'den WebGPU'ya geçiş

Di chuyển từ WebGL sang WebGPU

从 WebGL 迁移到 WebGPU

Part 1: Intro In this article, I’ll try to give a brief but complete overview of what generative art is, how it is connected to NFTs, and how one can start making generative things on a blockchain. I’ll try to answer all these questions based on my personal experience of making and releasing an NFT collection of generative mushrooms written in javascript. Background I love to code unusual things just for fun. During the New Year holidays, I was spammed so hard by news about NFTs that I finally decided to try to make something creative in this paradigm. I was never excited by the idea of uploading JPEGs onto a blockchain, but the possibility of onchain generative art grabbed my attention. Briefly, the idea behind it is to make some token generator that gives you a unique art object each time you “mint” it (in actuality, call a method in the blockchain which spends some of your money on its execution and also gives some money to the artist). Definitely, there is some magic in the feeling that your transaction generates a unique object which will be stored into the blockchain forever, isn’t it? There are some art platforms that exploit this idea, the most famous of them is . But as it is has a lot of bureaucracy to enter and also it is built on the Ethereum blockchain, which still uses proof-of-work and has a very high gas price, I decided to try myself on a more democratic, cheap, and eco-friendly platform - artblocks.io fxhash.xyz What is a generative NFT artwork? All the generative NFTs are basically webpages that draw something on the canvas using either vanilla javascript or some third-party libraries. Taking a stab at classification, from my perspective I’d broadly divide all generative NFTs into 3 categories: artworks, artworks, and artworks. abstract math concrete procedural variative hand-drawn The first class, abstract math, utilizes some to generate an abstract image: there may be some fractals, attractors, cellular automatons, etc. Procedural arts are trying to describe some . And the third class, variative hand-drawn, is usually simple randomization of some . mathematical concepts concrete things using parametrizations pre-drawn parts of the image Also, there are some experimental and interactive works, even and , but these are much rarer. modular synthesizers games So what we will do during this article is to describe a procedural model of a mushroom and randomize it using the transaction hash. Combined with an artistic vision, composition, and stylization this gives us what’s called a generative NFT artwork. Part 2: Drawing a mushroom 🍄 Ok, let’s end up with all that philosophy and move on to the technical part. This project was made entirely using library, which has a reasonably . Three.js simple and well-documented API Stipe Basically, a stipe can be parametrized as a closed contour extrusion along some spline (let’s call it base spline). To create the base spline I used class from Three js. Then, I created the geometry vertex-by-vertex by moving another closed shape along the base spline and finally connected those vertices with faces. I used for that purpose. CatmullRomCurve3 BufferGeometry stipe_vSegments = 30; // vertical resolution
stipe_rSegments = 20; // angular resolution
stipe_points = []; // vertices
stipe_indices = []; // face indices

stipe_shape = new THREE.CatmullRomCurve3( ... , closed=false );

function stipe_radius(a, t) { ... }

for (var t = 0; t < 1; t += 1 / stipe_vSegments) {
  // stipe profile curve
  var curve = new THREE.CatmullRomCurve3( [
    new THREE.Vector3( 0, 0, stipe_radius(0, t)),
    new THREE.Vector3( stipe_radius(Math.PI / 2, t), 0, 0 ),
    new THREE.Vector3( 0, 0, -stipe_radius(Math.PI, t)),
    new THREE.Vector3( -stipe_radius(Math.PI * 1.5, t), 0, 0 ),
  ], closed=true, curveType='catmullrom', tension=0.75);

  var profile_points = curve.getPoints( stipe_rSegments );

  for (var i = 0; i < profile_points.length; i++) {
  	stipe_points.push(profile_points[i].x, profile_points[i].y, profile_points[i].z);
  }
}

// <- here you need to compute indices of faces
// and then create a BufferGeometry
var stipe = new THREE.BufferGeometry();
stipe.setAttribute('position', new THREE.BufferAttribute(new Float32Array(stipe_points), 3));
stipe.setIndex(stipe_indices);
stipe.computeVertexNormals(); Stipe noise To be more natural, the stipe surface may somehow vary along with its height. I defined stipe radius as a function of the and of the point on the base spline. Then, a slight amount of noise is added to the radius value depending on these parameters. angle relative height base_radius = 1; // mean radius
noise_c = 2; // higher this - higher the deformations

// stipe radius as a function of angle and relative position
function stipe_radius(a, t) {
	return base_radius + (1 - t)*(1 + Math.random())*noise_c;
} Cap Cap can also be parameterized as a spline (let’s also call it a base spline) rotating around the top of the stipe. Let’s name the surface spawned by this rotation a base surface. Then base surface will be defined as a function of the position of a point on the base spline and the rotation around the stipe top. This parametrization will allow us to gracefully apply some noises to the surface later. cap_rSegments = 30; // radial resolution
cap_cSegments = 20; // angular resolution

cap_points = [];
cap_indices = [];

// cap surface as a function of polar coordinates
function cap_surface(a0, t0) {
  // 1. compute (a,t) from (a0,t0), e.g apply noise
  // 2. compute spline value in t
  // 3. rotate it by angle a around stipe end
  // 4. apply some other noises/transformations
  ...
  return surface_point;
}

// spawn surface vertices with resolution
// cap_rSegments * cap_cSegments
for (var i = 1; i <= cap_rSegments; i++) {
  var t0 = i / cap_rSegments;
  for (var j = 0; j < cap_cSegments; j++) {
    var a0 = Math.PI * 2 / cap_cSegments * j;
    var surface_point = cap_surface(a0, t0);
    cap_points.push(surface_point.x, surface_point.y, surface_point.z);
  }
}

// <- here you need to compute indices of faces
// and then create a BufferGeometry
var cap = new THREE.BufferGeometry();
cap.setAttribute('position', new THREE.BufferAttribute(new Float32Array(cap_points), 3));
cap.setIndex(cap_indices);
cap.computeVertexNormals(); Cap noise To be more realistic, the cap also needs some noise. I divided cap noise into 3 components: , and noises. Radial noise affects the relative position of the vertex on the base spline. Angular noise changes the angle of base spline rotation around the top of the stipe. radial angular normal And finally, normal noise changes the position of the vertex along the base surface normally at that point. While defining the cap surface in a polar coordinate system it’s useful to apply 2d for these distortions. I used library for that. Perlin noise noisejs function radnoise(a, t) {
  return -Math.abs(NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * 0.5);
}

function angnoise(a, t) {
  return NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * 0.2;
}

function normnoise(a, t) {
  return NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * t;
}

function cap_surface(a0, t0) {
  // t0 -> t by adding radial noise
  var t = t0 * (1 + radnoise(a, t0));

  // compute normal vector in t
  var shape_point = cap_shape.getPointAt(t);
  var tangent = cap_shape.getTangentAt(t);
  var norm = new THREE.Vector3(0,0,0);
  const z1 = new THREE.Vector3(0,0,1);
  norm.crossVectors(z1, tangent);

  // a0 -> a by adding angular noise
  var a = angnoise(a0, t);
  var surface_point = new THREE.Vector3(
    Math.cos(a) * shape_point.x,
    shape_point.y,
    Math.sin(a) * shape_point.x
  );

  // normal noise coefficient
  var surfnoise_val = normnoise(a, t);

  // finally surface point
  surface_point.x += norm.x * Math.cos(a) * surfnoise_val;
  surface_point.y += norm.y * surfnoise_val;
  surface_point.z += norm.x * Math.sin(a) * surfnoise_val;

  return surface_point;
} The rest of the shroom: scales, gills, ring The geometries of the gills and ring are very similar to the geometry of the cap. An easy way to create scales is to spawn noisy vertices around some random anchor points on the cap surface and then create based on them. ConvexGeometry bufgeoms = [];
scales_num = 20;
n_vertices = 10;
scale_radius = 2;

for (var i = 0; i < scales_num; i++) {
  var scale_points = [];

  // choose a random center of the scale on the cap
  var a = Math.random() * Math.PI * 2;
  var t = Math.random();
  var scale_center = cap_surface(a, t);

  // spawn a random point cloud around the scale_center
  for (var j = 0; j < n_vertices; j++) {
    scale_points.push(new THREE.Vector3(
      scale_center.x + (1 - Math.random() * 2) * scale_radius, 
      scale_center.y + (1 - Math.random() * 2) * scale_radius,
      scale_center.z + (1 - Math.random() * 2) * scale_radius
	);
  }

  // create convex geometry using these points
  var scale_geometry = new THREE.ConvexGeometry( scale_points );
  bufgeoms.push(scale_geometry);
}

// join all these geometries into one BufferGeometry
var scales = THREE.BufferGeometryUtils.mergeBufferGeometries(bufgeoms); Collisions check To prevent unreal intersections when spawning multiple mushrooms in the scene one needs to check collisions between them. that checks collisions using raycasting from each mesh point. Here I found a code snippet To reduce computation time I generate a low-poly twin of the mushroom along with the mushroom itself. This low-poly model then is used to check collisions with other shrooms. for (var vertexIndex = 0; vertexIndex < Player.geometry.attributes.position.array.length; vertexIndex++)
{       
    var localVertex = new THREE.Vector3().fromBufferAttribute(Player.geometry.attributes.position, vertexIndex).clone();
    var globalVertex = localVertex.applyMatrix4(Player.matrix);
    var directionVector = globalVertex.sub( Player.position );

    var ray = new THREE.Raycaster( Player.position, directionVector.clone().normalize() );
    var collisionResults = ray.intersectObjects( collidableMeshList );
    if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
    {
        // a collision occurred... do something...
    }
} Rendering and stylization Initially, I wanted to achieve an effect of 2d-drawing despite all the generation being made in 3d. The first thing that comes to mind in the context of stylization is the outline effect. I’m not a pro in shaders so I just took the . Using it I got a nice pencil style of the shroom contour. outline effect from this example The next thing on the way back to 2d is proper colorization. The texture should be a bit noisy and have some soft shadows. There is a lazy hack for those who, like me, don't want to deal with UV-maps. Instead of generating a real texture and wrapping it using UV one can define vertex colors of an object using API. More than that, using this approach the color of a vertex can be also parameterized as a function of angle and position, so the generation of a noisy procedural texture becomes slightly easier. BufferGeometry Finally, I added some global noise and film-like grain using . EffectComposer var renderer = new THREE.WebGLRenderer({antialias: true});
outline = new THREE.OutlineEffect( renderer , {thickness: 0.01, alpha: 1, defaultColor: [0.1, 0.1, 0.1]});
var composer = new THREE.EffectComposer(outline);

// <- create scene and camera

var renderPass = new THREE.RenderPass( scene, camera );
composer.addPass( renderPass );

var filmPass = new THREE.FilmPass(
  0.20,   // noise intensity
  0.025,  // scanline intensity
  648,    // scanline count
  false,  // grayscale
);

composer.addPass(filmPass);
composer.render(); Name generation For name generation, I used a simple which was trained on 1k mushroom names . To preprocess and tokenize those names I used the python library . With it, I split all names into 200 unique tokens and wrote their transition probabilities to a javascript dictionary. The JS side of the code only reads those probabilities and stacks tokens until it generates a couple of words. Markov chain from here YouTokenToMe Here are some samples of mushroom names generated using this approach: Stricosphaete cinus Fusarium sium confsisomyc Etiformansum poonic Hellatatum bataticola Armillanata gossypina mortic Chosporium anniiffact Fla po sporthrina Part 3: Finalizing Preparing for the drop To prepare a project for a release on fxhash one simply needs to change all random calls in the code to the method as . The main idea is that your code must generate unique outputs for each hash but exactly the same output for the same hash. Then test the token in the sandbox and finally mint it when the minting will be opened. That’s it! fxrand() described here This brings us to the Mushroom Atlas (what I named this collection). You can check it out and see its variations . Although it was not sold out like some of my previous works, I think that this is the most advanced and challenging thing that I’ve made in generative art yet. Hope that those who minted this token also enjoyed their fungi in the non-fungible world! here Links Three.js documentation Check it out on fxhash! My Twitter

How to Draw Generative NFT Mushrooms with Three.js 🍄

How Smart Card NFC Chips Improve Secure Key Management in Blockchain Solutions

How Orbis implements Wireless mesh network technology Wireless mesh networks, an emerging technology, may bring the dream of a seamlessly connected world into reality. You would be forgiven for thinking that wireless mesh networking is just another marketing bullet point for new Wi-Fi routers, a phrase coined to drive up prices without delivering benefits. But we can avoid being cynical for once: mesh technology deliver a significant benefit over the regular old Wi-Fi routers we’ve bought in years past and that remain on the market. does Mesh networks are resilient, self-configuring, and efficient. You don’t need to mess with them after often minimal work required to set them up, and they provide arguably the best and highest throughput you can achieve in your home. These advantages have led to several startups and existing companies introducing mesh systems contending for the home and small business Wi-Fi networking dollar. : covering a relatively large area, more than about 1,000 square feet on a single floor, or a multi-floor dwelling or office, especially where there’s no Ethernet already present to allow easier wired connections of non-mesh Wi-Fi routers and wireless access points. Mesh networks solve a particular problem All the current mesh ecosystems also offer simplicity. You pull out great tufts of hair working with the web-based administration control panels on Wi-Fi routers. might even the most popular conventional In outdoor wireless networking, wireless mesh networks are the third topology after and in order to build a wireless network infrastructure. Each device in a wireless mesh network is typically called a mesh node and is connected with multiple other mesh nodes at the same time. point-to-point point-to-multipoint Wireless mesh networks are also because each mesh node can reach another node going through multiple hops and leveraging other nodes as repeaters. The major advantage of a wireless mesh networks is the intrinsic redundancy and, consequently, reliability because a mesh network is able to reroute traffic through multiple paths to cope with link failures, interference, power failures or network device failures. multi hop networks Point-to-point, Point-to-Multipoint and Mesh Networks Two types of wireless mesh networks are usually implemented for commercial and government applications: Unstructured or omni-directional wireless mesh networks Structured wireless mesh networks In an , each mesh node typically uses an omni-directional antenna and is able to communicate with all the other mesh nodes that are within the transmission range. Wireless links in an unstructured wireless mesh network are not planned and link availability is not always guaranteed. unstructured wireless mesh network Depending on the density of the mesh network, there may be many different links available to other mesh nodes or none at all. Unstructured mesh networks are usually implemented with non-line of sight radios (NLOS) using low frequency and low bandwidth radios operating, for example, in the UHF bands, such as 400 MHz or in the license-free band at 900 MHz. Unstructured wireless mesh networks leverage one single channel shared by all the radios. Therefore, the higher the number of hops a transmission requires, the lower the overall throughput of the network will be. are planned networks typically implemented using multiple radios at each node location and multiple directional antennas. A ring topology using multiple directional wireless links is commonly used in a structured wireless mesh network to enable each radio to seamlessly reroute traffic through different paths in the event of node or link failures. Structured wireless mesh networks Structured wireless mesh networks are often used for mission-critical applications such as wireless video surveillance, public safety, and industrial automation. They provide the in case a site requires a highly reliable and available wireless network for a broadband application such as video, voice and data streaming. Each link in a structured wireless mesh network operates on an independent channel and, therefore, the number of hops for a specific transmission does not affect the overall throughput of the network. ideal network architecture Wireless mesh networks have been studied for many years in academia since the early ’90s, initially mainly with military applications in mind, and then they started to get significant commercial traction between 2005 and 2010. Mesh networks in the world. the global standard for simple, secure wireless connectivity, now supports mesh networking. The new mesh capability enables many-to-many (m:m) device communications and is optimized for creating large-scale device networks. Bluetooth technology, It is ideally suited for building automation, sensor networks, and other IoT solutions where tens, hundreds, or thousands of devices need to reliably and securely communicate with one another. According to networking expert John Shepler, in the near future the Wi-Fi card in your laptop might become an access point in addition to its normal role as network client. In a full mesh topology, every node communicates with every other node, not just back and forth to a central router. In another variation, called a partial mesh network, nodes communicate with all nearby nodes, but not distant nodes. All communications are between the clients and the access point servers. The client/server relationship is the basis for this technology. The pros and cons Bluetooth Mesh Network has several advantages and application in this decade. Some of them us enlisted here: a wireless connection between laptop/pc and smart devices. a wireless connection between various peripheral(mouse, keyboard etc.) and devices(radio, audio speaker, displays etc.) and mobile phones. transfer of files, images, and MP3 between mobile phones. Data logging equipment that transmits data to a computer. Smart homes Commercial IoT application Smart manufacturing Peer networking But these applications are defined within certain ranges. For example, we can not use transfer data or files between the devices that are located at distance of a mile. A powerful bluetooth mesh network can be created and by giving its access globally, we can utilize it in a variety of application including messaging. And hence, Individual consumers and developers remain locked out of this lucrative market. And that’s where Orbis comes into the picture. What is Orbis? The Orbis platform aims to establish a platform for both consumer and commercial developments in Bluetooth mesh by establishing pre-existing infrastructure and network for developers to deploy onto. — Jason Chao, Orbis CEO. Orbis creates multi-purpose and flexible infrastructure for developers to build upon and consumers to utilize delivering this through three components: . Orbis has applications in IoT development, crowd-sourced networking, and systems integrations. OrbiStore, OrbisWeb, and OrbisToken (OBT) How does Orbis Work? Let’s take a simple application, for example, messaging. Messaging however only stands in for the general transmission of data over mesh networks. After downloading the OrbisWeb app for your IOS or Android device click “connect” and your phone is now a part of a bluetooth network, a node in OrbisWeb. Then you can proceed to download an app, perhaps Bluetooth messaging from the OrbiStore. Using the app, your message is broadcasted to all nodes in the range that then, broadcast to other users, is in kind repeated and relayed. This occurs until your recipient has received your message. And all the while, as your phone too is relaying others’ data, your wallet will be credited OrbisTokens simply for being part of the network which can then be used to purchase paid apps in the OrbiStore. The value of such decentralized messaging in the face of seemingly universal SMS service and Wi-Fi is that mesh networks are not susceptible to infrastructure damage such as in the wake of natural disasters nor do they require costly connectivity implementations in low-connectivity places such as subway tunnels, underpasses, or even rural areas. Analyzing Orbis Using the metrics I follow, which have been highlighted in — _Bitcoin! Litecoin! Ethereum! — excited! perplexed! and what not._hackernoon.com How to make Money by Trading and Investing in Cryptocurrency 1. Great Team: The development and progress of project rely on team members. Starting from the architectural overview on a piece of paper to how it can be implemented to market and its duration tends to depend on team and advisors. Orbis has team of very young members with an aim to lead the project idea to partnership with actual companies. 2. Real World Usage: OrisWeb android app alpha version available Not having noticable competitors. Partnered with Ritech Technology (Shenzhen) Co. Ltd. Individual consumers and developers however remain locked out of this lucrative market. The Orbis platform aims to establish a platform for both consumer and commercial developments in Bluetooth mesh by establishing pre-existing infrastructure and network for developers to deploy onto. Orbis creates multi-purpose and flexible infrastructure for developers to build upon and consumers to utilize delivering this through three components: OrbiStore, OrbisWeb, and OrbisToken (OBT). 3. Future ideology OrbisWeb delivers secure, global, decentralized, and open networks of Bluetooth communities that anyone can participate in. OrbisWeb aims to make Bluetooth mesh development easily accessible to third-party developers with implementations such as IoT, crowd-gathered data, digital infrastructure, logistics, and systems management. For consumers, Orbis apps will bring unique functionalities unattainable with conventional WiFi based apps. Orbisweb OrbiStore is an application platform open to third-party development, whether utilizing BLE network infrastructure or not and developer income will be supplemented with OBT. Orbistore Developers are minted new coins based on app usage to coin cap and consumers are minted coins for being active mobile nodes running the OrbisWeb mobile app. OBT is used to purchase paid apps on the OrbiStore and purchase products. Orbis Token (OBT) I am pretty stoked for this one. I am VERY bullish on Chinese Blockchain projects, and the That being said, this token hit home for me and I have participated in the NEO ecosystem provides a high energy, high reward platform for growth and usage once mainstream adoption begins. Orbis Airdrop. ORBIS Orbis delivers secure, global, decentralized, and open networks of Bluetooth communities that anyone can participate in. Orbis aims to make Bluetooth mesh development easily accessible to third-party developers with implementations such as IoT, crowd-gathered data, digital infrastructure, logistics, and systems management. For consumers, Orbis apps will bring unique functionalities unattainable with conventional WiFi based apps. What this means, is that you could use Orbis for — IOT Industry Smarthomes, crowdsourced data, and automation. Control your lights, shades, and HVAC, manage your supply chain, or see live wait times with the Orbis app. 2. BTC Transactions Use the Orbis mesh network to Funds are held in escrow until matching transaction data is uploaded. send and receive cryptocurrencies while offline. 3. Defense Mesh provides reliable offline communication in undeveloped landscapes. Mesh can coordinate soldiers and systems in monitoring and managing the battlefield. 4. Telecommunications Internet sharing and mesh messaging. Sell your mobile data for OBT and message others via mesh. A robust, cheap, and portable solution for disaster relief. 5. Advertising Sponsored locations and foot traffic data. Be rewarded in OBT for visiting and connecting to a node in a sponsored location! Quite interestingly, , which would see recently announced their airdrop of a 1,000,000 tokens, to a maximum number of 60,000 NEO addresses. Orbis also announced their airdrop Simple math tells you it is around 16.7 OBT tokens per person. Given the fact that an exchange would list OBT at $0.70, that’s a little more than 11 dollars. Enough for a free lunch :) Jokes apart. This token does seem like an interesting Hold, and has a strong set of fundamentals IMHO. I advocate investing in ecosystem tokens and fundamentally strong tokens. Get your OBT tokens here. Cheers and Thank you for reading. **************************************************************** Clap 1 time or 50 times. It helps me gain exposure. Thank you ! _ Articulating my thoughts from over the years and super stoked to write about Blockchain, trading, cryptocurrency and life. I aim to bring Cryptocurrencies to the masses in a well refined, easy to understand manner. Being complicated helps none and neither does the biased media. Yes, I think the system is a massive lie and it is about time to change that. _ #longlivecrypto. ************************************************************** Disclaimer : This is not a sponsored post and while I have signed up for the Orbis Airdrop — I am not affiliated to Orbis in anyway.

Wireless 2.0 — Integrated Networks on the Blockchain.

Stories, News & Mentions about KINDERPASS

Kinderpass’s Stories on HackerNoon