SG painting on image object

src/js/locales/en-US.json

@@ -402,7 +402,10 @@
         "directional-light": "Directional light",
         "fog": "Fog",
         "grayscale": "Grayscale",
-        "shading-mode": "Shading Mode"
+        "shading-mode": "Shading Mode",
+	      "cubemap-not-supported": "Whoops cubemap format isn't supported check the {{link}} for details.",
+	      "scene-cubemap":"Scene Cube map",
+	      "scene-texture":"Scene Texture"
       },
       "common": {
         "object-creation-help": "How to Create 3D Models for Custom Objects",
@@ -434,7 +437,11 @@
         "are-you-sure": "Are you sure?"
       },
       "inspected-element": {
-        "properties": "Properties:"
+        "properties": "Properties:",
+        "brush-color":"Brush color",	           
+        "type":"Type",	           
+        "simple": "Brush",	
+        "eraser": "Eraser"
       },
       "camera": {
         "fov": "F.O.V."

src/js/locales/ru-RU.json

@@ -107,7 +107,7 @@
 			"pencil": "Карандаш",
 			"pen": "Ручка",
 			"note-pen": "Ручка для записи",
-			"eraser": "Стирачка",
+			"eraser": "Ластик",
 			"clear-all-layers": "Очистить все слои",
 			"clear-layer": "Очистить слой",
 			"smaller-brush": "Маленькая кисть",
@@ -167,7 +167,7 @@
 					"description": "Персмотрите доски с этим иснтрументом. Есть что записать? Рисуйте прям на доске. Этот инструмент рисует на слою Notes, sпоэтому вы может легко это очистить."
 			  	},
 			  	"eraser": {
-					"title": "Страчка",
+					"title": "Ластик",
 					"description": "Надо что-то стиреть? Используйте стирачку. Если зажата кнопка option (или alt), тогда стирачка будет чистить всё на выбраном слою. В противном случае будет очищать все слои."
 			  	}
 			},
@@ -402,7 +402,10 @@
 			  "directional-light": "Направленое освещение",
 			  "fog": "Туман",
 			  "grayscale": "Оттенки серого",
