Ответы пользователя по тегу WebGL
  • Какие существуют движки для 3D игр?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Three.js - это для браузера
    Ответ написан
    Комментировать
  • Почему нет света в three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    очень распространенная ошибка - необходимо изменить параметры
    строки:
    pointlight.position.set( 10, 10, 10 );
    хотя бы на:
    pointlight.position.set( 100, 100, 100 );
    Ответ написан
    Комментировать
  • Как убрать меридианы и параллели в сфере на three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    уважаемый Fraideron, я осознал вашу проблему, в полном объеме, и настоятельно рекомендую, ...sicMaterial({map:texture_earth, overdrav:tru... исправить на overdraw и будет все, как просили, исчезнет wireframe - эффект. Так же можно отказаться от CanvasRenderer в пользу WebGLRenderer
    Ответ написан
    3 комментария
  • Как убрать меридианы и параллели в сфере на three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    если вы имеете ввиду, что ребра этой сферы точат, как кости анорексички)), то, как вариант можно увеличить количество полигонов, как то так:
    new THREE.SphereGeometry( 200, 50, 50);
    Ответ написан
  • Как сделать видимый конус света из прожектора (по типу того, которым вызывают Бетмена)?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    А что если конус использовать вместе с источником света таким образом ты получишь свет ведущий себя, как свет, только с эффектом прожектора, как в "Batman")).
    Также возможен вариант применения к конусу шейдерного эффекта "glow" который сделает поток света более интересным, к сожалению не что не спасет этоти способы от сквозного проникновения через стены, так как что кое что придется рассчитывать самому.
    Если данные реализации будут не по душе - нужно изучать шейдеры и рассчитывать все саму.

    Вот несколько ссылок которые могут в этом помочь:
    pixelshaders.com
    www.airtightinteractive.com/2013/02/intro-to-pixel...

    тут куча примеров:
    glsl.heroku.com

    так же есть хороший ресурс на котором можно спросить.

    PS вообще есть реализации не через конус а через 2, 3, ... и более плоских объекта скрещенных между собой, дело остается за малым реализовать "клипинг" луч-поверхность
    Ответ написан
    Комментировать
  • Как сделать видимый конус света из прожектора (по типу того, которым вызывают Бетмена)?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Elfrey,
    тут как раз используется то

    в этом примере по полной используются шейдеры, если я вас правильно понял,
    то в самом простом варианте будет достаточно нарисовать конус света выходящего из прожектора по средствам заранее созданного объекта типа конус с наложенным на него материалом желтого цвета с полупрозрачностью, без всяких шейдеров например так:

    geomLightCone = new THREE.CylinderGeometry( 0, 30, 100, 20, 4 );
    material = new THREE.MeshBasicMaterial( {
    				color: 0xFFFF00, 
    				opacity: 0.5, 
    				visible: true} );
    
    meshLight = new THREE.Mesh(geomLightCone, material);
    scene.add(meshLight);


    ...так же необходимо постоянно отслеживать положение луча в зависимости от положения прожектора.

    ps возможно я ошибаюсь, но отслеживать положение луча не обязательно, достаточно лишь в момент инициализации объектов на сцене поместить его в нужное место, а затем
    вместо:
    scene.add(meshLight);
    добавить к объекту "прожектор", объекта "луч света" так:
    projectorMesh.add(meshLight);
    Ответ написан
    1 комментарий
  • Работа с изображением за канвасом при помощи WebGL

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Если я не ошибаюсь, то это позволяет сделать скрин окна браузера.
    Ответ написан
    Комментировать
  • Как Zoom`ить объекты на сцене, а не Gizmo (как в 3DS Max) в Three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa Автор вопроса
    Помог с решением проблемы - @trushka

    решение от @trushka:
    делать таки с одной камерой и скалить Gizmo в зависимости от расстояния до неё. Ну вот, допустим
    var base=1000 - расстояние до камеры, при котором Gizmo не скалится
    Тогда при движении камеры если s - расстояние до точки просмотра:
    Gizmo.scale.x=Gizmo.scale.y=Gizmo.scale.z=s/base;

    var v1 = this.camera.position.clone();
        var v2 = Gizmo.position.clone();
        var len  = v1.sub(v2).length();
            
        var v = new THREE.Vector3(1,1,1);
        v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
        Gizmo.applyMatrix(obj.mLocal.clone().scale(v));


    .....
    спустя какое то время пришло понимание что этот код работает несколько не правильно
    так как при большом отдалении начинали высыпать баги фишки артефакты неизвестного характера, разбираться сними честно не хотелось. Собрав информацию с других ресурсов стало понятно, как решить данный вопрос.
    собственно код:
    var cameraPos = this.world.camera.position.clone();
    var gizmoPos = E.select.mLocal.getPosition().clone();
    cameraPos.sub( ( cameraPos.clone().sub( gizmoPos ) ).normalize().multiplyScalar( 1000 ) );


    немного прокомментирую, находим направление камеры на Gizmo
    так:
    ( cameraPos.clone().sub( gizmoPos ) ).normalize()
    увеличиваем результат в 1000 раз
    так:
    .multiplyScalar( 1000 ) // это кстати удаление Gizmo от камеры

    и вычитаем результат из позиции камеры.
    cameraPos.sub( ... );
    суть метода заключается в банальном удерживании камеры на равном расстоянии(1000) от камеры.

    У меня все, благодарю за помощь.
    Ответ написан
    Комментировать
  • Как Zoom`ить объекты на сцене, а не Gizmo (как в 3DS Max) в Three.js?

    sozercanie_kosmosa
    @sozercanie_kosmosa Автор вопроса
    @trushka, все вроде бы как хорошо
    выделяем объект, появляется Gizmo:
    0_d02b4_eccd5ac5_L
    делаю Zoom, все замечательно:
    0_d02b5_7a1b857_L
    но теперь при переносе точки просмотра возникают искажения:
    0_d02b6_f25a7649_L
    так же искажения возникают при Zoom'ировании из определенных положении камеры:
    0_d02bb_797fb9ae_L
    не получилось ((( может быть я что то не так сделал?

    делал так:

    var v1 = this.camera.position.clone();
    	var v2 = this.orbitControl.target.clone();
    	var len  = v1.sub(v2).length();
    		
    	var v = new THREE.Vector3(1,1,1);
    	v.multiplyScalar(len/1039); // 1039 - расстояние от камеры до точки просмотра
    	Gizmo.applyMatrix(obj.mLocal.clone().scale(v));
    Ответ написан
  • Что почитать на тему шейдеров в WebGL?

    sozercanie_kosmosa
    @sozercanie_kosmosa
    Ответ написан
    Комментировать