News: Publish interactive 3D content online .

If you want to publish interactive 3D content online then Sketchfab website help us.
Also you can easily be embedded in any webpage.
The bad thing is not yet designed to display several 3D objects on a single page.
See more here.
You can also buy 3D models. They tell us: Find everything from low poly assets to animated rigs & digital scans for your 3D, virtual reality, and augmented reality projects. With our model inspector, what you see is what you get.

The particles editor from Pixi.js .

The Pixi.js Creator Engine is known by users and java script developers to create digital content with the 2D WebGL renderer.
Today I will show you a publisher created by developers to solve the particle issue.
The parameters specific to each particle system are chosen, the result is viewed and then saved to an output file.
You can test this online tool here.
The result of snow particles is a file created into json style and is this:

{
        "alpha": {
                "start": 0.73,
                "end": 0.46
        },
        "scale": {
                "start": 0.15,
                "end": 0.2,
                "minimumScaleMultiplier": 0.5
        },
        "color": {
                "start": "#ffffff",
                "end": "#ffffff"
        },
        "speed": {
                "start": 200,
                "end": 200,
                "minimumSpeedMultiplier": 1
        },
        "acceleration": {
                "x": 0,
                "y": 0
        },
        "maxSpeed": 0,
        "startRotation": {
                "min": 50,
                "max": 70
        },
        "noRotation": false,
        "rotationSpeed": {
                "min": 0,
                "max": 200
        },
        "lifetime": {
                "min": 4,
                "max": 4
        },
        "blendMode": "normal",
        "ease": [
                {
                        "s": 0,
                        "cp": 0.379,
                        "e": 0.548
                },
                {
                        "s": 0.548,
                        "cp": 0.717,
                        "e": 0.676
                },
                {
                        "s": 0.676,
                        "cp": 0.635,
                        "e": 1
                }
        ],
        "frequency": 0.004,
        "emitterLifetime": -1,
        "maxParticles": 1000,
        "pos": {
                "x": 0,
                "y": 0
        },
        "addAtBack": false,
        "spawnType": "rect",
        "spawnRect": {
                "x": -500,
                "y": -300,
                "w": 900,
                "h": 20
        }
}   

The regl and webgl .

The regl is a new functional abstraction for wegbl.
The official website can be found here.

For example, using WebGL, we iterating over points from the CPU to the GPU.
The regl makes it really easy to dive right in and start playing around, like shaders.
Let's see one simple example with points :

const drawPoints = regl({
    frag: '
    // set the precision of floating point numbers
         precision highp float;

         // this value is populated by the vertex shader
    varying vec3 fragColor;

    void main() {
     // gl_FragColor is a special variable that holds the color of a pixel
     gl_FragColor = vec4(fragColor, 1);
    }
    ',

    vert: '
    // per vertex attributes

    }
    ',

    attributes: {
     // each of these gets mapped to a single entry for each of the points.

    },

    uniforms: {
     // by using 'regl.prop' to pass these in, we can specify them as arguments

    },

    // if want points then specify the number of points to draw
    count: points.length,

    // specify that each vertex is a point (not part of a mesh)
    primitive: 'points',
 });
// the next step 
// initialize regl
regl({
  // callback when regl is initialized
  onDone: main
});

Fonts - WOFF fonts - part 001.

Today I will start a new series of tutorials about fonts.
The main reason was that web development and font are very useful both in transmitting content and in the ergonomics of any website.
I will try to highlight less well-researched issues that come to the aid of any type of developer.
The first step is about WOFF and WOFF2 font files.
A WOFF file is a web font file created in the WOFF (Web Open Font Format) format.
This open format used for delivering webpage fonts on the fly.
It is saved as a compressed container and supports TrueType (.TTF) and OpenType (.OTF) fonts. Another good thing allows information about software licensing.

Some benefits of using WOFF:

• web sites using WOFF will use less bandwidth and will load faster than if they used equivalent fonts; 
• many font vendors that are unwilling to license like TrueType OpenType;
• the free-software browser vendors like the WOFF format becoming a truly universal, interoperable font format for the web;
• WOFF files are referenced within CSS files using the @font-face rule;
• WOFF files were replaced with .WOFF2 files;
• the WOFF 2.0 format that features improved compression;
• 
  

One example of use this fonts into CSS - the stylesheet area:

@font-face {
  font-family: 'MyFontWebsite';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

This table show the browsers support:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
36+	No	35+ with flag	23+	No	37	No