使用webgl2实时构造山路实景

WebGL Landscape

webgl, valley, road

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2982
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.querySelector('canvas'),
    gl = canvas.getContext('webgl2', {
        antialias: false
    });

var frameID = void 0;

function createShader(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        throw new Error(gl.getShaderInfoLog(shader));
    }
    return shader;
}

function createVertexShader(gl, source) {
    return createShader(gl, gl.VERTEX_SHADER, source);
}

function createFragmentShader(gl, source) {
    return createShader(gl, gl.FRAGMENT_SHADER, source);
}

function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        throw new Error(gl.getProgramInfoLog(program));
    }
    return program;
}

function createProgramFromSource(gl, vertexShaderSource, fragmentShaderSource) {
    return createProgram(
        gl,
        createVertexShader(gl, vertexShaderSource),
        createFragmentShader(gl, fragmentShaderSource));

}

function createBuffer(gl, data) {
    var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : gl.ARRAY_BUFFER;
    var usage = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : gl.STATIC_DRAW;
    var buffer = gl.createBuffer();
    gl.bindBuffer(target, buffer);
    gl.bufferData(target, data, usage);
    return buffer;
}

function getProgramLocations(gl, program) {
    return {
        uniforms: getProgramUniforms(gl, program),
        attributes: getProgramAttributes(gl, program)
    };

}

var locations = getProgramLocations(gl, program);

var lineGrid = createLineGrid(512, 128);
var buffers = lineGrid.map(function(line) {
    return createBuffer(gl, new Float32Array(line));
});
//const buffer = createBuffer(gl, new Float32Array(createGrid(128, 128)))

var model = mat4.create(),
    view = mat4.create(),
    inverseView = mat4.create(),
    modelView = mat4.create(),
    viewProjection = mat4.create(),
    modelViewProjection = mat4.create(),
    perspective = mat4.create(),
    orthogonal = mat4.create(),
    translation = vec3.fromValues(0, -6, -64);

function frame(frameTime) {
    var nearPlane = 0.1,
        farPlane = 1000.0,
        aspectRatio = gl.canvas.width / gl.canvas.height;

mat4.perspective(perspective, Math.PI * 0.25, aspectRatio, nearPlane, farPlane);
    mat4.ortho(orthogonal, gl.canvas.width, 0, gl.canvas.height, 0, nearPlane, farPlane);

vec3.set(
        translation,
        Math.sin(frameTime * 0.00125) * 2, -3 - (1.0 + Math.sin(frameTime * 0.0001)) * 0.5 * 6, -64);

mat4.identity(view);
    mat4.identity(model);
    mat4.translate(model, model, translation);

mat4.multiply(modelView, model, view);
    mat4.multiply(modelViewProjection, perspective, modelView);

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

gl.uniform1f(locations.uniforms.get('u_time').location, frameTime * 0.1);
    gl.uniformMatrix4fv(locations.uniforms.get('u_modelViewProjection').location, gl.FALSE, modelViewProjection);
    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;
    try {

for (var _iterator = buffers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var buffer = _step.value;
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.enableVertexAttribArray(locations.attributes.get('a_position').location);
            gl.vertexAttribPointer(locations.attributes.get('a_position').location, 3, gl.FLOAT, gl.FALSE, 0, 0);

gl.drawArrays(gl.LINE_STRIP, 0, 512);
        }
    } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion && _iterator.return) {
                _iterator.return();
            }
        } finally {
            if (_didIteratorError) {
                throw _iteratorError;
            }
        }
    }

frameID = window.requestAnimationFrame(frame);
}

function resize() {
    gl.canvas.width = gl.canvas.clientWidth;
    gl.canvas.height = gl.canvas.clientHeight;
}

function start() {
    var audio = document.createElement('audio');
    audio.crossOrigin = 'anonymous';
    audio.src = 'https://azazeln28.neocities.org/codepen/audio/spaceship-engine-looped.mp3';
    audio.loop = true;

window.addEventListener('resize', resize);
    window.dispatchEvent(new Event('resize'));

frameID = window.requestAnimationFrame(frame);
}

start();

编译

CSS

HTML

WebGL Landscape

webgl, valley, road

编辑器支持Emmet

快捷键

WebGL Landscape

webgl, valley, road

使用infamous实现的html普通元素和webgl三维模型融合场景

学习使用webgl shader（glsl代码）来实现3D团状类星云物质特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：