-			  "shading-mode": "Режим затенения"
+			  "shading-mode": "Режим затенения",
+			  "cubemap-not-supported": "Упс, формат кубической текстуры неподерживается перейдите в {{link}} чтобы узнать детали.",
+			  "scene-cubemap":"Кубическая текстура",
+			  "scene-texture":"Текстура сцены"
 			},
 			"common": {
 			  "object-creation-help": "Как создавать 3D модели для Кастомных Объектов",
@@ -434,7 +437,11 @@
 			  "are-you-sure": "Вы уверены?"
 			},
 			"inspected-element": {
-			  "properties": "Свойства:"
+			  "properties": "Свойства:",
+			  "brush-color":"Цвет кисти",
+			  "type":"Тип",
+			  "simple": "Кисть",
+			  "eraser": "Ластик"
 			},
 			"camera": {
 			  "fov": "F.O.V."

src/js/services/model-loader.js

@@ -58,7 +58,8 @@ const projectFolder = type => ({
   'object': path.join('models', 'objects'),
   'character': path.join('models', 'characters'),
   'environment': path.join('models', 'environments'),
-  'attachable': path.join('models', 'attachables')
+  'attachable': path.join('models', 'attachables'),
+  'sceneTexture': path.join('models', 'sceneTextures')
 }[type])
 
 const modelIsInProjectFolder = ({ model, type }) =>

src/js/shared/actions/scene-object-creators.js

@@ -170,7 +170,6 @@ const createImage = (id, camera, room, imagePath = 'placeholder') => {
     x, y, z: 1,
 
     rotation: { x: 0, y: rotation, z: 0 },
-
     visible: true,
     opacity: 1,
     visibleToCam: true,

src/js/shared/reducers/shot-generator.js

@@ -13,7 +13,7 @@ const serializeSceneObject = require('./shot-generator/serialize-scene-object')
 const ObjectModelFileDescriptions = require('../../../data/shot-generator/objects/objects.json')
 const AttachablesModelFileDescriptions = require('../../../data/shot-generator/attachables/attachables.json')
 const { ShadingType } = require('../../vendor/shading-effects/ShadingType')
-
+const BrushType = require('../../shot-generator/components/Three/Helpers/Brushes/TextureBrushTypes')
 const hashify = string => crypto.createHash('sha1').update(string).digest('base64')
 
 const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1)
@@ -36,6 +36,7 @@ const getSelectedAttachable = state => state.undoable.present.selectedAttachable
 
 const getWorld = state => state.undoable.present.world
 
+const getDrawMode = state => state.undoable.present.drawMode 
 
 const getHash = state =>
   hashify(JSON.stringify(getSerializedState(state)))
@@ -47,7 +48,8 @@ const getSerializedState = state => {
   return {
     world: getWorld(state),
     sceneObjects: R.map(serializeSceneObject, getSceneObjects(state)),
-    activeCamera: getActiveCamera(state)
+    activeCamera: getActiveCamera(state),
+    drawingBrush: getDrawMode(state).brush
   }
 }
 
@@ -674,6 +676,11 @@ const initialState = {
 
   undoable: {
     world: initialScene.world,
+    drawMode: { 
+      brush: { color: '#000000', size: 2 },
+      isEnabled: false,
+      type: BrushType.SIMPLE
+    },
     activeCamera: initialScene.activeCamera,
     sceneObjects: withDisplayNames(initialScene.sceneObjects),
     selections: [],
@@ -1312,6 +1319,12 @@ const worldReducer = (state = initialState.undoable.world, action) => {
         if (action.payload.hasOwnProperty('backgroundColor')) {
           draft.backgroundColor = action.payload.backgroundColor
         }
+        if (action.payload.hasOwnProperty('sceneTexture')) {
+          draft.sceneTexture = action.payload.sceneTexture
+        }
+        if (action.payload.hasOwnProperty('textureType')) {
+          draft.textureType = action.payload.textureType
+        }
         return
 
       case 'UPDATE_WORLD_ROOM':
@@ -1564,6 +1577,29 @@ const mainReducer = (state/* = initialState*/, action) => {
   })
 }
 
+const drawModeReducer = (state = initialState.undoable.drawMode, action) => {
+  return produce(state, draft => {
+    switch(action.type) {
+      case 'UPDATE_DRAW_MODE':
+        if(action.payload.hasOwnProperty('isEnabled')) {
+          draft.isEnabled = action.payload.isEnabled
+        } 
+        if(action.payload.hasOwnProperty('cleanImages')) {
+          draft.cleanImages = action.payload.cleanImages
+        }
+        if(action.payload.brush) {
+          draft.brush.color = action.payload.brush.color ? action.payload.brush.color : draft.brush.color
+          draft.brush.size = action.payload.brush.size ? action.payload.brush.size : draft.brush.size
+          draft.brush.type = action.payload.brush.type ? action.payload.brush.type : draft.brush.type
+        }
+        return
+
+      default:
+        return 
+    }
+  })
+}
+
 const checksReducer = (state, action) => {
   return produce(state, draft => {
     switch (action.type) {
@@ -1644,6 +1680,7 @@ const undoableReducers = combineReducers({
   sceneObjects: sceneObjectsReducer,
   activeCamera: activeCameraReducer,
   world: worldReducer,
+  drawMode: drawModeReducer,
   selections: selectionsReducer,
   selectedBone: selectedBoneReducer,
   selectedAttachable: attachableSelectionsReducer
@@ -1790,7 +1827,7 @@ module.exports = {
   deleteScenePreset: id => ({ type: 'DELETE_SCENE_PRESET', payload: { id } }),
 
   createCharacterPreset: payload => ({ type: 'CREATE_CHARACTER_PRESET', payload }),
-
+  updateDrawMode: payload => ({ type: 'UPDATE_DRAW_MODE', payload: payload}),
   createPosePreset: payload => ({ type: 'CREATE_POSE_PRESET', payload }),
   createHandPosePreset: payload => ({ type: 'CREATE_HAND_POSE_PRESET', payload }),
   createEmotionPreset: payload => ({ type: 'CREATE_EMOTION_PRESET', payload }),
@@ -1824,6 +1861,7 @@ module.exports = {
   // selectors
   //
   getSceneObjects,
+  getDrawMode,
   getSelections,
   getActiveCamera,
   getSelectedBone,

src/js/shot-explorer/ShotExplorerSceneManager.js

@@ -8,6 +8,7 @@ import {
     getSceneObjects,
     getWorld,
     getSelectedBone,
+    updateWorld,
 
  } from '../shared/reducers/shot-generator'
  import systemEmotionPresets from '../shared/reducers/shot-generator-presets/emotions.json'
@@ -23,6 +24,7 @@ import { getFilePathForImages } from '../shot-generator/helpers/get-filepath-for
 import Room from '../shot-generator/components/Three/Room'
 import CameraUpdate from '../shot-generator/CameraUpdate'
 import deepEqualSelector from '../utils/deepEqualSelector'
+import SceneBackground from '../shot-generator/components/Three/SceneBackground'
 import FilepathsContext from '../shot-generator/contexts/filepaths'
 
 const sceneObjectSelector = (state) => {
@@ -49,6 +51,7 @@ const ShotExplorerSceneManager = connect(
         selectedBone: getSelectedBone(state),
     }),
     {
+        updateWorld,
         withState: (fn) => (dispatch, getState) => fn(dispatch, getState())
     }
 )( React.memo(({ 
@@ -60,13 +63,15 @@ const ShotExplorerSceneManager = connect(
     setLargeCanvasData,
     withState,
     shouldRender,
+    updateWorld,
 }) => {
     const { scene, camera, gl } = useThree()
     const rootRef = useRef()
     const groundRef = useRef()
     const ambientLightRef = useRef()
     const directionalLightRef = useRef()
-
+    const drawingTextures = useRef({})
+    const drawingSceneTexture = useRef({})
     const sceneObjectLength = Object.values(sceneObjects).length
     const modelObjectIds = useMemo(() => {
       return Object.values(sceneObjects).filter(o => o.type === 'object').map(o => o.id)
@@ -106,10 +111,6 @@ const ShotExplorerSceneManager = connect(
         directionalLightRef.current.rotateX(world.directional.tilt+Math.PI/2)
     }, [world])
 
-    useEffect(() => {
-      scene.background = new THREE.Color(world.backgroundColor)
-    }, [world.backgroundColor])
-
     useEffect(() => {
       if(!directionalLightRef.current) return
       directionalLightRef.current.rotation.x = 0
@@ -210,7 +211,8 @@ const ShotExplorerSceneManager = connect(
             return <SimpleErrorBoundary key={ id }>
               <Image
                 imagesPaths={getFilePathForImages(sceneObject, storyboarderFilePath)}
-                sceneObject={ sceneObject }/>
+                sceneObject={ sceneObject }
+                drawTextures={ drawingTextures.current }/>
               </SimpleErrorBoundary>
         })
     }
@@ -230,6 +232,14 @@ const ShotExplorerSceneManager = connect(
               visible={world.environment.visible}
               grayscale={ world.environment.grayscale } />
     }
+    {
+         <SceneBackground
+              imagePath={ getFilePathForImages({imageAttachmentIds: world.sceneTexture ? [world.sceneTexture] : [] }, storyboarderFilePath) }
+              world={world}
+              storyboarderFilePath={ storyboarderFilePath }
+              updateWorld={ updateWorld }
+              drawingSceneTexture={ drawingSceneTexture.current }/>
+    }
     {
         roomTexture && <Room
               texture={ roomTexture }